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

【功能特點(diǎn)】

　　1、性能

　　與路由選項(xiàng)卡一樣，性能選項(xiàng)卡也是一個(gè)新增功能。此選項(xiàng)卡由兩部分組成，“每秒幀數(shù)”和“組件渲染”。

　　第一個(gè)選項(xiàng)卡“每秒幀數(shù)”顯示一個(gè)實(shí)時(shí)源圖表，其中包含應(yīng)用程序的當(dāng)前fps。這可用于查找減慢應(yīng)用程序速度的某些操作或組件。

　　2、設(shè)置

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

　　規(guī)范化組件名稱（my-component將變?yōu)镸yComponent）

　　更新主題 - 打開或關(guān)閉新的黑暗主題選項(xiàng)

　　3、路由

　　Routing選項(xiàng)卡是devtools套件的全新選項(xiàng)。這里有兩個(gè)不同的視圖，“歷史記錄”和“路徑”，可以通過單擊“路由”選項(xiàng)卡標(biāo)題進(jìn)行交換。

【安裝教程】

　　一、chrome插件使用方法

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

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

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

　　4、點(diǎn)擊“添加拓展程序”完成安裝。

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

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

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

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

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

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

　　最后，重啟一下你的vue項(xiàng)目應(yīng)該就可以使用了。

　　二、源代碼安裝方法

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

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

　　3、編譯完成后，目錄結(jié)構(gòu)如下：

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

　　4、打開谷歌瀏覽器的設(shè)置--->擴(kuò)展程序，并勾選開發(fā)者模式

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

　　5、打開一個(gè)已有的vue項(xiàng)目，運(yùn)行項(xiàng)目，然后在瀏覽器中--->設(shè)置--->更多工具--->開發(fā)者工具，進(jìn)入調(diào)試模式：

　　發(fā)現(xiàn)vue.js is not detected  ，可以調(diào)整一下webpack.config.js的代碼：

　　最后，重啟一下你的vue項(xiàng)目應(yīng)該就可以使用了。

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

【使用教程】

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

　　2、編譯完成后，目錄結(jié)構(gòu)如下

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

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

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

　　5、打開一個(gè)已有的vue項(xiàng)目，我們以todolist項(xiàng)目為例，運(yùn)行項(xiàng)目，然后在瀏覽器中--->設(shè)置--->更多工具--->開發(fā)者工具，進(jìn)入調(diào)試模式

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