探索 Vue Devtools 4.0 的新世界！

大家好，我是前端宝哥。Vue Devtools 4.0 版本带来了一系列激动人心的新特性和改进，让我们一起来探索这些更新亮点！

宝哥省流版：

• 🛠 直接编辑组件数据，实时预览变更效果。

• ⚙️ 快速编辑功能，一键切换布尔值，增减数字。

• 🖊️ 支持在代码编辑器中直接打开组件，开发更便捷。

• 🔍 组件名称显示优化，事件过滤功能，让追踪更精准。

• 📚 垂直布局和可折叠检查器，界面更清爽，操作更高效。

组件数据直接编辑

现在，你可以直接在组件检查器面板中修改组件的数据了：

1. 选择一个组件

2. 在检查器的 data 部分，鼠标悬停在字段上

3. 点击铅笔图标

4. 通过点击完成图标或按 Enter 提交更改，或者按 Escape 取消编辑

image.png

字段内容是序列化的 JSON 值。例如，输入字符串时，需要用双引号 "hello"。数组格式如 [1, 2, "bar"]，对象格式如 { "a": 1, "b": "foo" }。

目前支持编辑的类型包括：

• null 和 undefined

• String

• 字面量：Boolean、Number、Infinity、-Infinity 和 NaN

• 数组

• 普通对象

对于数组和普通对象，你可以使用专门的图标添加和删除项目，甚至可以重命名对象的键。

image.png

如果输入的 JSON 无效，会显示警告。不过，像 undefined 或 NaN 这样的值可以直接输入，更加方便。

未来版本将支持更多类型！

快速编辑

image.png

使用“快速编辑”功能，一些类型的值可以单击编辑：

• 布尔值可以通过复选框图标直接切换

• 数字可以通过加号或减号图标增加或减少

• 可以使用键盘快捷键更快地增加或减少值

在编辑器中打开组件

image.png

如果你的项目中使用了 vue-loader 或 Nuxt，现在可以在你喜欢的代码编辑器中打开选定的组件（前提是单文件组件）：

1. 按照设置指南操作（如果使用 Nuxt，则无需任何操作）

2. 在组件检查器中，鼠标悬停在组件名称上 —— 你会看到一个带有文件路径的工具提示

3. 点击组件名称，它将在编辑器中打开

显示原始组件名称

通过 manico 的 PR，所有组件名称默认格式化为 CamelCase。你可以通过在组件标签中切换“格式化组件名称”按钮来禁用此功能。此设置将被记住，并且也会应用于事件标签。

image.png

检查组件变得更简单

当你打开 Vue 开发工具时，可以右键单击页面中的组件进行检查：

右键单击组件图示

也可以使用组件中的 $inspect 特殊方法进行编程检查：

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

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

无论哪种方式，组件树都会自动展开到新选定的组件。

按组件过滤事件

通过 eigan 的 PR，现在可以通过触发事件的组件来过滤事件历史。输入 < 后跟组件名称或其一部分：

image.png

Vuex 检查器过滤

通过 bartlomieju 的 PR，Vuex 检查器现在有一个过滤输入框：

image.png

垂直布局

通过 crswll 的 PR，当开发工具不够宽时，它们现在会切换到方便的垂直布局。你可以像默认水平模式一样，在顶部和底部面板之间移动分隔符。

image.png

改进滚动到组件

默认情况下，选择组件将不再滚动视图到它。相反，你需要点击新的“滚动到视图”图标：

点击眼睛图标滚动到组件

现在它将在屏幕上居中显示组件。

可折叠检查器

不同检查器的各个部分现在可以折叠。你可以使用键盘快捷键一键折叠或展开它们。如果你只对 Vuex 标签中的突变细节感兴趣，这非常有用。

image.png

还有更多！

• 如果环境没有此功能，“检查 DOM”按钮现在将被隐藏 —— 由 michalsnik 提供

• 现在支持 -Infinity —— 由 David-Desmaisons 提供

• 事件钩子的问题已由 maxushuang 修复

• 一些代码已由 anteriovieira 清理

• Date, RegExp, Component 支持改进（现在时间旅行应该可以与这些类型一起使用）

• 开发工具现在使用 v-tooltip 用于丰富的工具提示和弹出窗口（也修复了一些错误）

如果你已经有这个扩展，它应该会自动更新到 4.0.1。你也可以在 Chrome 和 Firefox 上安装它。

---

往期推荐

Vue.js表单开发宝藏工具集，让构建表单变得轻松又酷炫！

尤雨溪：Vue.js 十周年回顾与展望

Vue 单页面应用中，不要在 onMount 里添加事件监听器！

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

Vue 如何处理异步组件加载错误

Vapor Mode：Vue.js 的速度与激情，代码界的闪电侠

Vue 3 响应式状态揭秘：ref() 函数的魔法

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注我，明天见！

以上，如果本文对你有所启发，欢迎点“在看、点赞”支持下吧！