1. 前言

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

第一周讀的是：據(jù)說(shuō) 99% 的人不知道 vue-devtools 還能直接打開(kāi)對(duì)應(yīng)組件文件？本文原理揭秘。雖然我寫(xiě)過(guò)文章，但我還是相信有部分小伙伴還是不知道這個(gè)功能。

vue-devtools 高效打開(kāi)對(duì)應(yīng)組件文件

文中項(xiàng)目用的是vue3，所以需要安裝 vue3 版本對(duì)應(yīng)的vue-devtools。

但有挺多小伙伴，無(wú)法打開(kāi)谷歌應(yīng)用市場(chǎng)。有人說(shuō)不是谷歌應(yīng)用市場(chǎng)可以下載嘛。但往往是這一步攔住了很多用戶，也有了很多商機(jī)。比如各種插件網(wǎng)站應(yīng)運(yùn)而生。于是我寫(xiě)篇文章，我是如何打包安裝 devtools 插件的。

友情提醒：文章相對(duì)比較簡(jiǎn)單。估計(jì)有人會(huì)說(shuō)，這也要寫(xiě)篇文章嘛。事實(shí)上，真的有挺多人不知道怎么打包。寫(xiě)文章也是提醒大家多看官方文檔和github README。

插件我已經(jīng)打包好，放到百度網(wǎng)盤(pán)中，在我的公眾號(hào)：若川視野，回復(fù)關(guān)鍵詞【插件】即可獲取到兩個(gè)版本的 devtools 進(jìn)行安裝，兩個(gè)版本可以共存。

2. 打包插件和安裝方法

打開(kāi) github vue-devtools^[1] 發(fā)現(xiàn)名字也更新了，之前是叫vue-devtools，現(xiàn)在是devtools了，竟然還出了devtools 官網(wǎng)^[2]。

2.1 打包 vue3 版本對(duì)應(yīng)的 vue-devtools

查看官方README：vue-devtools contributing^[3]

vue-devtools v3 版本git?clone?https://github.com/vuejs/devtools.git cd?devtools #?如果沒(méi)安裝?yarn，可以?npm?i?yarn?-g #?安裝依賴 yarn?install #?構(gòu)建 yarn?build

不出意外，構(gòu)建成功后，可以得到有 devtools/packages/shell-chrome/ 目錄。

2.2 打包 vue2 版本對(duì)應(yīng)的 vue-devtools

查看官方README：vue2 devtools REAMDE.md^[4]

vue-devtools v2 版本#?可以復(fù)制上文克隆的項(xiàng)目 #?終端下復(fù)制?或者手動(dòng)復(fù)制 cp?-rf?devtools?devtools-v2 cd?devtools-v2 #?復(fù)制成功后，切換分支 tag 到 v5.3.4 ，這是 vue2 對(duì)應(yīng)的 devtools。 git?checkout?v5.3.4 #?刪除?node_modules rm?-rf?node_modules #?安裝依賴 yarn?install #?構(gòu)建 yarn?build

同樣，不出意外，構(gòu)建成功后，可以得到有 devtools-v2/packages/shell-chrome/ 目錄。

2.3 安裝

安裝

如上圖所示，谷歌瀏覽器打開(kāi) chrome://extensions/，右上角點(diǎn)擊開(kāi)啟開(kāi)發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，選擇打包生成的 devtools-v2/packages/shell-chrome/ 文件夾即可安裝，或者直接拖入也可以安裝，vue2 和 vue3 的插件可以共存。

安裝好后，可以開(kāi)心的調(diào)試?yán)?#xff0c;順便可以查看下插件的詳細(xì)信息。目前 vue3 對(duì)應(yīng)版本的是6.0.0-beta-15。vue2 對(duì)應(yīng)的版本是 5.3.4。其中詳細(xì)信息中，允許訪問(wèn)文件網(wǎng)址，默認(rèn)是開(kāi)啟的，建議開(kāi)啟。

允許訪問(wèn)文件網(wǎng)址

3. 總結(jié)

文章相對(duì)簡(jiǎn)短，如果你身邊有新人同事，還在為安裝 devtools 插件發(fā)愁，可以分享這篇給 TA。

啟發(fā)：我們要養(yǎng)成多查閱官方文檔或者github README的習(xí)慣。好的開(kāi)源項(xiàng)目，README一般都寫(xiě)得非常好。另外除了什么新功能，一般在官方文檔或者 README 會(huì)有體現(xiàn)。雖然一般 README 是英文的會(huì)阻攔一部分人，但如果真的看不懂還可以通過(guò)谷歌翻譯等翻譯工具。

再次友情提醒：插件我已經(jīng)打包好，放到百度網(wǎng)盤(pán)中，在我的公眾號(hào)：若川視野，回復(fù)關(guān)鍵詞【插件】即可獲取到兩個(gè)版本的 devtools 進(jìn)行安裝，兩個(gè)版本可以共存。

參考資料

[1]

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

[2]

devtools 官網(wǎng): 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

---

最近組建了一個(gè)江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進(jìn)群。

---

推薦閱讀

我在阿里招前端，該怎么幫你（可進(jìn)面試群）
我讀源碼的經(jīng)歷

面對(duì) this 指向丟失，尤雨溪在 Vuex 源碼中是怎么處理的
老姚淺談：怎么學(xué)JavaScript？

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開(kāi)發(fā)“工程師”。寫(xiě)有《學(xué)習(xí)源碼整體架構(gòu)系列》多篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫(xiě)一篇年度總結(jié)，已經(jīng)寫(xiě)了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，活躍在知乎@若川，掘金@若川。致力于分享前端開(kāi)發(fā)經(jīng)驗(yàn)，愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~

總結(jié)

以上是生活随笔為你收集整理的尤雨溪开发的 vue-devtools 如何安装，为何打开文件的功能鲜有人知？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。