chrome浏览器vue.js调试插件(vue-devtools)的安装

chrome浏览器vue.js调试插件(vue-devtools)的安装,及问题解决。

今天主要讲vue.js基于chrome浏览器的调试工具（vue-devtools）的安装方式。

注意：请确保您使用的是Node 6+和NPM 3+

第一步：拉取源码：我们需要到github上去拉取vue-devtools插件的源代码。
github地址：https://github.com/vuejs/vue-devtools
git拉取命令（命令提示符中）：

git clone https://github.com/vuejs/vue-devtools.git

如果github无法拉取可以使用阿里的gitee

Gitee地址：https://gitee.com/mirrors/vue-devtools?_from=gitee_search
git拉取命令（命令提示符中）：

git clone https://gitee.com/mirrors/vue-devtools.git

拉取完成后你会得到一个 vue-devtools 文件夹

第二步（ 重要 ）：修改分支

方法一:

进入vue-devtools文件夹中执行以下命令
— 将你的git分支设置为master分支，不然等下编译时可能会出现Error: Cannot find module '@vue-devtools/build-tools’错误。
— 该错误可能是由于github上分支默认是dev而不是master导致。

git checkout master

方法二:

在git库中直接下载master分支的zip包

第三步：安装依赖
执行依赖安装命令。

npm i
或
npm install

第四步：执行编译
执行编译命令

npm run build

可能出现的问题：

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

如果出现该问题请尝试全局安装webpack-cli ，然后重试。

npm install -g webpack-cli

第五步：修改文件
修改manifest.json文件，将文件中的 “persistent”: false改为 true
—文件地址：vue-devtools/shells/chrome/manifest.json

  "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },

第六步：安装插件
1、打开chrome浏览器输入地址chrome://extensions/进入扩展程序页面
2、勾选 “开发者模式”
3、选择 “加载已解压的扩展程序”
4、选择vue-devtools/shells/chrome文件夹

到这里就已经安装完成了。

打开chrome开发者工具，可以看到在菜单栏上有vue的菜单。