Vue DevTools is a browser extension tool specifically developed for Vue.js, used for debugging and optimizing Vue applications. The following is an installation and usage guide:
1. Install Vue DevTools
1. Browser support
Chrome (Recommended): Install via the Chrome Web Store.
Firefox : Install via the Firefox Add-ons Marketplace.
Edge : Compatible with Chrome, the Chrome version can be installed directly.
2. Installation steps (using Chrome as an example)
(1) Access the Chrome Web Store
Open the link: Vue DevTools – Chrome Web Store
(2) Add to Chrome
Click “Add to Chrome” → Confirm installation.
(3) Verify installation
Open Chrome Developer Tools in your Vue file or project ( F12 or right-click and select “Inspect”);
Switch to the “Vue” tab (if you don’t see it, refresh the page or check if it’s a Vue application).
2. Use Vue DevTools
1. Basic Functions
(1) Components
View the application’s component hierarchy to quickly locate the DOM; you can also open the source code of the selected component in VS Code with one click, without having to use Ctrl+F to find the component you want to debug.
As shown in the image, locate the component you want to view—click the share icon in the upper right corner—this will take you to the VS Code source code for that component.
Clicking on a component allows you to view its data (data), attributes (props), calculated attributes (computed), etc.
Manually modify data and preview the effect in real time (development environment only).
(2) Vuex State Management (Vuex)
Note: If you are using Vuex for state management, the Vuex Inspector in Vue DevTools is a powerful debugging tool.
Allows viewing of Vuex’s state, mutations, actions.
Allow submission mutation or distribution action of debug status changes.
（3）Router
The Router panel in Vue DevTools is a feature module integrated with vue-router that allows developers to view a list of routes, detailed information, navigation history, and supports manual navigation testing.
Display all route configurations : In the Router panel, the drop-down menu will list all route paths defined in the project (such as /index, /home etc.), including the corresponding component names (such as indexPage, homePage).
View routing parameters : For dynamic routes (e.g. /user/:id), you can view the currently matched parameter values in real time id: 123.
Record route navigation path : The panel records all route changes triggered by the user or code, including which path to jump from and which path to, making it easy to reproduce the navigation process.
Timestamp-assisted debugging : Each record is accompanied by a timestamp to help analyze the timing of route changes.
Direct route jump by entering the path : Enter the target path (e.g.) at the bottom of the panel /home to manually trigger the route jump and test whether the route configuration is correct.
Verify access control : Combine route guards (e.g. beforeEach) to test navigation behavior under different permissions.
(4) Events
Monitor events triggered by the component (e.g. @click).
View event parameters and trigger chains.
2. Advanced Features
(1) Time travel debugging
In the Vuex panel, you can revert to a previous state snapshot (time travel must be enabled).
(2) Custom component inspection
devtools Register custom components via the option to expose internal data for debugging:
export default {
devtools: {
exposed: ['customData'] // Expose custom data
},
data() {
return { customData: 'Hello' }
}
}- Environment detection
in Vue DevTools onlyprocess.env.NODE_ENV === 'development'works in the development environment ( ), and is automatically hidden in the production environment.