含視頻：最新安裝谷歌瀏覽器chrome的vuejs devtools 插件詳解

視頻另見：https://weibo.com/tv/v/HplZnsY0L?fid=1034:4360415392558633

    

             視頻                                       步驟

準備工作：

下載vue-devtools-dev.zip壓縮包，官網https://github.com/vuejs/vue-devtools

並解壓到本地位置：D：ProTools\vue-devtools-dev

步驟：

1-1進入解壓後包的路徑下，cmd執行npm install

 上行命令表示：下載依賴

【注意】若上行命令太慢可使用npm淘寶鏡像，即執行 npm install -g cnpm --registry=https://registry.npm.taobao.org

或執行cnpm install

成功執行，見下圖

1-2 編譯源程序，cmd執行 npm run build

   或者執行 cnpm run build，

執行上行命令目的，加載背景腳本"build/background.js"，否則會報錯

成功執行，見下圖

執行完，會在shells>chrome下的src文件夾裏生產如上圖所示的幾個js文件

 

1-3 修改manifest.json

位置：D:\ProTools\vue-devtools-dev\shells\chrome，把json文件裏的"persistent":false改成true

27行 28行 29行 30行 31行 32行

"background": {     "scripts": [       "build/background.js"     ],     "persistent": true   }

2-1，擴展chrome插件

①打開chrome瀏覽器，打開更多工具>擴展程序；

②再點擊加載已解壓的擴展程序，然後把shells>chrome文件夾放入

 

2-2，測試是否安裝成功

①啓動項目，即cmd執行npm run dev，

②打開localhost:8080可以看到插件已經安裝並運行了。

測試成功，見上圖