mac-chrome下手动安装vue-devtools

 

原文链接：https://blog.csdn.net/weixin_44868003/article/details/89457089

废话就不多说，直接上安装步骤，一步一步来 => success

1.下载安装vue-devtools源文件

mkdir vuetools
cd vuetools


git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
npm install --registry=https://registry.npm.taobao.org
npm run build

 

 

2.修改manifest.json文件

cd vue-devtools
cd shells
cd chrome
vi manifest.json
// 修改persistent为true

 

3.将vue-devtools文件夹复制到Chrome插件文件夹中

// 大致在这个路径下：
~/Library/Application Support/Google/Chrome/Default
 
// vue-devtools文件夹复制到Default下
 
// mac上找路径犯难了，可以随便打开一个文件  顶部 前往>前往文件夹>路径

 

4.将vue-devtools文件夹添加到浏览器扩展

// 在Chrome地址栏输入  chrome://extensions/
// 进入扩展程序页面，将文件夹拖入浏览器即可。
// 至此安装完成。安装成功后浏览器右上角会出现vue的图标，表示安装成功。
 
// 现在可以体验一下vue这个调试工具了。

 

 

后话：

对于安装Vue Devtools插件成功后使用提示Vue.js not detected，有可能是你引入了压缩版的vue.min.js，必须要引入vue.js才行喔。

其实早就了解过这个工具，之前在windows上安装过，没成功。所以一直也没有体验过。也是刚刚安装完成，方法当然也是参考了很多大神的思路，以上方法亲测可行，就说这么多吧，有问题一起交流。

mac-chrome下手动安装vue-devtools