Vue.js devtools V5.1.1

After downloading the crx file of Vue.js devtools, open Chrome's extensions page (chrome://extensions/ or press the Chrome menu icon > More Tools > Extensions Finder), then drag and drop the crx file to the extension page Install it;
4. Click "Add extension" to complete the installation.

5. The Vue.js devtool plug-in cannot be used after installation, and the prompt "vue.js not detected" appears. At this time we can use The following method:

First, we need to find the installation directory of the Vue.js devtool plug-in. (If you really can’t find the installation location of the plug-in, you can search for the plug-in ID on your local computer: nhdogjmejiglipccpnnnanhbledajbpd.) The installation location of the chrome plug-in is different in different operating systems. For example, the installation location of the chrome plug-in in win8 system: C:\Users\Administrator\ AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
Second, after finding the installation directory of the Vue.js devtool plug-in, open the mainifest.json file (this is the key).

Change the code persistent: false in mainfest.json to persistent: true. As shown below:

Under normal circumstances, modify the code at the above location. After opening the vue project, select vue in the console and it should be able to be used normally.

Third, if it still cannot be used after adjusting through the above method, then you can adjust the code of webpack.config.js, as shown in the figure below: < /p>

Finally, restart your vue project and it should be ready to use.

2. Source code installation method

1. Download the devtools source code from github, address: https:// github.com/vuejs/vue-devtools.

2. After downloading, enter the vue-devtools-master project and execute cnpm install, download the dependencies, and then execute npm run build to compile the source program.

3. After compilation is completed, the directory structure is as follows:

Modify the persistant in mainifest.json in the shells-chrome directory Is true:

 4. Open Google Chrome's Settings --->Extensions and check Developer Mode

Then directly drag and drop the entire chrome folder in the shells directory of the just compiled project to the current browser, and select enable. The plug-in is installed into the browser.

5. Open an existing vue project, run the project, and then in the browser--->Settings--->More Tools--->Developer Tools, Enter debugging mode:
It is found that vue.js is not detected , you can adjust the code of webpack.config.js:
 

Finally, restart your vue project and it should be ready to use .
 

Summary: After the Vue.js devtool plug-in is installed, the problem "vue.js not detected" appears. First, select the developer mode in the extension, open the installation directory of the plug-in, and change the mainifest The persistant in .json is true. If it still doesn't work, adjust the code of webpack.config.js, and finally restart the vue project to use it.