Google browser Chrome's Vuejs devtools plugin installation __js

Source: Internet
Author: User
Tags pack

Once used Angularjs, Reactjs developed projects, and now want to learn to learn Vuejs to develop. It's called 工欲善其事 its prerequisite. Now we're going to laian the chrome Vuejs devtools plugin.

Installation Method 1: You need to open the Chrome store normally, search Vuejs devtools installation. chrome://extensions/Developer Tools-Extender enabled;

Method 2:github Download Plug-ins, NPM package installation dependencies, drag into the browser extender (recommended)

Specific actions:
1. Download the chrome extensions.

Download and extract the compressed package to the local GitHub, GitHub the address: HTTPS://GITHUB.COM/VUEJS/VUE-DEVTOOLS2. NPM Install
When the download is complete, open the command line cmd into the Vue-devtools folder,
1. NPM Install, install the dependency pack; If the installation is too slow, follow the instructions at the end of the article.

2. NPM Run Build


After the NPM run build executes, it will produce a few JS files in the SRC folder under Shells>chrome as shown above;


The background script "Build/background.js" cannot be loaded if the above command is not executed.

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


4. Extended Chrome Plugin
1. Open Chrome Browser, open more Tools > extender;

2. Click to load the unpacked extender, and then put the Shells>chrome folder into





5, the test installation was successful

In the plugin directory to perform npm run Dev, this time our plug-ins can be run, open localhost:8080 can see the plug-in has been installed and run.



Method 3: Download the Chrome plugin installation package (. crx file) offline installation (lower version not recommended)
Download Address: http://www.cnplugins.com/devtool/vuejs-devtools/download.html
Installation method: Http://www.cnplugins.com/tools/how-to-setup-crx.html

Open a new tab in Chrome, enter: chrome://extensions/carriage return, open Application Manager, you can see the other applications installed before. The. crx file will be downloaded and dragged in to install.



Also attached:
1. Recommended use of NPM Taobao mirrored installation of the dependency package address: http://npm.taobao.org/
The command line installs NPM Taobao Mirror:
$ NPM install-g cnpm--registry=https://registry.npm.taobao.org
Then we can use CNPM instead of NPM to install the dependency pack.
2. Chrome plug-in network address http://www.cnplugins.com/, there is a need for other plug-ins can be similar to the above operation.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.