Chrome 瀏覽器安裝Vue Devtools調試工具 (詳細教程)

Chrome 瀏覽器安裝Vue Devtools調試工具

    1. 首先下載Vue Devtools調試工具
    2. 復制網址，在瀏覽器打開按照圖示操作
    3. 下載成功后解壓即可，如下圖所示
    4. 解壓后打開cmd命令切換到G:\Vue Devtools工具\vue-devtools-5.1.1路徑下（你們安裝的路徑自己切換）
    5. 切換命令成功后使用淘寶命令cnpm install下載（盡量用淘寶鏡像下載快速些），下載成功如下圖所示
    6. 然后在cnpm run build 如下圖所示
    7. 然后在打開shells,找到chrome,打開找到manifest.json修改"persistent": false，把false改成true保存
    8. 修改成功后輸入網址chrome://extensions/ 在谷歌瀏覽器 打開
    9. 拖入shells下的chrome文件到頁面上，如圖所示
    10. 安裝成功后測試如下：

1. 首先下載Vue Devtools調試工具

https://github.com/vuejs/vue-devtools/tree/v5.1.1

    之所以安裝5.1.1版本的原因就是我安裝的過程中出錯了，不能安裝新版本，為了解決這個錯誤只能安裝5.1.1版本的
    安裝最新報錯信息如下：
    Error: Cannot find module ‘@vue-devtools/build-tools’ npm ERR! vue-devtools@5.3.2 build: `cd packages/shell-chrome && cross-env NODE_ENV=production webpa

2、cmd命令切換到G:\Vue Devtools工具\vue-devtools-5.1.1路徑下（你們安裝的路徑自己切換）

 

 3、切換命令成功后使用淘寶命令cnpm install下載（盡量用淘寶鏡像下載快速些）

4、然后在cnpm run build 如下圖所示

 

 5、然后在打開shells,找到chrome,打開找到manifest.json修改"persistent": false，把false改成true保存

 

 6、修改成功后輸入網址chrome://extensions/ 在谷歌瀏覽器 打開

 

 7、拖入shells下的chrome文件到頁面上，如圖所示

 

 8、安裝成功后測試如下：