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
< p>
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.
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
How to install vue.js devtools?
24 Nov 2020
Installation method: 1. Download the zip installation package and extract it to the specified folder; 2. Enter the Vue devtools directory and enter "yarn install" and "yarn run build" to install; 3. Configure the manifest json file; 4. Manually Extension chrome plug-in.
How to install plug-in
14 Jun 2019
Plug-in installation method: For example, if you install a Chrome plug-in, first open the Chrome browser and enter the plug-in management interface. Then drag the downloaded plug-in file to the Chrome plug-in management interface and release the mouse. Then Chrome will pop up a prompt to install the plug-in, click Add.
What is the Chrome plug-in extension installation directory?
08 Mar 2024
What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User
How to install Google Chrome plug-in in win10
02 Jul 2023
How to install the Google Chrome plug-in in win10? When using your computer, have you ever had a situation where the browser function is not enough? This problem is perfectly solved by the plug-in extension function of Google Chrome. You need to install the Google Chrome plug-in in this position. With each plug-in, you can enjoy a lot of extra special functions. For users who don’t know how to install it, let’s take a look at the tutorial on how to install the Google Chrome plug-in in win10. Tutorial on installing Google Chrome plug-ins in win10 1. First prepare the "plug-ins" that need to be installed, then open Google Chrome and enter: chrome://extensions/ in the address bar and press Enter to open the settings interface; 2. Click on the left "Extensions", and then directly drag the plug-in in the "crx" format
What is the Chrome plug-in extension installation directory and which folder it is in?
07 Mar 2024
Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\UserData\Default\Extensio
Download and install the Google Chrome mobile plug-in
29 Jan 2024
How to download and install plug-ins for Google Chrome mobile version? The plug-in expansion function of Google Chrome is very powerful, and many unique plug-in functions can be installed. However, in the mobile version of Google Chrome, the download and installation method of plug-ins has changed to some extent, which has led to some friends not using the mobile version of Google Chrome to download and install plug-ins. So, how do we specifically install plug-ins? Woolen cloth? Below, the editor will bring you a tutorial on downloading and installing the Google Chrome mobile version plug-in. Google Chrome mobile version plug-in download and installation tutorial 1. First, we open the phone and click to open settings, 2. Then, we click to open Google, 3. Next, we click to open Google Chrome, 4. Finally, we click to install Plug-in, install it
Hot Tools
Talend API Tester
The Talend API Tester plug-in, formerly known as Restlet Client, is designed and developed by developers as a tool that can help programmers debug web pages. Talend API Tester makes it easy to call, discover and test HTTP and REST APIs. Enables visual interaction with REST, SOAP and HTTP APIs.
Karson / tinytools
Tiny tools is a Chrome extension that contains many useful tools, such as QR code generator, QR code decoding, translation, timestamp conversion, source format, JSON format, image base64 character encoding, etc.
Angular debugging pluginAngularJS Batarang
The angularjs batarang plug-in is a powerful Angular debugging plug-in that can be installed on Google Chrome. Installing and using this angularjs batarang plug-in can make your development process more convenient.
Detailed SEO Extension
SEO is a search engine optimization technology. Website operators need to publish some high-quality content to meet the needs of users, so as to win the favor of search engines and bring search traffic from search engines. Measuring the search engine's love for a website is usually composed of this SEO indicator. Regarding SEO, we have introduced many plug-ins such as SEO toolbar: SEOquake, META SEO inspector, 5118 Webmaster Toolbox - Essential SEO plug-in, etc. Wait, today the editor has brought you a tool that can quickly analyze the title of a certain web page.