軟件介紹

Vue Devtools是一款非常實用的vue調(diào)試工具，它的主要功能是幫助用戶在瀏覽器中調(diào)試和開發(fā)vue.js的應(yīng)用程序。Vue Devtools使用起來很方便，安裝過程也并不復(fù)雜，有需要的用戶快來下載吧。

Vue Devtools安裝教程

(1)在github上下載devtools源碼。

(2)下載后進入vue-devtools工程，執(zhí)行npm install，然后npm run build。

(3)編譯完成后修改/shells/chrome/manifest.json的persistant為true

(4)打開瀏覽器右上角的設(shè)置–>更多工具–>擴展程序，打開開發(fā)者模式

(5)然后將剛剛編譯后的shells下的chrome文件夾拖拽到瀏覽器中。

Vue Devtools使用教程

只有當Vue.config.devtools === true時才可使用devtools。

1、components面板

components面板內(nèi)可以看到我們定義的一系列組件，選中相應(yīng)的組件后，右側(cè)面板可以看到組件內(nèi)的data、props、computed、attrs屬性。

同時，data屬性是可以編輯的，編輯后頁面也會實時改變

選中Select后可以實時的選中頁面中的組件，快速定位到調(diào)試面板對應(yīng)的組件

鼠標右鍵 –> Inspect Vue component，也可以快速定位組件。 可以根據(jù)組件名字去篩選組件

還可以篩選數(shù)據(jù)

點擊Inspect Dom可以直接定位到Elements面板內(nèi)的DOM元素

每個組件實例都有一個變量，當前選中的組件是$vm0，其余組件從上到下升序賦值($vm1、$vm2、$vm3…)，控制臺直接打印$vm0可以直接看到這個實例。

2、Vuex面板

Vuex面板可以記錄每一次mutation。點擊對應(yīng)的mutation記錄在右邊可以看到mutation提交的詳細信息，跟此時state的狀態(tài)。

同時你可以篩選mutation與state

鼠標滑過mutation記錄會出現(xiàn)commit、revert、Time Travel， commit：保存指定的mutation，mutation記錄最上面Base State會變?yōu)檫@次mutation的state，同時這次commit之前的mutation都會刪掉。 revert：還原到指定mutation，當前的state變?yōu)橹�道m(xù)utation的state，revert之后的記錄都會刪掉。 Time Travel：時光旅行，state的數(shù)據(jù)切換到指定mutation，但所有記錄都會保存。

Vuex面板支持導(dǎo)出/導(dǎo)入state的功能 導(dǎo)出：將state復(fù)制到剪切板。 導(dǎo)入：支持將json數(shù)據(jù)直接導(dǎo)入到vuex中。

3、Events面板

Events面板可以記錄每次$emit觸發(fā)的事件，右側(cè)可以看到事件的詳細信息，同樣支持篩選。

name：事件名 type：事件類型，為了兼容Vue1.x，在Vue1.x中通過$dispatch觸發(fā)事件，此時type為$dispatch source：觸發(fā)事件的組件 paload：載荷，觸發(fā)事件時傳遞的參數(shù)

4、Routing面板

Routing面板有個選項：history、routes history記錄了每一次路由變化，但是注意這里的history !== window.history，每一次路由變化都會push到history里，即便你是this.$replace跳轉(zhuǎn)的路由。

右側(cè)會顯示詳細信息，面板當中的from、to跟vue-router路由鉤子中from、to代表相同的意思。

routes展示所有的路由，基本就是vue-router中routes的可視化展示。

手抓手帶你使用 vue devtools

5、Performance

performance可以幫助我們分析頁面跟組件的渲染情況，它有兩個功能Frames per second、Component render。

Frames per second(fps)：瀏覽器每秒渲染多少幀，即每秒渲染多少次頁面。藍色柱體越高代表fps越高，代表頁面越流暢。它同時可以記錄引起頁面渲染的原因，例如M、E、R。 M：mutation E：events R：routes

Component render可以記錄組件的渲染時間，注意這個時間是累加的，例如這個組件渲染了兩次，那渲染時間是這兩次的總時長。 同時也可以看到組件內(nèi)每個生命周期鉤子的執(zhí)行時長。

6、Settings

Normalize component name：Components面板組件名字顯示風格，origin name原始組件名，Pascal case大駝峰，Kebab case中橫線。

Editable props：是否支持props屬性可編輯，默認情況下components面板內(nèi)的props屬性不可編輯。

New Vuex backend：是否讓Vuex面板單獨在后臺運行，更快且更少的內(nèi)存占用。

Theme：主題。 Time Format -> Display milliseconds：時間格式顯示到毫秒，目前未看到在哪體現(xiàn)。 Atuoload Vuex state：是否自動加載vuex state，目前未看到效果。