軟件介紹

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

Vue Devtools安裝教程

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

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

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

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

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

Vue Devtools使用教程

只有當(dāng)Vue.config.devtools === true時(shí)才可使用devtools。

1、components面板

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

同時(shí)，data屬性是可以編輯的，編輯后頁面也會(huì)實(shí)時(shí)改變

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

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

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

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

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

2、Vuex面板

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

同時(shí)你可以篩選mutation與state

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

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

3、Events面板

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

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

4、Routing面板

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

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

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

手抓手帶你使用 vue devtools

5、Performance

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

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

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

6、Settings

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

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

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

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