Guide · Open source
How to use devtools-v6: clone, build and debug Vue apps
Updated · written with AI from the project's own documentation and checked against our catalogue data
devtools-v6 is the vuejs/devtools-v6 repository, the source for a browser devtools extension that adds a Vue panel to your browser's developer tools. It lets you look at the components, state and data inside a running Vue.js application while you work on it. This guide explains what the repo contains, how to clone it, how its packages fit together, and whether it is the right version for you.
Vue Devtoolsvuejs/devtools-v6 · ★ 24.7k · MIT Install options & downloads Quick start
- 1Decide which version you need. Read the note about vuejs/devtools-next first. Pick devtools-v6 only if you need this older line or want to work on its code.
- 2Clone the repository. Run git clone https://github.com/vuejs/devtools-v6 in the folder where you want the project.
- 3Open the monorepo folder. Look at the packages list to see which parts handle Vue 2, Vue 3, the browser shell and the devtools pane.
- 4Follow the install guide. Use the documentation's installation page to build and load the extension, since the README excerpt does not include those steps.
- 5Test with a Vue app. Open a running Vue app in the browser and check the Vue panel in your developer tools.
What devtools-v6 is and who it is for
devtools-v6 is a browser extension for debugging Vue.js applications. Once installed, it adds a Vue panel to your browser's developer tools so you can inspect a running Vue app.
It suits developers building or maintaining Vue.js apps who want to inspect running components, and teams working on Vue 2 or Vue 3 apps, since the monorepo includes handlers for both. It is also a fit for people who want to contribute to a browser devtools extension written in TypeScript.
- Good fit: developers debugging Vue 2 or Vue 3 apps, and contributors to a TypeScript devtools project.
- Not a fit: non-developers, or anyone not working with Vue.js, since the tool only helps with Vue apps.
- Check first: the README points users to vuejs/devtools-next, the newer beta, so this repo may be the older line.
Check whether devtools-next is the better choice
The README states that a brand new version of Devtools is being developed at vuejs/devtools-next, that it is now in beta, and that the team is asking people to help test it. If you want the latest version, start with devtools-next rather than this repo.
Use devtools-v6 if you specifically need this line of the project, for example to work on the code itself or to match an existing setup.
Clone the devtools-v6 repository
The README gives one install command: clone the repository from GitHub. The source does not list any prerequisites, so check the Contributing guide and the repo files for build requirements before you start.
Run the following command in the folder where you want the project to live.
git clone https://github.com/vuejs/devtools-v6Understand the monorepo packages
The repo is a monorepo, meaning several related packages live in one place. Knowing what each one does helps you find your way around the code and decide what you need.
- api: the public devtools API that can be installed in Vue plugins.
- app-backend-api: an abstract API that links the public API, the core and the Vue handlers.
- app-backend-core: the main logic injected in the page to interact with Vue apps.
- app-backend-vue2 and app-backend-vue3: decoupled handlers for Vue 2 and Vue 3. The README says vue1 support is coming soon.
- app-frontend: the Vue app displayed in the browser devtools pane.
- shell-chrome: the Chrome/Firefox extension.
- shell-electron: an Electron standalone app.
- shell-host, shell-dev-vue2 and shell-dev-vue3: a development environment and demo apps for Vue 2 and Vue 3.
Read the documentation for build and install steps
The README links to the documentation site and to an install guide for the extension. Those pages are the place to look for how to build and load the extension, because the README excerpt here only shows the clone command.
If you plan to change the code, read the Contributing guide linked from the README before opening a pull request.
- Documentation: https://devtools.vuejs.org/
- Install the extension: https://devtools.vuejs.org/guide/installation.html
- Contributing guide: https://devtools.vuejs.org/guide/contributing.html
What people use it for
- Inspecting the components and state of a running Vue 2 app.
- Inspecting the components and state of a running Vue 3 app.
- Studying how a browser devtools extension is structured in TypeScript.
- Contributing fixes to the Vue handlers or the browser shell packages.
- Running the demo apps in the shell-dev packages to see the devtools in action.
Frequently asked questions
What is devtools-v6?
devtools-v6 is the vuejs/devtools-v6 repository, a browser devtools extension for debugging Vue.js applications. It adds a Vue panel to your browser's developer tools so you can inspect components, state and data in a running app.
Is devtools-v6 free and what is its licence?
Yes, the project is licensed under the MIT licence, as stated in the README. You can read the full licence text at the link provided in the repository.
What are the requirements for devtools-v6?
The source does not list any prerequisites. The README only gives a clone command, so check the documentation and Contributing guide for build requirements.
How do I install devtools-v6?
The README's install method is cloning the repository with git clone https://github.com/vuejs/devtools-v6. The README links to an install guide for loading the extension, which you should follow after cloning.
What is the alternative to devtools-v6?
The README names vuejs/devtools-next as the newer version, now in beta, and asks people to test it. It is the project the team is directing users toward.
Does devtools-v6 work with Vue 2 and Vue 3?
The monorepo includes separate handlers for Vue 2 and Vue 3, named app-backend-vue2 and app-backend-vue3. The README says Vue 1 support is coming soon.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
devtools-v6 is worth using if you work on Vue 2 or Vue 3 apps and specifically need this line of the extension, or if you want to contribute to its TypeScript codebase. If you just want the newest version for everyday debugging, the README points you to devtools-next, which is the beta the team is asking people to test. Non-developers and anyone not working with Vue.js will not get value from it.
Install options & downloads