Vue- vue devtools安裝

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

一、下載

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插件

 

 

六、驗證

 

 2、火狐安裝

 

安裝web-ext

npm install --global web-ext 

而後編譯運行firefox瀏覽器

npm run build
npm run run:firefox 

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

 

3、若是你但願在全部瀏覽器中使用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>