[[419810]]

Vue3 已經(jīng)出來了， Vue3 Devtools 正式版也快出來了，目前我們在用的是 beta 版本，現(xiàn)在我們來看看 Vue3 Devtoolls 有哪些新的功能。

安裝

打開谷應(yīng)用商店，搜索 vue devtools，選擇 beat 的標識安裝，如下所示：

注意，在使用 Vue3 devtools 時，要把 Vue2 devtools 的關(guān)掉，以免造成混淆。

第一步完成，如果商店打開不了的，自行百度，方法反正你們肯定比我多。

開始使用

安裝完成了，我們打開控制臺就有一個 Vue 的 tab，如果下所示：

multi-app (多應(yīng)用視圖)

多應(yīng)用視圖，意思就是我們可以查看多個應(yīng)用，比如我在項目中添加多個 createApp 如下所示：

import { createApp } from 'vue' 
import App from './App.vue' 
import App2 from './App2.vue' 
import App3 from './App3.vue' 
 
createApp(App).mount('#app') 
createApp(App2).mount('#app1') 
createApp(App3).mount('#app2') 

控制臺打開查看:

在有多個Vue應(yīng)用程序的瀏覽器頁面中，可以在它們之間快速交換，并有能力檢查在iframe內(nèi)的Vue應(yīng)用程序。

inspector tab (檢查器選項卡)

我們可以通過檢查器查看每個組件的狀態(tài)，這個檢查器就是羅盤狀的圖標。

組件操作圖標

當選擇一個組件時，會看到右上方有一組三個不同的圖標。

第一個眼睛的圖標的表示 Scroll to component。當點擊這個圖標時，瀏覽器將會滾動到組件所在的位置。

第二個 <> 表示的是 Show render code。當點擊這個圖標時，可以看到當前組件的Render函數(shù)。

最后，帶有<的漢堡包圖標表示檢查DOM。點擊它時，就會顯示組件也表示 Dom 的位置。

多根組件

你可能已經(jīng)注意到了，在我們組件旁邊有些小標簽，如下所示：

首先可以看到有 fragment 標記，它表示多根組件，啥是多根，直接看我們FragmentComponent.vue 的內(nèi)容：

<template> 
  <div>Fragment1</div> 
  <div>Fragment2</div> 
</template> 

多根就是沒有像 Vue2 一樣，只有一個根元素，不能多個。

性能指示

除了多根組件的標識，我們還可以看到一些數(shù)字的標識：

當我們的組件因為其渲染速度慢而表現(xiàn)不佳時，它就會顯示出來，告訴我們哪些組件耗時比較嚴重。

如上圖所示，當你把鼠標懸停在它上面時，可以看到有更多信息提示。

路由指示器

除了多根和性能指示器外，還有一個路由指示器：

這個新特性在快速查看 links 的設(shè)置很方便。但奇怪的是，這個特性并不是由 Vue tools 本身直接添加的，而是由Vue Router 添加的.

插件

新的Vue dev-tools 還有一個很重要的功能就是它完全可以與外部插件集成。我們可以很方便的查看使用到的插件信息。

我們事例的項目，已經(jīng)使用兩個庫：Vuex和 Vue Router，點擊 Components 下拉，就可以看到這兩兄弟：

點擊其它中就會看到該插件的自定義視圖。例如，Vue Router面板向我們展示了當前可用的路由列表。

Timeline

在檢查器的旁邊，我們還可以看到這個：

這個就是 Timeline，我們先叫它時間線吧。

當你第一次打開它的時候(如果你還沒有接觸過你的應(yīng)用程序的話)，你會看到一個空白的中央?yún)^(qū)域，左邊有彩色的項目符號。

每個顏色編碼的通道都將顯示應(yīng)用程序?qū)崟r觸發(fā)的事件的時間軸。

例如，我們點擊一個路由的時候，下面的點會出現(xiàn)在實際時間線的右側(cè)。

這乍一看好像沒啥軟用，但這些小點里裝著很多信息。

如果我點擊其中一個紫色的 Mouse 事件，在最右邊的第三個面板顯示以下信息。

不僅我的點擊事件被注冊，而且我的 mouseup 和 mousedown 事件也包含了點擊。我們甚至可以獲得鼠標事件捕獲的 x 和 y 坐標。

藍色的圈表示路由的信息，點擊藍色的圈就可以看到路由的詳細信息。如下所示：

組件事件也會顯示完整的有效載荷信息。例如，像這樣一個簡單按鈕的點擊事件。

<button @click="$emit('customEvent', { some: 'data' })">Click me</button> 

如果你覺得面板展示太多選項，有點暈，我們可以點擊右上角的來關(guān)掉一些我們不想的：

在編輯器中打開

當在檢查器中選擇你的一個自定義組件時，如果我們想它具體的定義，還可以直接在編輯器中打開

如果單擊此按鈕，編輯器將打開該文件對應(yīng)的文件!