[译] 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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。