谷歌瀏覽器Vue devtools安裝教程

谷歌瀏覽器Vue devtools安裝教程

第一步:在github上下載工具,網址:

https://github.com/vuejs/vue-devtools

第二步:安裝工具依賴(使用npm安裝)

在vue-devtools-dev文件夾(下載的文件根目錄)下,打開命令提示行或在文件夾下shift+鼠標右鍵打開powershell;

輸入命令npm install 安裝依賴,命令默認去找package.json中所需的依賴安裝;

未安裝依賴前:

安裝依賴後會多一個文件夾node_modules;

第三步:修改manifest.json文件

• 將代碼中 “persistent”:false改成true,並保存文件

第四步.安裝完成後同在該目錄下(文件所在的目錄)

shift+鼠標右鍵進入當前目錄打開powershell

輸入npm run build

第五步:在谷歌瀏覽器地址欄中輸入

chrome://extensions/

選擇工具包下的shells>chrome文件夾(建議將文件放到安全地磁盤,路徑或文件損壞會導致工具無法使用)

第六步:測試工具

—>重啓瀏覽器

—>進入開發者工具

—>在調試工具欄選擇vue

—>出現下圖,表示安裝成功(數據不必在意);但頁面沒有vue數據時,不會顯示插件

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

vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試 ：