怎樣在Chrome瀏覽器上安裝 Vue Devtools 擴展程序

第一步: 前往 GitHub 下載 Vue Devtools 項目文件

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

 

 

 

注意: 

1. 將分支切換為 master

2. 下載.zip壓縮包后在本地解壓

 

第二步: 進入解壓后的文件夾, 打開powershell, 執行下面兩條命令: 

cnpm install

npm run build

 

 

注意: 

1. cnpm install 可以 改為: npm install, 這一步可能很慢, 建議還是安裝cnpm, 然后切換為淘寶鏡像源;

2. npm run build 用於編譯源程序

 

第三步: 打開位於 shells > chrome 中的 mainfest.json 文件, 把 persistent 字段設置為: true

 

 

注意: 

1. mainfest.json 是Chrome擴展程序的配置文件, 各個配置項的作用詳見: 這里

2. persistent 為true時可以指定常駐瀏覽器后台的腳本, 並且可以連接其他頁面;

 

第四步: 打開Chrome瀏覽器, 把 擴展程序中的開發者選項打開, 然后把 shell > chrome 這個文件夾整個拖進瀏覽器頁面.

 

 

第五步: 現在 運行一個 Vue 項目后, 打開瀏覽器, 就可以使用 Vue Devtools 了