MAC Google Chorme安装vue-devtools扩展程序

401 阅读2分钟

MAC Google Chorme安装vue-devtools扩展程序

本机是Macbook pro 2018款,当前系统是Catalina,Google浏览器下安装vue-devtools拓展程序的步骤如下:

根据Vue.js的官方文档:Vue Devtools

Step1:

先要转到github上下载master分支下的vue-devtools这个包
这个 (如果下载速度慢,小伙伴可以先用gitee Fork之后再下载,具体不在这里叙述了)

注意是matser分支


Step2:

修改 vue-devtools-master/shells/chrome/manifest.json 这个文件
第31行 将默认的flase改为true
(懒狗可以vim直接修改的 ) 在这里插入图片描述

在这里插入图片描述


step3:

将vue-devtools-master这个文件 放到到Chorme的插件文件夹default中

/Users/lin/library/Application Support/Google/Chrome/Default

懒狗可以通过 mvdir 移动一下,或者在访达里面手动将那个修改完的vue-tools-master移到Default中
在这里插入图片描述 (Mac在finder中不太能找到这个文件夹,我也是根据网上大佬的这个路径,通过terminal一层一层cd打开的,不过一般都默认在这个文件夹中。 )


step4:

打开你的终端 输入cd 把这个vue-devtools-master文件拖进去
或者直接输入

cd ~/library/Application\ Support/Google/Chrome/Default/vue-devtools-master/

运行第一行(sudo的话会提示你输密码的 尽量用cnpm )

sudo cnpm i  

在这里插入图片描述

运行第二行()

npm run build

在这里插入图片描述


step5:

chorme浏览器输入

chrome://extensions/

把右上角的开发者模式打开
直接把Default目录下vue-devtools-master的shell目录下的chorme拖进来

在这里插入图片描述 注意 不要拖整个文件,不然会报清单文件缺失的。因为manifest这个文件在chorme这个子文件夹中,如果拖vue-devtools-master这个文件夹,是找不到这个json文件的;

最后就能和win一样显示了

在这里插入图片描述

最后

和win一样,右上角那个拼图点一下可以开起来
运行了最基本的helloworld.vue,F12调试 在这里插入图片描述