Vue.js devtools for Chrome: Debug Vue 3 Apps
Vue.js devtools · for Windows, macOS and Linux
Developer: Vue.js team (opens in a new tab)
- Windows
- macOS
- Linux
The download link points to the program’s official source; the file is not hosted on this site. Link address: chromewebstore.google.com
Link not working? Let us know
Vue.js devtools is the official, open-source browser extension for debugging Vue.js applications, from the Vue team. The current extension supports Vue 3; Vue 2 projects need the legacy v6 devtools.
Vue.js devtools adds a Vue panel to Chrome’s developer tools so you can see the component tree, live state and app events of a Vue application instead of guessing from the rendered HTML.
What you can inspect
According to the official documentation at devtools.vuejs.org, the devtools offer:
- Component inspection: Browse the component tree and edit properties live, with changes shown immediately.
- Pinia integration: Look at your store state, with time-travel debugging to inspect it at any point.
- Vue Router integration: View your routes and their details.
- Timeline and event tracking: Follow custom events, including the source component, name and payload.
Vue 2 or Vue 3?
The current Vue DevTools only supports Vue 3. If you still maintain a Vue 2 app, the documentation points you to the legacy v6 devtools at devtools-v6.vuejs.org. Besides the browser extension, Vue DevTools is also available as a Vite plugin, which runs inside your development server.
Installing it
- Click Download to open Vue.js devtools on the Chrome Web Store.
- Add it to Chrome.
- Open a Vue 3 app in development mode, press F12 and choose the Vue tab.
Production builds usually disable devtools support, so test against your local dev server. You’ll need Node.js to run one. For React projects, use React Developer Tools.
Pros
- Official tool from the Vue team
- Pinia and Vue Router integration
- Also available as a Vite plugin
Cons
- Vue 3 only; Vue 2 needs the legacy version
- Usually not available on production builds
Frequently Asked Questions
Does the extension work with Vue 2?
No. The current Vue DevTools supports Vue 3 only. For Vue 2, the official documentation points to the legacy v6 devtools.
Is there an alternative to the browser extension?
Yes. Vue DevTools is also offered as a Vite plugin that runs in your development setup.
Vue.js devtoolsOpen source
Download (opens in a new tab)
