摘要
本文将介绍如何开启浏览器devtools的Enable Custom Formatters功能，以获得更加简洁和易读的命令行输出。
1. 背景
Vue.js的响应式系统为前端开发者提供了强大的数据绑定和状态管理功能。然而，在开发过程中，当涉及到大型或深层次的响应式数据对象时，通过devtools命令行查看这些数据的输出可能显得混乱。
为了解决这个问题我们要用到浏览器的Enable Custom Formatters的设置，Enable Custom Formatters是一个功能强大的选项，允许开发者自定义在Devtools中展示的数据格式。开启后的效果
2. 如何开启 Custom Formatters
Edge浏览器中：
- 打开DevTools：
-
- 右键单击您的网页并选择“检查”。
- 在DevTools中导航到“Console”选项卡。
- 打开设置：
-
- 点击DevTools右上角的齿轮图标（设置）。
- 导航到首选项：
-
- 在设置菜单中，转到“首选项”选项卡。
- 启用自定义对象格式化器：
-
- 查找与“自定义格式化器”或“对象格式化”相关的选项。
- 启用或切换选项以激活自定义格式化器。
chrome浏览器中：
- 打开DevTools：
-
- 右键单击您的网页并选择“检查”。
- 在DevTools中导航到“Console”选项卡。
- 打开设置：
-
- 点击DevTools右上角的齿轮图标（设置）。
- 导航到首选项：
-
- 在设置菜单中，转到“首选项（preference）”选项卡。
- 启用自定义对象格式化器：
-
- 寻找console类别。
- 启用或切换选项以激活自定义格式化器。
3. 自定义输出格式
一旦开启了Custom Formatters，就已经可以看到vue框架自带的数据处理显示效果了。但是你自己也可以通过以下步骤自定义你的输出格式来决定字符串和数字有不同的颜色，数组获得一个小预览，甚至还有一个图标可以让你展开它们来查看项目的完整列表，等等。
3.1 编写自定义格式化程序
自定义对象格式化不是在 DevTools 中配置的。相反，它们是在网页上运行的代码中定义它们，然后 DevTools 会自动提取它们。所以我们要编写一个格式化程序，该函数将负责将你的数据对象转换为更加易读的格式。这个函数应该返回一个包含格式化后数据的对象。
创建一个具有三个属性的新对象: header、 hasBody 和 body。所有三个属性都应该是接收对象参数(DevTools 想要显示的对象)的函数。Header 函数应该以 JsonML 格式返回对象的预览。HasBody 应该返回一个布尔值，告诉 DevTools 是否可以展开该对象以显示更多信息。并且 body 在展开时应该返回对象的预览，也是 JsonML 格式。例如:
const myCoolFormatter = {
header: function(object) {
if (!(object instanceof ColorCombo)) {
return null;
}
return ["div", {style: `background-color: ${object.color1}; color: ${object.color2}; font-weight: bold; padding: .25rem;`}, "ColorCombo"]
},
hasBody: function(object) {
return object instanceof ColorCombo;
},
body: function(object) {
if (!(object instanceof ColorCombo)) {
return null;
}
3.2 注册格式化程序
将您的格式化程序对象追加到全局 window.devtoolsFormatter 数组:
// You can create a new array.
window.devtoolsFormatters = [myCoolFormatter];
// Or append to the list of existing formatters.
window.devtoolsFormatters.push(myCoolFormatter)
;
4. 示例
就这样，你不需要再做什么了。现在，只要 ColorCombo 对象在 DevTools 中显示(例如，当使用 console.log (object)时) ，就会使用您定义的自定义格式化程序来显示它们。
class ColorCombo {
constructor(color1, color2) {
this.color1 = color1;
this.color2 = color2;
}
}
效果如下
