ubuntu21.04(linux):为chrome安装vue-devtools(6.0.0 beta 14)调试插件
2023-09-14 08:59:32 时间
一,安装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
如图:
![](https://img2020.cnblogs.com/blog/1938691/202106/1938691-20210621151933762-771825317.png)
点击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,菜单->更多工具->扩展程序
然后打开右上角的开发者模式:如图:
![](https://img2020.cnblogs.com/blog/1938691/202106/1938691-20210621151933645-407267595.png)
点击:加载已解压的扩展程序:
选中vue-devtools/packages/shell-chrome/目录
然后如图:
![](https://img2020.cnblogs.com/blog/1938691/202106/1938691-20210621151933763-2129725879.png)
四,测试效果:
在浏览器中打开我们创建的vue.js站点,
可以看到插件vuedevtools的icon已被点亮,
如图:
![](https://img2020.cnblogs.com/blog/1938691/202106/1938691-20210621151933671-1461078141.png)
打开开发者工具:
打开vue的面板,可以看到app下的component
如图:
![](https://img2020.cnblogs.com/blog/1938691/202106/1938691-20210621151933786-1466397249.png)
五,查看chrome的版本:
![](https://img2020.cnblogs.com/blog/1938691/202106/1938691-20210621151933672-1398493843.png)
相关文章
- 漂亮的Linux,只为一见倾心
- Vue_(Router路由)-vue-router路由的基本用法
- Linux XOR.DDoS样本取证特征与清除
- Linux - mysql 异常:登录不上mysql数据库
- 修改linux的时间可以使用date指令
- linux:ubuntu21.04:npm安装@vue/cli时报错(@vue/cli 4.5.13/npm 7.21.0/node 14.17.1)
- 【Linux基础】linux下修改ls显示的时间格式
- Linux基础之查看linux发行版以及内核版本
- Linux - 修改内核启动顺序及删除无用内核
- [Vue @Component] Simplify Vue Components with vue-class-component
- ubuntu21.04(linux):为chrome安装vue-devtools(6.0.0 beta 14)调试插件
- standalone vue initialization process - Vue应用的初始化过程
- Linux 主要的发行系统版本介绍
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- 【Linux 内核】编译 Linux 内核 ④ ( 打开 Linux 内核编译 菜单配置 |菜单配置中的光标移动与选中状态 | 保存配置 | 配置项帮助文档 )
- 【Android 逆向】Linux 文件权限 ( Linux 权限简介 | 系统权限 | 用户权限 | 匿名用户权限 | 读 | 写 | 执行 | 更改组 | 更改用户 | 粘滞 )
- Linux命令: 在线使用linux命令环境
- L59.linux命令每日一练 -- 第九章 Linux进程管理命令 -- killall和pkill
- L48.linux命令每日一练 -- 第七章 Linux用户管理及用户信息查询命令 -- last、lastb和lastlog
- L35.linux命令每日一练 -- 第五章 Linux信息显示与搜索文件命令 -- which和whereis
- L2.linux命令每日一练 -- 第一章 Linux命令行简介
- L1.linux命令每日一练 -- 第一章 Linux命令行简介
- 查看linux系统配置 查询Linux配置
- 【Linux】linux经常使用基本命令
- 【汇总】Windows linux 敏感目录 路径汇总——主要是主机配置文件、web配置文件
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Linux环境变量配置说明
- Linux好用命令之lsof命令
- 操作系统权限维持(十二)之Linux系统-sudoers利用后门