web前端知識點歸納筆記：Vue.js除錯神器vue-devtools的安裝

摘要： 在使用 Vue 時，官方推薦我們在瀏覽器上安裝 Vue Devtools。它允許我們在一個更友好的介面中審查和除錯 Vue 應用。 1、在github上開啟 Vue Devtools專案 https://github.com/vuejs/vue-devtools#vue-devtool...

在使用 Vue 時，官方推薦我們在瀏覽器上安裝 Vue Devtools。它允許我們在一個更友好的介面中審查和除錯 Vue 應用。

1、在github上開啟 Vue Devtools專案

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

2、下載壓縮包

3、檔案解壓縮

4、進入壓縮後的資料夾安裝依賴包

npm install

如圖：

5、編譯專案檔案

npm run build

如圖：

編譯後的目錄：

6、修改安裝目錄 vue-devtools\shells\chrome 中 的 manifest.json 檔案。 將 persistent 屬性改為 true
目錄：

修改：

"background": {
"scripts": [
"build/background.js"
],
"persistent": true // 可常駐瀏覽器後臺的指令碼，可以連線其他頁面
},

7、開啟擴充套件程式

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

開啟介面如下：

8、開啟開發者模式

9、點選 載入已解壓的擴充套件程式 然後選擇 vue-devtools/shells/chrome

結果如下：

—————END—————

[公眾號回覆“電子書”，送你經典前端電子書籍]

喜歡本文的朋友們，歡迎關注微信公眾號 張培躍，收看更多精彩內容