天天看點

VUE 調試工具vue-devtools的安裝及使用方法

一、安裝:

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。

VUE 調試工具vue-devtools的安裝及使用方法

4.編譯代碼

npm run build
           

5.擴充Chrome插件

Chrome浏覽器 >  更多程式 > 拓展程式

點選加載已解壓程式按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖

VUE 調試工具vue-devtools的安裝及使用方法

二、使用方法

vue項目, 打開f12, 選擇vue就可以使用了.

vue是資料驅動的, 這樣就能看到對應資料了, 友善我們進行調試

VUE 調試工具vue-devtools的安裝及使用方法

Tips:

      1.vue必須引入開發版, 使用min壓縮版是不能使用devtools進行調試的。

      2.安裝後, 需要重新整理頁面或者關閉浏覽器, 再重新打開, 才能使用。

繼續閱讀