Mac系统 Chrome 浏览器安装 vue-devtools

编写时间: 2018.7.4

Mac版本 10.13.3
Chrome 版本 67.0.3396.99
Node.js 版本 v10.4.1 (之前是 v6.11.2)
npm 版本 v3.10.10

根据网络文章 和 自己的操作整理.
具体查阅了哪些文章已无法一一说明, 在这里表示歉意和感谢.

---

手动安装方式

直接安装 Chrome 的 vue-devtools 插件无法启用. 所以才使用手动安装的方式.

---

第一步: 找到vue-devtools的github项目，并将其下载到本地

vue-devtools的github项目地址

---

第二步: 将下载的项目文件放入 Chrome浏览器的插件文件夹中.

• 查看默认的 Chrome浏览器的插件文件夹
  1. 地址栏输入chrome:version 回车
  2. 用资源管理器打开个人资料路径栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径

---

第三步: 进入目录, 安装所需npm依赖包，编译文件

如果npm下载太慢, 就换成cnpm 淘宝的镜像, cnpm install

---

第四步: 打开Chrome 扩展程序页面, 开启 开发者模式

地址栏中输入 chrome://extensions/, 打开扩展程序页面.

页面右上角 开启开发者模式

---

第五步: 加载已解压的扩展程序

方法1: 将 vue-devtools-master/shells/chrome文件夹 拖入 Chrome 扩展程序页面 即可

方法2: 点击 页面上方的 加载已解压的扩展程序, 选择vue-devtools-master/shells/chrome文件夹 即可

第六步: 测试安装是否成功

使用 Chrome 浏览器打开一个引用了 Vue.js 的 页面, 再开启控制台, 就能看到 vue-devtools已经启用了.

注意: 没有引用 vue 的页面是不会启用的.