簡(jiǎn)介
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
手動(dòng)安裝
- 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\Extensions -
MAC中chrome插件默認(rèn)安裝目錄位置：
~/Library/Application Support/Google/Chrome/Default/Extensions -
Ubuntu中chrome插件默認(rèn)安裝目錄位置：
~/.config/google-chrome/Default/Extensions
如果在這些不同操作系統(tǒng)中的chrome插件默認(rèn)安裝位置，沒有找到插件。那么請(qǐng)通過(guò)下面的方式查看,如下圖所示：
地址欄輸入chrome:version 回車
用資源管理器打開"個(gè)人資料路徑"欄的路徑,該路徑下的Extensions文件夾即默認(rèn)的擴(kuò)展安裝路徑
- 進(jìn)入目錄安裝所需npm依賴包，編譯文件
npm install 安裝所需npm依賴包
npm run build 編譯文件
- 修改manifest.json
修改 manifest.json 中的 persistent 為true
- 添加至chrome游覽器
游覽器輸入地址“chrome://extensions/”進(jìn)入擴(kuò)展程序頁(yè)面，將文件夾拖入瀏覽器即可
安裝成功后開啟項(xiàng)目后再控制臺(tái)中會(huì)有如下顯示。
