本文在参考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的图标,表示安装成功。