console custom formatters（自定义格式转换器）

[dcharlie123]

Chrome Custom Formatter 允许开发者自定义 JavaScript 对象在 Chrome DevTools Console 中的展示方式。

首先要开启Custom Formatter

1. 按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Opt + I（Mac）以进入 Chrome Developer Tools
2. 在 Developer Tools 中，按下 F1 键或点击右上角的齿轮图标，进入设置页面。
3. 前往 Preferences → Console
4. 勾选 "Enable custom formatters" 选项
5. 重新加载网页

编写自定义格式化函数

formatter包含三个方法：

• header — 处理如何展示在 console 的日志中的主要部分。
• hasbody — 如果你想显示一个用来展开对象的箭头，返回 true
• body - 定义将会被显示在展开部分的内容中。

function formatVueObject(obj) {
   // 编写你的自定义格式化逻辑，使对象更易读
   // 例如，你可以提取关键信息或按照特定规则格式化输出
   return formattedObject;
 }
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];
 }

参考文章：

• https://blog.csdn.net/weixin_33985679/article/details/87943400
• https://www.freesion.com/article/19231111136/
• https://mp.weixin.qq.com/s/0nYdADbVZauv5xoebQWEYA