[譯] Vue Devtools 4.0 有哪些新內容

• 原文地址：What’s new in Vue Devtools 4.0
• 原文做者：Guillaume CHAU
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：MechanicianW
• 校對者：okaychen FateZeros

幾天前，Vue devtools 發佈了重大更新。讓咱們來看看有哪些新特性與改進！🎄

可編輯的組件 data

如今能夠直接在組件檢查面板中修改組件的 data 了。

1. 選中一個組件
2. 在檢查器的 data 部分下，將鼠標移到你要修改的字段上
3. 點擊鉛筆圖標
4. 經過點擊完成圖標或者敲擊回車鍵來提交你的改動。也能夠經過敲擊 ESC 鍵來取消編輯

點擊播放視頻

字段內容會被序列化爲 JSON 。舉個例子，若是你想輸入一個字符串，則打字輸入帶雙引號的 "hello"。數組則應該像 [1, 2, "bar"] ，對象則爲 { "a": 1, "b": "foo" } 。

目前能夠編輯如下幾種類型的值：

• null 和 undefined
• String
• 字面量： Boolean , Number , Infinity , -Infinity 和 NaN
• Arrays
• Plain objects

對於 Arrays 和 Plain objects，能夠經過專用圖標來增刪項。也能夠重命名對象的 key 名。

點擊播放視頻

若是輸入的不是有效的 JSON 則會顯示一條警告信息。然而，爲了更方便，一些像 undefined 或者 NaN 的值是能夠直接輸入的。

將來的新版本會支持更多類型的！

快速編輯

經過 「快速編輯」 功能能夠實現僅僅鼠標單擊一下，就能夠編輯一些類型的值了。

布爾值能夠直接經過複選框進行切換： 點擊播放視頻

數值能夠經過加號和減號圖標進行增減：

點擊播放視頻

使用鍵盤的修改鍵去進行增減會更快一些。

在編輯器中打開一個組件

若是項目中使用了 vue-loader 或 Nuxt 的話，如今你就能夠在你最喜歡的編輯器裏打開選定的組件（只要它是單文件組件）。

1. 按這份 設置指南 操做 （若是你使用的是 Nuxt，就什麼都不用作）
2. 在組件檢查器中，將鼠標移動到組件名上 —— 你會看到一個顯示文件路徑的提示框
3. 單擊組件名就會直接在編輯器中打開該組件了

點擊播放視頻

顯示原始的組件名

這一功能由 manico 提出的 PR 實現

默認狀況下，組件名都會被格式化爲駝峯形式。你能夠經過切換組件標籤下的 "Format component names" 按鈕來禁用這一功能。這個設置將被記住，它也將被應用到 Events 標籤頁中。

點擊播放視頻

檢查組件更容易

在 Vue devtools 開啓的狀況下，能夠右鍵單擊一個組件進行檢查：

在頁面中右鍵單擊一個組件

也能夠經過特殊的方法 $inspect 以編程的方式來檢查組件：

<template>
  <div>
    <button @click="inspect">Inspect me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    inspect () {
      this.$inspect()
    }
  }
}
</script>
複製代碼

在組件中使用 $inspect 方法。

不管以哪一種方式進行，組件樹都會自動擴展到新選擇的組件。

按組件過濾事件

這一功能由 eigan 提出的 PR 實現

如今你能夠按發出事件的組件來過濾歷史事件了。輸入 < 符號，後面跟着組件全名或組件名的一部分：

點擊播放視頻

Vuex 檢查器過濾功能

這一功能由 bartlomieju 提出的 PR 實現

Vuex 檢查器的輸入框如今有了過濾功能：

點擊播放視頻

垂直佈局

這一功能由 crswll 提出的 PR 實現

devtools 不夠寬時，將切換到更方便使用的垂直佈局。你能夠像水平模式下同樣，移動上下窗格間的分隔線。

點擊播放視頻

滾動到組件功能改進

默認狀況下，點擊組件將再也不自動滾動到該組件的視圖部分。相反，你須要點擊新的 "Scroll into view" 圖標才能滾動到該組件：

點擊眼睛圖標來滾動到組件。

視圖將滾動到組件居中於屏幕的位置。

可摺疊的檢查器

如今不一樣檢查器的各部分是能夠被摺疊的。你能夠用鍵盤修改鍵來將它們都摺疊，或者經過鼠標單擊將它們都展開。假設你只專一於 Vuex 標籤頁的 mutations 詳情的話，這就是一個很是有用的功能。

點擊播放視頻

以及更多

• 若是運行環境不支持這一功能的話，"Inspect DOM" 按鈕會被隱藏。 —— by michalsnik
• 支持 -Infinity —— by David-Desmaisons
• 事件鉤子的 issue 修復 —— maxushuang
• 代碼清理 —— by anteriovieira
• 改進了對 Date， RegExp， Component 的支持 （如今這些類型也能夠進行時間旅行了）
• devtools 如今使用 v-tooltip 實現更豐富的信息提示與彈出功能

若是你已經安裝了擴展，擴展應用將自動更新到 4.0.1 版本。你也能夠在 Chrome 和 Firefox 上安裝。

感謝全部的貢獻者們！是大家使得本次更新成爲可能！ 若是你發現任何問題或是有新的功能建議，請分享出來！

---

接下來會有什麼大動做？

具備更多功能特性的新版本即將發佈，如在頁面中直接選中組件（選色板風格）和一些 UI 改進。

咱們也有一些仍在進行中的工做，好比容許在任意環境（不單單是 Chrome 和 Firefox）進行 debug 的獨立 Vue devtools app，全新的路由標籤頁，以及對 Set 和 Map 類型支持的改進。

敬請關注！

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。