Home > Article > Web Front-end > How to use DevTools debugging tools in Vue
This article mainly introduces the use of Vue DevTools debugging tools. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look.
Due to work requirements, I am currently mainly using the Vue.js technology stack for development. Debugging is essential. The Vue DevTools debugging tool will be used here. The problem arises. Here, when using Vue DevTools for debugging, it often cannot be used, prompting that Vue is not detected, which instantly reduces work efficiency.
Installation:
1. Download from github:
git clone https://github.com/vuejs/vue-devtools
2. In the vue-devtools directory Install dependency packages
cd vue-devtools cnpm install
Correct Vue DevTools
Okay, let’s get to the point. Let’s talk about the correction method.
First download Vue DevTools from the official website (https: //github.com/vuejs/vue-devtools).
Key step 1. Modifypersistent
Find the filevue-devtools/shells/chrome/manifest.json
, change persistent
to true
.
After saving, compile it:
Key step 2. Check Allow access to file URL
The Vue DevTools has been written in the previous step, and the next step is to install this extension.
Open Chrome and enter chrome://extensions/
in the address bar to directly enter Chrome extensions.
Check the Developer Mode
at the top, and then click "Load the decompressed extension...", the path is: vue-devtools-master/shells/chrome
Check Allow access to the file URL
Key step 3. Add Vue to the Vue file .config.devtools
Vue.config.devtools = true; //这步很重要 new Vue({ el: '#app', data: { a: 123, } });
Done!
Effect
Download the revised version of Vue DevToolsDownload: vueDevTools (monitorable revised version).zip
The above is what I compiled For everyone, I hope it will be helpful to everyone in the future.
Related articles:
How to implement axios secondary encapsulation in vue
How to use audio components in WeChat mini programs
How to use the video component to play videos in the WeChat mini program
How to implement the download progress bar in the WeChat mini program
How to use the mobile phone number verification tool class PhoneUtils in javaScript
The above is the detailed content of How to use DevTools debugging tools in Vue. For more information, please follow other related articles on the PHP Chinese website!