Vue Devtools 4.0 新特性几天前，Vue devtools发布了一个重大更新，本文将会深入介绍它的新特性以

几天前，Vue devtools发布了一个重大更新，本文将会深入介绍它的新特性以及改进。

如果你已经安装了这个插件，它应该自动更新到4.0.1版本。若你还未安装，你可以选择在Chrome浏览器上安装，或者在Firefox浏览器上安装。

可编辑组件数据

你现在可以直接在组件检查区修改组件的数据：

选中一个组件
在data检查区，将鼠标移动到你想修改的区域
点击铅笔图标
点击完成图标或者敲击Enter键，将会提交你的更改。敲击ESC键将会取消更改

待提交的数据内容应该为序列化的JSON数值。比如，如果你想输入一个字符串，应该使用双引号 "hello" 。数组应该像这样 [1,2,"bar"] ，对象应该像这样 {"a":1,"b":"foo"} 。

目前，下面类型的值可以被编辑：

null 和 undefined
String
Boolean，Number，Infinity，-Infinity 和 NaN
Arrays
Plain objects

对于数组和纯对象，你可以点击增加或者删除图标，来新增或者删除子项。你也可以重命名对象的键名。

若输入的内容不合法，你将会看到一个警告。但是为了方便，一些值如 undefined 或者 NaN 可以直接输入。

在以后的版本中将会支持更多的类型。

快速编辑

某些类型的值可以通过简单的单击就可以实现编辑。

比如布尔类型的值，可直接通过点击多选框图标进行切换。

可以通过点击加号或者减号图标，对数字进行加或者减。

你也可以使用键盘组合键快速地进行加法或者减法。

在编辑器中打开组件

如果你在项目中正在使用 vue-loader 或者 Nuxt ，现在，你可以在代码编辑器中打开选中的组件。

先遵循这个安装指导（如果你正在使用 Nuxt ，可以忽略这一步）
在组件检查区，将鼠标移动到组件名称上——你应该可以看到一个文件路径的提示
点击组件的名称，你的编辑器将会打开它

显示原始组件名称

默认情况下，所有组件的名称都会被格式化成驼峰式大小写。你可以在Components标签，通过切换“Format component names”按钮，来开启或者关闭这个默认行为。这个设置会被记住（当你重新打开Vue Devtools时，仍然是上一次的设置），也会被应用到Events标签中。

更容易检查组件

当你打开Vue devtools时，你可以在组件上右击，对这个组件进行检查。

你也可以以编程的方式检查某个组件，只需要使用特殊方法 $inspect ：

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

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

无论使用上述哪一种方法，组件树将会自动展开，定位到最近选择的组件。

通过组件过滤事件

现在，你可以通过组件过滤事件的历史记录，只需要输入<，后面紧跟组件完整的或者部分的名称。

Vuex 过滤器

现在，在Vuex检查区，会有一个用来过滤的输入框。

垂直布局

当Vue Devtools没有足够的宽度时，会自动切换为适合使用的垂直布局。在垂直模式下，你仍然可以像默认的水平模式（水平模式分为左右窗格）一样，移动顶部和底部窗格之间的分割线。

改善“滚动到组件”行为

默认情况下，选中某个组件不会让视图滚动到组件的位置。作为替代，你需要点击新增的 “Scroll into view” 图标。

这将会让组件在屏幕中居中显示。

可折叠检查器

现在，各个检查器的区域可以被折叠。你也可以使用键盘组合键一次性地将他们全部折叠或者全部展开。比如说，当你只对Vuex标签下mutations的细节感兴趣时，这将会很有用。

关于Vue Devtools 4.0的更多介绍请移步原文

What’s new in Vue Devtools 4.0medium.com

Vue Devtools 4.0 新特性