尤雨溪开发的 vue-devtools 如何安装,为何打开文件的功能鲜有人知?
1. 前言
大家好,我是若川。最近组织了一次源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信
ruochuan12
,拉你进群学习。
第一周读的是:据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件?本文原理揭秘。虽然我写过文章,但我还是相信有部分小伙伴还是不知道这个功能。
文中项目用的是vue3
,所以需要安装 vue3
版本对应的vue-devtools
。
但有挺多小伙伴,无法打开谷歌应用市场。有人说不是谷歌应用市场可以下载嘛。但往往是这一步拦住了很多用户,也有了很多商机。比如各种插件网站应运而生。于是我写篇文章,我是如何打包安装 devtools
插件的。
友情提醒:文章相对比较简单。估计有人会说,这也要写篇文章嘛。事实上,真的有挺多人不知道怎么打包。写文章也是提醒大家多看官方文档和
github README
。
插件我已经打包好,放到百度网盘中,在我的公众号:若川视野,回复关键词【插件】即可获取到两个版本的
devtools
进行安装,两个版本可以共存。
2. 打包插件和安装方法
打开 github vue-devtools[1] 发现名字也更新了,之前是叫vue-devtools
,现在是devtools
了,竟然还出了devtools 官网[2]。
2.1 打包 vue3 版本对应的 vue-devtools
查看官方README
:vue-devtools contributing[3]
git clone https://github.com/vuejs/devtools.git
cd devtools
# 如果没安装 yarn,可以 npm i yarn -g
# 安装依赖
yarn install
# 构建
yarn build
不出意外,构建成功后,可以得到有 devtools/packages/shell-chrome/
目录。
2.2 打包 vue2 版本对应的 vue-devtools
查看官方README
:vue2 devtools REAMDE.md[4]
# 可以复制上文克隆的项目
# 终端下复制 或者手动复制
cp -rf devtools devtools-v2
cd devtools-v2
# 复制成功后,切换分支 tag 到 v5.3.4 ,这是 vue2 对应的 devtools。
git checkout v5.3.4
# 删除 node_modules
rm -rf node_modules
# 安装依赖
yarn install
# 构建
yarn build
同样,不出意外,构建成功后,可以得到有 devtools-v2/packages/shell-chrome/
目录。
2.3 安装
如上图所示,谷歌浏览器打开 chrome://extensions/
,右上角点击开启开发者模式
,点击加载已解压的扩展程序
,选择打包生成的 devtools-v2/packages/shell-chrome/
文件夹即可安装,或者直接拖入也可以安装,vue2
和 vue3
的插件可以共存。
安装好后,可以开心的调试啦,顺便可以查看下插件的详细信息。目前 vue3
对应版本的是6.0.0-beta-15
。vue2
对应的版本是 5.3.4
。其中详细信息中,允许访问文件网址
,默认是开启的,建议开启。
3. 总结
文章相对简短,如果你身边有新人同事,还在为安装 devtools
插件发愁,可以分享这篇给 TA。
启发:我们要养成多查阅官方文档或者github README
的习惯。好的开源项目,README
一般都写得非常好。另外除了什么新功能,一般在官方文档或者 README
会有体现。虽然一般 README
是英文的会阻拦一部分人,但如果真的看不懂还可以通过谷歌翻译等翻译工具。
再次友情提醒:插件我已经打包好,放到百度网盘中,在我的公众号:若川视野,回复关键词【插件】即可获取到两个版本的
devtools
进行安装,两个版本可以共存。
参考资料
[1]
github vue-devtools: https://github.com/vuejs/devtools
[2]
devtools 官网: https://devtools.vuejs.org/
[3]
vue-devtools contributing: https://devtools.vuejs.org/guide/contributing.html#testing-as-chrome-addon
[4]
vue2 devtools REAMDE.md: https://github.com/vuejs/devtools/tree/v5.3.4
最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。
推荐阅读
我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历
面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的
老姚浅谈:怎么学JavaScript?
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~
尤雨溪开发的 vue-devtools 如何安装,为何打开文件的功能鲜有人知?相关推荐
- 尤雨溪回应:Vue与TypeScript为什么相性特别差?
近日,有开发者在知乎上提出了一个问题:"TypeScript 不适合在 vue 业务开发中使用吗?",Vue的作者尤雨溪针对这一问题发表了自己的看法,也解释了Vue 3.0选用Ty ...
- 尤雨溪亲自回应Vue.js涉及国家安全漏洞问题
最近,有两幅关于 Vue 安全问题的截图在业界广为传播,截图内容表明目前有多家公司统计软件开发过程中使用 Vue.js 和 SonarQube 的情况,疑似有黑客利用 Vue.js 和 SonarQu ...
- 请停止搬运部署,尤雨溪官申Vue 3官方文档地址
北京时间9月22日,Vue 框架创始人尤雨溪通过个人微博申明 Vue 3以及 Vited 的官方中文文档地址,它们分别是 v3.cn.vuejs.org,Vite 的官方中文文档地址是 cn.vite ...
- 和尤雨溪一起进阶vue
上图,无图无真相 花了400大洋买了frontedmasters的一个月的会员,就是为了看男神的这份vue教程,没有中文字幕,痛苦地坚持啃完了,建议有钱并且英语好的人直接买会员去官网看视频,尤大神人长 ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- 专访尤雨溪:先别管4.0了,Vue CLI重构了解一下
\ 上个月,Vue CLI 3.0 正式发布,为很多开发者带来期待已久的新特性,尤雨溪也说 Vue CLI 3.0 经历了重构,旨在尽可能减少现代前端工具在配置上的烦恼,并尽可能在工具链中加入最佳实践 ...
- 重磅!尤雨溪公布 Vue 3.0 开发路线
web前端教程 用大白话,来讲编程 在上周的 Vue.js 伦敦大会上,Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,9 月 30 日,尤雨溪在 medium 个人博客上发布 ...
- 掘金 AMA:听 Vue.js 作者--尤雨溪谈 Vue.js 独立开发 设计那些事
第七期 沸点,掘金团队请来了Vue.js 的作者,全职独立开源开发者尤雨溪做了为期三天的 Ask Me Anything (AMA) 活动(已结束). 我们在此精选了一些来自用户的提问及尤小右(尤雨溪 ...
- 尤雨溪携手字节前端专家,畅聊 Vue 3.0 前端技术新趋势
前端这个技术领域,在应用化以后,涵盖的内容越来越广--纯表现层.应用实现层.应用架构层.基础设施层到改进开发范式的理念层,都有太多可以去钻研的技术点,衍生出了无数前端开发的发展路线."别更新 ...
最新文章
- JAVA Unsafe类
- 调了 好几天的问题 treeview 的js 处理复选框之间的关系,选中子框父框自动选中,单独执行 没问题 放到框架页里 就有问题...
- SpringBoot默认包扫描机制及@ComponentScan指定扫描路径详解
- Hello,Behavior
- Android开发系列(十二) QQ联系人列表升级版——ListView和ScrollView高阶使用方法...
- ARM处理器寄存器和汇编指令系统
- CCF-CSP认证备考学习行动路线图
- VASP 系列001. 高通量计算 Python 库 pymatgen 安装和一些使用(用 pymatgen 画 HSE 能带的细节和输出图片字体的简单调整)
- 实验数据 matlab,用MatlAB处理实验数据程序
- 金仓数据库学习笔记(一)
- dropbox 怎么使用_如何在Android手机上使用Dropbox
- 凯文.凯利:未来12个趋势(值得一读)
- 未来三年的移动互联网创业----创新工场创始合伙人汪华 在移动开发者大会上的演讲
- pyqt5-事件机制
- HDU 3221 Brute-force Algorithm(指数降幂公式)
- 树莓派3通过网线连接电脑
- 可视化分析工具Qlik进阶
- android 上午零点格式,Android零点一度的区别——Matrix
- 产品经理的竞品分析报告入门
- 美国计算机考研难度排名,2019USnews美国大学研究生cs专业百强排名一览
热门文章
- gpio的8种工作模式_Stm32之GPIO工作模式简介
- 没有与参数列表匹配的 重载函数 strcpy_s 实例_Zemax光学设计实例(84)Ftheta扫描平场透镜的设计...
- JDBC原理之层次结构
- 转: Div与table的区别
- ScrollView中使用ListView
- 微软中国推校园先锋计划,保障学生低价获取正版软件
- linux下生成源程序控制流图,Linux下控制(统计)文件的生成的C代码实现
- ant引入html页面,antdesign 中 使用 iconfont symbol方式引入图标不展示
- 安卓APP_ 其他(1) —— 程序的签名打包并在手机上运行
- tp5 php7 报500,记一次TP单元测试报500错误的问题