尤雨溪开发的 vue-devtools 如何安装，为什么打开文件的功能鲜有人知？

1. 前言

你们好，我是若川。欢迎加我微信ruochuan12，关注个人公众号若川视野，长期交流学习。最近组织了一次源码共读活动。每周读 200 行左右的源码。不少第一次读源码的小伙伴都感受颇有收获，感兴趣能够加我微信 ruochuan12，拉你进群学习。html

第一周读的是：听说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘。虽然我写过文章，但我仍是相信有部分小伙伴仍是不知道这个功能。前端

文中项目用的是vue3，因此须要安装 vue3 版本对应的vue-devtools。vue

但有挺多小伙伴，没法打开谷歌应用市场。有人说不是谷歌应用市场能够下载嘛。但每每是这一步拦住了不少用户，也有了不少商机。好比各类插件网站应运而生。因而我写篇文章，我是如何打包安装 devtools 插件的。node

友情提醒：文章相对比较简单。估计有人会说，这也要写篇文章嘛。事实上，真的有挺多人不知道怎么打包。写文章也是提醒你们多看官方文档和github README。git

2. 打包插件和安装方法

打开 github vue-devtools 发现名字也更新了，以前是叫vue-devtools，如今是devtools了，居然还出了devtools 官网。github

2.1 打包 vue3 版本对应的 vue-devtools

查看官方README：vue-devtools contributingweb

git clone https://github.com/vuejs/devtools.git
cd devtools
# 若是没安装 yarn，能够 npm i yarn -g
# 安装依赖
yarn install
# 构建
yarn build
复制代码

不出意外，构建成功后，能够获得有 devtools/packages/shell-chrome/ 目录。chrome

2.2 打包 vue2 版本对应的 vue-devtools

查看官方README：vue2 devtools REAMDE.mdshell

# 能够复制上文克隆的项目
# 终端下复制 或者手动复制
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/ 目录。npm

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 进行安装，两个版本能够共存。

关于

做者：常以若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，惟善学。
公众号若川视野
 若川的博客
 segmentfault若川视野专栏，开通了若川视野专栏，欢迎关注~
掘金专栏，欢迎关注~
知乎若川视野专栏，开通了若川视野专栏，欢迎关注~
github blog，求个star^_^~