24.7K ·GitHub
What is this?
This is Vue Devtools - a browser devtools extension for debugging Vue.js applications. The devtools-v6 repo is its version 6 codebase.
Is this an extension I add to my browser, or its own app?
It is an extension: it adds a Vue panel to the developer tools in Chrome and Firefox. If you would rather work outside the browser, there is also a standalone Electron app.
How do I add it to my browser?
Install the extension via the Install guide in the project docs - as a user there is nothing to build. Only developing the devtools themselves requires Node.js (>= 8.10) and yarn in this lerna monorepo.
Should I use this one, or the new version the README mentions?
The README opens by pointing to vuejs/devtools-next, a brand-new rewrite that is now in beta, and asks people to help test it. This v6 extension is the established release today, with about 24.7k GitHub stars.
Does it work with both Vue 2 and Vue 3 apps?
Yes. It ships dedicated app backends for Vue 2 and Vue 3, and Vue 1 support is listed as coming soon.
I am writing a Vue plugin - can it hook into the devtools?
Yes. The repo publishes a public devtools API (the api package) that Vue plugins can install to surface their own data in the panel.
Does it inject anything into my page to inspect it?
Yes - a backend is injected into the page to interact with your Vue apps, while the panel UI is itself a Vue app rendered in the browser devtools pane.
What are similar projects?
redux-devtools-extension, redux-devtools, react-devtools, vConsole, web-source-inspect, responsively-app, react-scan, vuex
Which topics is it in?
firefox-extension, devtools, debugging, chrome-extension, browser-extension, javascript-library, electron, vue, plugin, web-development, frontend, api
