雷火电竞官网-中国知名电竞赛事平台

　　vue.js devtools 插件是一款非常好用的Vue.js調試器。該插件支持在谷歌、360、火狐等瀏覽器上使用，目前推出了全新的6.0版本，安裝之后，可以在瀏覽器開發者工具下調試代碼，免費下載，歡迎體驗。

【功能特點】

　　1、性能

　　與路由選項卡一樣，性能選項卡也是一個新增功能。此選項卡由兩部分組成，“每秒幀數”和“組件渲染”。

　　第一個選項卡“每秒幀數”顯示一個實時源圖表，其中包含應用程序的當前fps。這可用于查找減慢應用程序速度的某些操作或組件。

　　2、設置

　　將顯示密度更改為更緊湊的布局

　　規范化組件名稱（my-component將變為MyComponent）

　　更新主題 - 打開或關閉新的黑暗主題選項

　　3、路由

　　Routing選項卡是devtools套件的全新選項。這里有兩個不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項卡標題進行交換。

【安裝教程】

　　一、chrome插件使用方法

　　1、你可以從chrome應用商店里找到Vue.js devtools插件，如果你的chrome應用商店無法打開，你可以在本站的下方找到Vue.js devtools下載地址。

　　2、離線安裝chrome插件的方法均可參照：怎么在谷歌瀏覽器中安裝.crx擴展。如果你是最新版Chrome瀏覽器，可以參考chrome 67版本后無法拖拽離線安裝CRX格式插件的解決方法。

　　3、下載Vue.js devtools的crx文件后，打開Chrome的擴展頁面（chrome：// extensions /或按Chrome菜單圖標>更多工具>擴展程序查找），然后拖放 crx文件到擴展頁面安裝它；

　　4、點擊“添加拓展程序”完成安裝。

　　5、Vue.js devtool插件安裝后無法使用，出現提示“vue.js not detected”，這時我們可以使用下面的方法：

　　第一，我們需要找到Vue.js devtool插件的安裝目錄。（如果真找不到插件的安裝位置，可以在本地電腦搜索插件的ID：nhdogjmejiglipccpnnnanhbledajbpd。）不同操作系統中chrome插件安裝位置不同，比如win8系統中chrome插件的安裝位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd

　　第二，在找到了Vue.js devtool插件的安裝目錄后，打開mainifest.json文件（這是關鍵）。

　　將mainfest.json中代碼persistent：false，修改成persistent：true。

　　一般情況下，修改完如上的位置的代碼。打開vue項目后，在控制臺選擇vue，就應該可以正常使用了。

　　第三，如果通過上面的方法調整過后，還是不能夠使用，那么可以調整一下webpack.config.js的代碼，如下圖所示：

　　最后，重啟一下你的vue項目應該就可以使用了。

　　二、源代碼安裝方法

　　1、在github下載devtools源碼，地址：https://github.com/vuejs/vue-devtools。

　　2、下載好后進入vue-devtools-master工程 執行cnpm install, 下載依賴，然后執行npm run build，編譯源程序。

　　3、編譯完成后，目錄結構如下：

　　修改shells-chrome目錄下的mainifest.json 中的persistant為true：

　　4、打開谷歌瀏覽器的設置--->擴展程序，并勾選開發者模式

　　然后將剛剛編譯后的工程中的shells目錄下，chrome的整個文件夾直接拖拽到當前瀏覽器中，并選擇啟用，即可將插件安裝到瀏覽器。

　　5、打開一個已有的vue項目，運行項目，然后在瀏覽器中--->設置--->更多工具--->開發者工具，進入調試模式：

　　發現vue.js is not detected  ，可以調整一下webpack.config.js的代碼：

　　最后，重啟一下你的vue項目應該就可以使用了。

　　小結：Vue.js devtool插件安裝后出現提示“vue.js not detected”的問題，首先在擴展程序中選擇開發者模式，打開插件的安裝目錄，將mainifest.json 中的persistant為true，如果還不行就調整一下webpack.config.js的代碼，最后重啟vue項目就可以使用。

【使用教程】

　　1、下載好后進入vue-devtools-master工程 執行cnpm install，下載依賴，然后執行npm run build，編譯源程序

　　2、編譯完成后，目錄結構如下

　　3、修改shells目錄下的mainifest.json 中的persistant為true

　　位置：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\ljjemllljcmogpfapbkkighbhhppjdbg\6.0.0.2_0

　　4、打開谷歌瀏覽器的設置--->擴展程序，并勾選開發者模式，將剛剛編譯后的工程中的shells目錄下，chrome的整個文件夾直接拖拽到當前瀏覽器中，并選擇啟用，即可將插件安裝到瀏覽器

　　5、打開一個已有的vue項目，我們以todolist項目為例，運行項目，然后在瀏覽器中--->設置--->更多工具--->開發者工具，進入調試模式

　　6、安裝完插件后，將會看到多了vue一欄，選擇vue，就可以在調試vue項目的過程中查看相應的組件等