vue devtoolsIs a chrome based browser for debugging Vue.js Application plug-ins, can make developers greatly improve debugging efficiency. Support users to parse and debug DOM structure data structure. Need friends can download to try!
Since Vue is data-driven, it is impossible to analyze the DOM structure in the development and debugging. Through the plug-in, users can easily parse and debug the data structure, check the code in the page in the sidebar pane and debug it. It is convenient to view the information such as state, mutaitons, action, etc., and record the route changes And routing related information and so on, can be described as a necessary tool for front-end development!
1. Download itvue.js Devtools CRXPieces;
2. Open the extender page from Settings > more Tools > extender, or type in the address bar Chrome://extensions/ Press enter to open the extension page;
3. Open developer mode on the extender page;
4. Drag the CRX file to the extension program page to complete the installation;
If “crx-header-invalid” is invalid, please refer to the collectible cat plug-in for the solution
5. After running the local Vue project, open your project in the browser and open developer mode. You will see the Vue option under the address bar.
How to use Vue devtools
1. Before using the Vue project, you must set the Vue project by opening shells > chrome > Src manifest.json Change “persistent”: false to true in JSON file;
2. Press F12 to view the Vue menu;
3. Click the Vue menu to see the nesting of components on the left. On the right, you can select to view components, vuex data warehouse, event dispatch, Vue router, tool settings, etc;
Click a component to see the corresponding real DOM, props, data, etc. of the component;
The above is about Chrome browser plug-in vue.js Devtools installation method and use of the tutorial, I hope to help you, for reference only! Other information about the software developer is welcome!