一、安裝:
1.在安裝目錄打開終端(或者打開終端cmd進入安裝目錄),輸入以下命令,到 github 下載 vue-devtools 插件:
git clone https://github.com/vuejs/vue-devtools
2.在 vue-devtools 目錄下依次輸入以下兩個命令,安裝依賴包:
cd vue-devtools
cnpm install 或者用 npm install
3.修改目錄 “vue-devtools\shells\chrome\” 下的 manifest.json 文件,把 "persistent":false 改成 true。
4.編譯代碼
npm run build
5.擴展Chrome插件
Chrome瀏覽器 > 更多程序 > 拓展程序
點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
二、使用方法
vue項目, 打開f12, 選擇vue就可以使用了.
vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試
Tips:
1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的。
2.安裝後, 需要刷新頁面或者關閉瀏覽器, 再重新打開, 才能使用。