Vue- vue devtools安裝

使用Vue開發過程中，需Chrome瀏覽器的調試插件Vue devtools

1、下載

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

選擇下載安裝整個ZIP壓縮包

 

 

 

2.然后進行解壓縮，並在解壓后的文件夾里面打開命令提示符，

 

 

 

3.然后在相同的路徑里面輸入：npm install
再輸入：npm run build

注意：npm install的時候會報錯： npm ERR! Unexpected end of JSON input while parsing near '...a1a6ec9096c30d3954dd5'

 

 

 

解決方法：npm cache clean --force

 

 

 

 

 

 

 

 

4.在編譯好的文件夾找到manifest.json這個文件，一般所在的路徑是：
自己安裝的路徑\vue-devtools-dev\shells\chrome\manifest.json
然后打開這個manifest.json, 將persistent的值改為true

 

 

5.打開chrome瀏覽器的擴展程序，（chrome://extensions/）

打開開發者模式，並將整個chrome文件夾拖入空白處，即可加載出vue devtools插件

 

 

6、驗證

 

 二、火狐安裝

 

安裝web-ext

npm install --global web-ext 

然后編譯運行firefox瀏覽器

npm run build
npm run run:firefox 

上述指令會打開firefox瀏覽器，你便可在打開的窗口運行調試vue應用了。

 

三、如果你希望在所有瀏覽器中使用vue-devtools，那可以按如下步驟安裝

1. 安裝工具

// 全局安裝，也可本地安裝 npm install -g @vue/devtools 

2. 運行

vue-devtools // 適用於全局安裝

該指令會打開一個窗口，如下所示

 

3. 如果你想在電腦瀏覽器調試，則在vue應用的最頂部加上

<script src="http://localhost:8098"></script> 

4. 如果你想在移動端瀏覽器調試，則在vue應用的最頂部加上

<script> window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098 </script> <script src="http://<your-local-ip>:8098"></script>