mac-chrome下手动安装vue-devtools

本文在参考https://www.jianshu.com/p/18906cade6c4的基础上，做了更为细致的介绍。

1. 下载Github源文件（vue-devtools）

在GitHub中下载源文件，并解压到本地（比如桌面）。

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

2.对源文件进行编译

2.1切换到vue-devtools文件夹所在目录，如：

cd Desktop/vue-devtools

2.2安装所需的npm依赖包

npm install

2.3编译文件

npm run build

3.修改manifest.json文件

3.1 进入到vue-devtools-dev/shells/chrome文件夹下会看到manifest.json文件，修改persistent为true。

"persistent": true

4.放置编译配置好的vue-devtools-dev文件夹（建议）

推荐将文件夹放到浏览器插件文件夹中，Mac中chrome插件默认安装目录位置为：

~/Library/Application Support/Google/Chrome/Default/Extensions

可以通过地址栏输入chrome:version 回车，用资源管理器打开"个人资料路径"栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径。

放置好vue-devtools-dev文件夹如下：

/Users/@@@/Library/Application Support/Google/Chrome/Default/vue-devtools-dev

5.文件夹添加至chrome浏览器

输入地址“chrome://extensions/”进入扩展程序页面，将文件夹拖入浏览器即可。
安装成功后浏览器右上角会出现vue的图标，表示安装成功。