This article mainly introduces the installation and use of Vue's debugging tool vue-devtools
Install:
1. Go to github to download: (! When downloading, you must remember that it is the code of the master main branch. By default, it will enter the dev branch after cloning. Executing npm run build will report an error. Execute git checkout master to switch to the master main branch)
git clone https://github.com/vuejs/vue-devtools
2. Install dependency packages in the vue-devtools directory
| 1 2 |
|
3. Execute npm run build after the dependent package is downloaded, and a chrome folder will be generated under shells after successful compilation and packaging. This folder is used to put chrome extensions.
npm run build
4. Extension Chrome plugin
Open Chrome browser > select more tools > extensions > turn on developer mode
Click to load the decompressed extension, find the chrome folder just generated, select vue-devtools > shells > chrome to put it in, the installation is successful as shown in the figure below
6. Using vue-devtools
For the vue project, open f12 and select vue to use it.
Vue is data-driven, so you can see the corresponding data, which is convenient for us to debug
Warm reminder:
1. Vue must be imported into the development version, and the min compressed version cannot be debugged using devtools
2. After installation, you need to close the browser and reopen it to use