尤雨溪開發的 vue-devtools 如何安裝,爲何打開文件的功能鮮有人知?
- 前言
大家好,我是若川。最近組織了一次源碼共讀活動。每週讀 200 行左右的源碼。很多第一次讀源碼的小夥伴都感覺很有收穫,感興趣可以加我微信
ruochuan12
,拉你進羣學習。
第一週讀的是:據說 99% 的人不知道 vue-devtools 還能直接打開對應組件文件?本文原理揭祕。雖然我寫過文章,但我還是相信有部分小夥伴還是不知道這個功能。
vue-devtools 高效打開對應組件文件
文中項目用的是vue3
,所以需要安裝 vue3
版本對應的vue-devtools
。
但有挺多小夥伴,無法打開谷歌應用市場。有人說不是谷歌應用市場可以下載嘛。但往往是這一步攔住了很多用戶,也有了很多商機。比如各種插件網站應運而生。於是我寫篇文章,我是如何打包安裝 devtools
插件的。
友情提醒:文章相對比較簡單。估計有人會說,這也要寫篇文章嘛。事實上,真的有挺多人不知道怎麼打包。寫文章也是提醒大家多看官方文檔和
github README
。
插件我已經打包好,放到百度網盤中,在我的公衆號:若川視野,回覆關鍵詞【插件】即可獲取到兩個版本的
devtools
進行安裝,兩個版本可以共存。
- 打包插件和安裝方法
打開 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
。其中詳細信息中,允許訪問文件網址
,默認是開啓的,建議開啓。
允許訪問文件網址
- 總結
文章相對簡短,如果你身邊有新人同事,還在爲安裝 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
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/1vDdnmoxXuVqnCrLCMI-KA