mac-chrome下手动安装vue-devtools

Z时代
2024-01-10
分类：综合

vue

原文链接：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上安装过，没成功。所以一直也没有体验过。也是刚刚安装完成，方法当然也是参考了很多大神的思路，以上方法亲测可行，就说这么多吧，有问题一起交流。