在 Vue 开发过程中，我们经常需要在 console 中查看 reactive objects（如 ref、reactive）。然而，这些值的默认显示方式往往不够直观，给 Debug 带来挑战。本文将介绍如何利用 Chrome 的 custom formatters 功能，让这些对象在 console 中的显示更为清晰易懂。
问题
如下图所示，当我们在 Vue 应用中尝试打印 ref、reactive 或 shallowRef 时，常常会遇到打印出来的结果并不直观的情况，难以一眼辨认对象的类型和结构。
使用 Custom Formatter
Chrome Custom Formatter 允许开发者自定义 JavaScript 对象在 Chrome DevTools Console 中的展示方式。Vue 利用了这项功能，使得其 reactive objects 在 console 中以更易于理解的形式展示。
Vue 3 中启用 Custom Formatter
要在 Vue 3 中启用 Custom Formatter，你无需编写额外的代码或安装任何插件。只需按照以下步骤操作即可：
1、在 Chrome 中开启 Developer Tools
打开你的 Vue 3 应用，然后按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Opt + I（Mac）以进入 Chrome Developer Tools。
2、进入设置页面
在 Developer Tools 中，按下 F1 键或点击右上角的齿轮图标，进入设置页面。
3、前往 Preferences → Console
在设置页面中，选择 "Preferences" 选项卡，然后找到 "Console" 部分。
4、勾选 "Enable custom formatters" 选项
在 Console 部分，找到 "Enable custom formatters" 选项，并勾选它以启用自定义格式化函数。
编写自定义格式化函数
在你的 Vue 项目中，定义一个自定义格式化函数，例如：
function formatVueObject(obj) {
// 编写你的自定义格式化逻辑，使对象更易读
// 例如，你可以提取关键信息或按照特定规则格式化输出
return formattedObject;
}
注册格式化函数
在 Console 中执行以下代码注册你的自定义格式化函数：
const formatter = {
header: (obj) => {
// 判断对象是否是 Vue 对象，是则应用自定义格式化
if (obj.__v_isRef || obj.__v_isReactive || obj.__v_isReadonly) {
return ['div', {}, formatVueObject(obj)];
}
// 返回 undefined 表示不应用自定义格式化
return undefined;
},
};
if(window.devtoolsFormatters instanceof Array){
window.devtoolsFormatters.push(formatter);
}else{
window.devtoolsFormatters = [formatter];
}
这里的判断逻辑适用于 Vue 3。
5、重新加载网页
完成上述步骤后，重新加载你的网页。你可以使用 Ctrl + R（Windows/Linux）或 Cmd + R（Mac）来重新加载。
现在，Vue 3 应用中的 ref、reactive 或 shallowRef 对象在 Chrome Developer Tools Console 中将以更直观、易读的方式显示，无需额外的代码或插件即可享受 Custom Formatter 的优势。
备注：如果想在 Vue SFC Playground 中使用 Custom Formatter，需要由 PROD 切换成 DEV 模式。
原理解释
当 Vue 3 的 dev server 启动时，会执行 initCustomFormatter，这会将 Vue objects 在 DevTools 中以更加直观的方式显示，从而提升开发者的 debug 体验。
总结
使用 Custom Formatter 可以在开发过程中获得更清晰的数据展示，这对于开发 Vue 应用非常有帮助。然而，要注意的是，这种精简的输出同时隐藏了某些底层数据结构。因此，在进行涉及 Vue 内部机制的开发工作时，建议根据需要临时关闭相关设置。
