尤雨溪開發的 vue-devtools 如何安裝,爲什麼打開文件的功能鮮有人知?

1. 前言

你們好,我是若川。歡迎加我微信ruochuan12,關注個人公衆號若川視野,長期交流學習。最近組織了一次源碼共讀活動。每週讀 200 行左右的源碼。不少第一次讀源碼的小夥伴都感受頗有收穫,感興趣能夠加我微信 ruochuan12,拉你進羣學習。html

第一週讀的是:聽說 99% 的人不知道 vue-devtools 還能直接打開對應組件文件?本文原理揭祕。雖然我寫過文章,但我仍是相信有部分小夥伴仍是不知道這個功能。前端

vue-devtools 高效打開對應組件文件

文中項目用的是vue3,因此須要安裝 vue3 版本對應的vue-devtoolsvue

但有挺多小夥伴,沒法打開谷歌應用市場。有人說不是谷歌應用市場能夠下載嘛。但每每是這一步攔住了不少用戶,也有了不少商機。好比各類插件網站應運而生。因而我寫篇文章,我是如何打包安裝 devtools 插件的。node

友情提醒:文章相對比較簡單。估計有人會說,這也要寫篇文章嘛。事實上,真的有挺多人不知道怎麼打包。寫文章也是提醒你們多看官方文檔和github READMEgit

2. 打包插件和安裝方法

打開 github vue-devtools 發現名字也更新了,以前是叫vue-devtools,如今是devtools了,居然還出了devtools 官網github

2.1 打包 vue3 版本對應的 vue-devtools

查看官方READMEvue-devtools contributingweb

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/ 目錄。chrome

2.2 打包 vue2 版本對應的 vue-devtools

查看官方READMEvue2 devtools REAMDE.mdshell

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/ 目錄。npm

2.3 安裝

安裝

如上圖所示,谷歌瀏覽器打開 chrome://extensions/,右上角點擊開啓開發者模式,點擊加載已解壓的擴展程序,選擇打包生成的 devtools-v2/packages/shell-chrome/ 文件夾便可安裝,或者直接拖入也能夠安裝,vue2vue3 的插件能夠共存。

安裝好後,能夠開心的調試啦,順即可以查看下插件的詳細信息。目前 vue3 對應版本的是6.0.0-beta-15vue2 對應的版本是 5.3.4。其中詳細信息中,容許訪問文件網址,默認是開啓的,建議開啓。

容許訪問文件網址

3. 總結

文章相對簡短,若是你身邊有新人同事,還在爲安裝 devtools 插件發愁,能夠分享這篇給 TA。

啓發:咱們要養成多查閱官方文檔或者github README的習慣。好的開源項目,README通常都寫得很是好。另外除了什麼新功能,通常在官方文檔或者 README 會有體現。雖然通常 README 是英文的會阻攔一部分人,但若是真的看不懂還能夠經過谷歌翻譯等翻譯工具。

再次友情提醒:插件我已經打包好,放到百度網盤中,在個人公衆號:若川視野,回覆關鍵詞【插件】便可獲取到兩個版本的 devtools 進行安裝,兩個版本能夠共存。


關於

做者:常以若川爲名混跡於江湖。前端路上 | PPT愛好者 | 所知甚少,惟善學。
公衆號若川視野
若川的博客
segmentfault若川視野專欄,開通了若川視野專欄,歡迎關注~
掘金專欄,歡迎關注~
知乎若川視野專欄,開通了若川視野專欄,歡迎關注~
github blog,求個star^_^~

相關文章
相關標籤/搜索