Installation of Vue Debug program (Google Chrome vuejs devtools plugin)

1. first download the Vue debugger plugin on GitHub vue-devtools

Address: Download the tarball on GitHub and unzip it locally, Github:https://github.com/vuejs/vue-devtools

2. NPM Install

After the download is complete, open command line cmd to enter the Vue-devtools-master folder.

1. NPM install, installation of dependent packages;

2. NPM Run Build

3.when the NPM run build finishes executing,

In the shells>chrome under the SRC folder to produce as shown in the several JS files;

When the NPM run build finishes executing, it will produce several JS files as shown in the SRC folder under Shells>chrome;

If you do not execute the above command will error, unable to load background script "Build/background.js", such as:

3. Open the Shells>chrome>manifest.json and change the "persistent" in the JSON file: false to True

4. Extending the Chrome plugin

1. Open the Chrome browser and open more Tools > extensions;

2. Click to load the unpacked extension and put the Shells>chrome folder into

5, test installation successful

Execute npm Run dev in the plugin directory, this time our plug-in can be run, open localhost:8080 can see the plugin has been installed and run.

After we open our Vue project, press F12 to find out that the console has a more vue choice.

Installation success!!

Installation of Vue Debug program (Google Chrome vuejs devtools plugin)