A brief background on Vue.js devtools
Our chrome plug-in network has introduced Vue.js devtools before. It is a developer browser extension for debugging vue.js applications based on the google chrome browser. You can debug code under the browser developer tools. IT engineers who do front-end development should be more familiar with this tool, and can check the code while viewing the page in the sidebar pane. Since vue is data-driven, there is nothing that can be parsed out by viewing the DOM structure during development and debugging. But with the vue-devtools plug-in, we can easily parse and debug the data structure. This article focuses on how to use Vue.js devtools, and provides two methods of direct installation of chrome plug-ins and source code installation. You can also find solutions to the common problem "vue.js not detected" after installation.
How to use Vue.js devtools
1. How to use the chrome plugin
1. You can find the Vue.js devtools plugin from the chrome application store. If your chrome application store cannot be opened, you can find the Vue.js devtools download address at the bottom of this site.
2. For offline installation of chrome plug-ins, please refer to: How to install .crx extensions in Google Chrome . If you are using the latest version of the Chrome browser, you can refer to the solution that the CRX format plug-in cannot be installed offline after the chrome 67 version .
3. After downloading the crx file of Vue.js devtools, open the Chrome extension page (chrome://extensions/ or press the Chrome menu icon > more tools > extensions to find), then drag and drop the crx file to the extension page to 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 plugin. (If you really can’t find the installation location of the plug-in, you can search the plug-in ID on the 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 the 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 plugin, open the manifest.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 position. After opening the vue project, select vue in the console, and it should work normally.
Third, if you still can’t use it after adjusting the above method, you can adjust the code of webpack.config.js, as shown in the figure below:
Finally, restart your vue project and it should be ready to use.
2. Source code installation method
1. Download the devtools source code on github, address: https://github.com/vuejs/vue-devtools.
2. After downloading, enter the vue-devtools-master project to execute cnpm install, download dependencies, and then execute npm run build to compile the source program.
3. After the compilation is completed, the directory structure is as follows: 
Modify the persistant in manifest.json in the shells-chrome directory to true: 
4. Open the settings of Google Chrome ---> Extensions, and check the developer mode
Then directly drag and drop the entire folder of chrome under the shells directory in the project just compiled to the current browser, and select Enable to install the plug-in to the browser. 
5. Open an existing vue project, run the project, and then enter the debugging mode in the browser ---> settings ---> more tools ---> developer tools: 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 plugin is installed, the problem of "vue.js not detected" appears. First, select the developer mode in the extension program, open the installation directory of the plugin, and set the persistent in manifest.json to true. If not Just adjust the code of webpack.config.js, and finally restart the vue project to use it.