谷歌浏览器安装 vue 调试工具 vue devtools

谷歌浏览器安装 vue 调试插件 vue devtools，对于调试 vue 项目非常方便，本文介绍如何安装

 

1、在 github 下载 vue devtools 

这里可以使用 git 克隆

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

或者直接到网站下载

vue devtools 插件地址：https://github.com/vuejs/vue-devtools

下载完成后，将其解压到自定义文件夹下

 

2、修改 manifest.json 文件配置

进入项目的 \vue-devtools-dev\shells\chrome 目录，找到 manifest.json 文件，将 persistent 修改为 true

修改完成

 

3、编译代码

修改完成 manifest.json 文件配置后，进入项目根目录按 shift 键同时鼠标右键，或用 cmd 窗口命令进入项目根目录

执行命令 npm install 或 cnpm install（如果使用淘宝 NPM 镜像）安装依赖

npm install

或

cnpm install

 

依赖安装完成后，执行命令 npm build 或 cnpm  build（如果使用淘宝 NPM 镜像）编译代码

npm build

或

cnpm build

 

编译完成

 

4、扩展 Chrome 浏览器插件

打开谷歌浏览器，选择 更多工具 > 拓展程序 

点击 加载已解压的扩展程序

找到项目中的 \vue-devtools-dev\shells\chrome 目录，进行添加

添加完成，会多出 vue.js devtools 

 

5、测试

打开 vue 编写的 web 页面

进行调试

 

安装完成