给Chrome安装vue-DevTool

最近在学习Vue.js，为了便于调试需要给Chrome浏览器安装vue-devtools开发工具

手动安装:

1. 到GitHub上找到vue-devtools的github项目，并将其clone到本地：

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

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

2. 进入vue-devtools项目文件安装依赖：

命令: 

cd vue-devtools

npm install 

或者 

cnpm install(安装了cnpm)

3. 编译项目文件

npm run build

4. 添加至chrome浏览器

在Chrome地址栏输入‘’chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的Chrome文件夹

图1

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。

注意：如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式；

或者：

设置 > 点击扩展程序 > 点击开发者模式>点击“加载已解压的扩展程序”，选择vue-devtools>shells下的Chrome文件夹

图2

下面界面是添加成功后的：

图3