大家好，我是前端宝哥。Vue Devtools 4.0 版本带来了一系列激动人心的新特性和改进，让我们一起来探索这些更新亮点！
宝哥省流版：
🛠 直接编辑组件数据，实时预览变更效果。
⚙️ 快速编辑功能，一键切换布尔值，增减数字。
🖊️ 支持在代码编辑器中直接打开组件，开发更便捷。
🔍 组件名称显示优化，事件过滤功能，让追踪更精准。
📚 垂直布局和可折叠检查器，界面更清爽，操作更高效。
组件数据直接编辑
现在，你可以直接在组件检查器面板中修改组件的数据了：
选择一个组件
在检查器的
data部分，鼠标悬停在字段上点击铅笔图标
通过点击完成图标或按 Enter 提交更改，或者按 Escape 取消编辑
字段内容是序列化的 JSON 值。例如，输入字符串时，需要用双引号 "hello"。数组格式如 [1, 2, "bar"]，对象格式如 { "a": 1, "b": "foo" }。
目前支持编辑的类型包括：
null和undefinedString字面量：
Boolean、Number、Infinity、-Infinity和NaN数组
普通对象
对于数组和普通对象，你可以使用专门的图标添加和删除项目，甚至可以重命名对象的键。
如果输入的 JSON 无效，会显示警告。不过，像 undefined 或 NaN 这样的值可以直接输入，更加方便。
未来版本将支持更多类型！
快速编辑
使用“快速编辑”功能，一些类型的值可以单击编辑：
布尔值可以通过复选框图标直接切换
数字可以通过加号或减号图标增加或减少
可以使用键盘快捷键更快地增加或减少值
在编辑器中打开组件
如果你的项目中使用了 vue-loader 或 Nuxt，现在可以在你喜欢的代码编辑器中打开选定的组件（前提是单文件组件）：
按照设置指南操作（如果使用 Nuxt，则无需任何操作）
在组件检查器中，鼠标悬停在组件名称上 —— 你会看到一个带有文件路径的工具提示
点击组件名称，它将在编辑器中打开
显示原始组件名称
通过 manico 的 PR，所有组件名称默认格式化为 CamelCase。你可以通过在组件标签中切换“格式化组件名称”按钮来禁用此功能。此设置将被记住，并且也会应用于事件标签。
检查组件变得更简单
当你打开 Vue 开发工具时，可以右键单击页面中的组件进行检查：
也可以使用组件中的 $inspect 特殊方法进行编程检查：
<template>
<div>
<button @click="inspect">Inspect me!</button>
</div>
</template>
<script>
export default {
methods: {
inspect () {
this.$inspect()
}
}
}
</script>无论哪种方式，组件树都会自动展开到新选定的组件。
按组件过滤事件
通过 eigan 的 PR，现在可以通过触发事件的组件来过滤事件历史。输入 < 后跟组件名称或其一部分：
Vuex 检查器过滤
通过 bartlomieju 的 PR，Vuex 检查器现在有一个过滤输入框：
垂直布局
通过 crswll 的 PR，当开发工具不够宽时，它们现在会切换到方便的垂直布局。你可以像默认水平模式一样，在顶部和底部面板之间移动分隔符。
改进滚动到组件
默认情况下，选择组件将不再滚动视图到它。相反，你需要点击新的“滚动到视图”图标：
现在它将在屏幕上居中显示组件。
可折叠检查器
不同检查器的各个部分现在可以折叠。你可以使用键盘快捷键一键折叠或展开它们。如果你只对 Vuex 标签中的突变细节感兴趣，这非常有用。
还有更多！
如果环境没有此功能，“检查 DOM”按钮现在将被隐藏 —— 由 michalsnik 提供
现在支持
-Infinity—— 由 David-Desmaisons 提供事件钩子的问题已由 maxushuang 修复
一些代码已由 anteriovieira 清理
Date, RegExp, Component 支持改进（现在时间旅行应该可以与这些类型一起使用）
开发工具现在使用 v-tooltip 用于丰富的工具提示和弹出窗口（也修复了一些错误）
如果你已经有这个扩展，它应该会自动更新到 4.0.1。你也可以在 Chrome 和 Firefox 上安装它。
往期推荐
Vue 单页面应用中，不要在 onMount 里添加事件监听器！
38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集
Vapor Mode：Vue.js 的速度与激情，代码界的闪电侠
最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。
关注我，明天见！
以上，如果本文对你有所启发，欢迎点“
在看、点赞”支持下吧！
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
