Vue.js devtool plugin Download installation and follow-up problem solving

In China, you are not able to use the Google App Store, so you download plugins, to use some other means, one is to download the source code compiled, the other is through the third party website. The first type is not suitable for small white, so now introduce the second group.

Download Plugin website

Foreign website: https://www.crx4chrome.com/

Domestic website: http://www.cnplugins.com/

It is recommended to use the first URL, the plugin to sync with the store update, after opening the site, search for "Vue.js devtool". After downloading the file as follows.

Installation method

1. Open in Browser, more tools-Extension Program

2. Drag the file you just downloaded into the open page.

3. After installation, the following page. Also tick "developer mode". The plugin id:nhdogjmejiglipccpnnnanhbledajbpd appears. Note that the "Allow access to file URLs" option is recommended, which allows the plugin to debug local files. such as: file:///D:/Vue2.x/BookExample/01.hello.html.

4, the use of ID search, generally in the C drive. Select and open the corresponding folder.

5. (optional) After opening the folder, modify the two files. Open file Manifest.json, "persistent": false to "persistent": true; Open File Webpack.config.js, node_env: ' Production ' to Node_ ENV: ' "Development".

Manifest.json

Webpack.config.js

6, click on the "F12", in the debugging work appeared vue tools, such as. Now it's time to debug.

Solutions that cannot be performed after installation

Issue 1: Hint Vue.js not detected

Workaround:

(1) Your page is not imported into the Vue.js file, or is not a Vue app.

Issue 2: Tip: Vue.js is detected on the this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Workaround:

(1) Check whether you use the compressed js,vue.min.js, using the compressed JS file, you will lose the error prompts and warnings. may also cause the above problems.

(2) Try the configuration in step 5th of the installation method.

The Great lord of Nanchang
Links: https://www.jianshu.com/p/01a61c8c722f
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Vue.js devtool plugin Download installation and follow-up problem solving