簡介
vue-devtools是一款基于chrome游覽器的插件颠区，用于調(diào)試vue應(yīng)用柜与，現(xiàn)在已經(jīng)可以在Firefox和Safari中安裝掷漱。這可以提高我們的調(diào)試效率秦士。
商店直接安裝
Chrome Extension https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Firefox Addon https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools
Workaround for Safari https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md
手動安裝
- Github下載
https://github.com/vuejs/vue-devtools.git
推薦講文件下載到瀏覽器插件文件夾中。正常情況下栓辜，Chrome插件擴(kuò)展程序的默認(rèn)安裝目錄如下：
windows7中chrome插件默認(rèn)安裝目錄位置:
C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\ExtensionsMAC中chrome插件默認(rèn)安裝目錄位置：
~/Library/Application Support/Google/Chrome/Default/ExtensionsUbuntu中chrome插件默認(rèn)安裝目錄位置：
~/.config/google-chrome/Default/Extensions
如果在這些不同操作系統(tǒng)中的chrome插件默認(rèn)安裝位置恋拍，沒有找到插件。那么請通過下面的方式查看,如下圖所示：
- 地址欄輸入chrome:version 回車
- 用資源管理器打開"個人資料路徑"欄的路徑,該路徑下的Extensions文件夾即默認(rèn)的擴(kuò)展安裝路徑
- 進(jìn)入下載的目錄安裝所需npm依賴包藕甩，編譯文件
yarn install 安裝所需npm依賴包
yarn run build 編譯文件
- 添加至chrome游覽器
瀏覽器輸入地址“chrome://extensions/”進(jìn)入擴(kuò)展程序頁面施敢，將文件夾拖入瀏覽器即可
3.1 打開開發(fā)者模式
3.2 加載已解壓的擴(kuò)展程序
3.3 選擇目錄下packages/shell-chrome
安裝成功后開啟項目后再控制臺中會有如下顯示。
