Vue DevTools
Vue DevTools is a browser extension that lets you inspect components, state and events while your app runs.
In this page:
Vue DevTools
Install the Vue DevTools extension for Chrome, Firefox or Edge, or use the standalone app. It shows the component tree, lets you edit props and state live, tracks Pinia stores and Router state, and has a timeline of events.
It works with development builds of Vue.
Note:
DevTools only connects to development builds by default.
Example: Vue DevTools
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Open Vue DevTools to inspect this component.</p>
<p>App name: {{ name }}</p>
</div>
<script>
const app = Vue.createApp({
name: "DevToolsDemo",
data() { return { name: "Inspectable App" }; },
});
app.config.errorHandler = (err) => console.error(err); // app-level error hook
app.mount("#app");
console.log("devtools flag is a boolean:", typeof app.config.devtools === "boolean" || app.config.devtools === undefined);
</script>
</body>
</html>
<!-- Output:
Rendered: Open Vue DevTools to inspect this component.App name: Inspectable App
console: devtools flag is a boolean: true
-->Related Topics
Common Mistakes
- Using a production build and finding nothing
- Editing state in DevTools and expecting it to persist
- Forgetting to enable the extension for file URLs
Chapter Summary
- DevTools inspects components and state
- It shows Pinia and Router
- It has a timeline
- Works with development builds
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: