在Chrome浏览器中配置vue-devtools调试工具

版权声明：未经博主允许，请勿转载原创，谢谢！ https://blog.csdn.net/mystonelxj/article/details/85246617

1，首先在浏览器上打开 地址 https://github.com/vuejs/vue-devtools.git ，在页面上点击 “Clone or Download” 按钮 ，下载相关的 “vue-devtools-dev” 压缩包

 2，Windows系统下，解压缩文件“vue-devtools-dev.zip” ,本例解压缩路径为“D:\vue-devtools-dev\vue-devtools-dev”，解压缩后文件夹内容如下

3，确保windows系统已安装了npm （如果没有安装，则在官网https://nodejs.org/en/ 下载后，按照默认方式安装即可），如本例安装了npm 6.4.1 版本。

4，在Windows Dos状态（Cmd 对话框）下，进入到压缩包解压后的路径（本例D:\vue-devtools-dev\vue-devtools-dev），输入以下命令

npm install

5，在 “npm install” 命令正常执行后，将会出现如下提示

6，在Windows Dos状态（Cmd 对话框）下，对应解压缩文件路径，输入如下命令：

npm run build

运行成功后，出现如下界面

7，此时，原有的解压缩文件夹的shell目录下 出现 chrome文件夹

8，打开chrome浏览器，点击相关菜单，打开扩展程序 页面

9,在Chrome的“扩展程序”页面，确保“开发者模式”处于打开状态，点击“加载已解压的扩展程序”按钮，在打开的文件夹选择窗口，选择“D:\vue-devtools-dev\vue-devtools-dev\shell\Chrome” 文件夹，点击 “确定”按钮

10，配置完成后将出现以下信息，同时在地址栏右侧有 vue-tools 图标出现。