vue devtools是一款基于chrome瀏覽器的用于調(diào)試Vue.js應用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試功能。需要的朋友可下載試試！

由于vue是數(shù)據(jù)驅(qū)動的，所以這就存在在開發(fā)調(diào)試中查看DOM結(jié)構(gòu)并不能解析出什么，通過該插件，用戶可以很輕松的對數(shù)據(jù)結(jié)構(gòu)進行解析和調(diào)試，能夠在側(cè)邊欄窗格中的頁面中檢查代碼并進行調(diào)試，可以方便查看state、mutaitons、action等信息，還可記錄路由的變化，以及路由相關(guān)信息等等，可謂是前端開發(fā)必備工具！

功能特點

1、性能

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

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

2、設(shè)置

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

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

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

3、路由

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

安裝教程：

1、下載得到vue.js devtools crx文件；

2、從設(shè)置->更多工具->擴展程序 打開擴展程序頁面，或者地址欄輸入 Chrome://extensions/ 按下回車打開擴展程序頁面；

3、打開擴展程序頁面的“開發(fā)者模式”；

4、將crx文件拖拽到擴展程序頁面，完成安裝；

用戶還可以通過Chrome擴展管理器找到已經(jīng)安裝的插件，點擊在文件夾中顯示，雙擊“xxx.crx”

5、將本地的vue項目跑起來后，在瀏覽器打開你的項目，打開開發(fā)者模式，你會看見地址欄下邊多出了vue選項。

vue devtools使用教程

1、下載好后進入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è)置--->擴展程序，并勾選開發(fā)者模式，將剛剛編譯后的工程中的shells目錄下，chrome的整個文件夾直接拖拽到當前瀏覽器中，并選擇啟用，即可將插件安裝到瀏覽器

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

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