ubuntu21.04(linux):为chrome安装vue-devtools(6.0.0 beta 14)调试插件

一，安装yarn

1,安装yarn

root@lhdpc:~# npm install -g yarn
 
> yarn@1.22.10 preinstall /usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)
 
/usr/local/soft/node-v14.17.1-linux-x64/bin/yarn -> /usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/yarn/bin/yarn.js
/usr/local/soft/node-v14.17.1-linux-x64/bin/yarnpkg -> /usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.10
added 1 package in 4.019s

2，创建符号链接:

root@lhdpc:~# ln -s /usr/local/soft/node-v14.17.1-linux-x64/bin/yarn /usr/local/bin/yarn

3,查看版本:

root@lhdpc:~# yarn --version
1.22.10

说明：安装新版本的vue-devtools时需要用到yarn

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/

说明：作者:刘宏缔 邮箱: 371125307@qq.com

 

二，下载vue-devtools代码:

代码地址:

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

如图:

点击code按钮，选择 Download Zip

 

三，安装vue-devtools:

解压:

liuhongdi@lhdpc:~/soft/vuedevtools$ unzip vue-devtools-next.zip

进行yarn设置

liuhongdi@lhdpc:~/soft/vuedevtools/vue-devtools-next$ vi /home/liuhongdi/.yarnrc

内容:

egistry "https://registry.npm.taobao.org"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
lastUpdateCheck 1624256645697

把lastUpdateCheck一行删除

说明：不删除可能会导致yarn在安装依赖包时停住不动

 

安装依赖

liuhongdi@lhdpc:~/soft/vuedevtools$ cd vue-devtools-next/
liuhongdi@lhdpc:~/soft/vuedevtools/vue-devtools-next$ yarn install 

运行build

liuhongdi@lhdpc:~/soft/vuedevtools/vue-devtools-next$ yarn run build

 

安装到浏览器:

打开chrome,菜单->更多工具->扩展程序

然后打开右上角的开发者模式：如图:

 

点击:加载已解压的扩展程序:

选中vue-devtools/packages/shell-chrome/目录

然后如图:

 

四，测试效果:

在浏览器中打开我们创建的vue.js站点，

可以看到插件vuedevtools的icon已被点亮，

如图:

打开开发者工具:

打开vue的面板，可以看到app下的component

如图:

五，查看chrome的版本: