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

Colafornia發表於2019-02-26
Vuedev

幾天前，Vue devtools 釋出了重大更新。讓我們來看看有哪些新特性與改進！?

可編輯的元件 data

現在可以直接在元件檢查皮膚中修改元件的 data 了。

  1. 選中一個元件
  2. 在檢查器的 data 部分下，將滑鼠移到你要修改的欄位上
  3. 點選鉛筆圖示
  4. 通過點選完成圖示或者敲擊Enter鍵來提交你的改動。也可以通過敲擊 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 開啟的情況下，可以右鍵單擊一個元件進行檢查：

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

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

也可以通過特殊的方法 $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” 圖示才能滾動到該元件：

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

點選眼睛圖示來滾動到元件。

檢視將滾動到元件居中於螢幕的位置。

可摺疊的檢查器

現在不同檢查器的各部分是可以被摺疊的。你可以用鍵盤修改鍵來將它們都摺疊，或者通過滑鼠單擊將它們都展開。假設你只專注於 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章