1. 前言

大家好，我是若川。最近組織了一次源碼共讀活動。每周讀 200 行左右的源碼。很多第一次讀源碼的小伙伴都感覺很有收獲，感興趣可以加我微信 ruochuan12，拉你進群學習。

第一周讀的是：據說 99% 的人不知道 vue-devtools 還能直接打開對應組件文件？本文原理揭秘。雖然我寫過文章，但我還是相信有部分小伙伴還是不知道這個功能。

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]

vue-devtools v3 版本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]

vue-devtools v2 版本#?可以復制上文克隆的項目 #?終端下復制?或者手動復制 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 如何安装，为何打开文件的功能鲜有人知？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。