如何利用 Custom Formatter 在 Chrome 控制台中实现对复杂业务对象的结构化展示-js教程-PHP中文网

Chrome控制台需手动启用Custom Formatters功能并使用Symbol.for('console.formatter')定义格式化函数，返回含header和bodyGetter的对象，实现订单等复杂对象的结构化折叠展示。

如何利用 custom formatter 在 chrome 控制台中实现对复杂业务对象的结构化展示

Chrome 控制台本身不支持直接注册自定义 formatter（如 Node.js 的 util.inspect.custom），但可通过 Chrome DevTools 的「Console」设置中启用 Custom formatters 功能，配合特定格式的 console 输出，实现对复杂业务对象的结构化、可读性更强的展示。

开启 Custom Formatters 支持

该功能默认关闭，需手动启用：

打开 Chrome DevTools（F12 或 Cmd+Opt+I）
点击右上角 ⋮ → Settings → Console → Enable custom formatters
勾选后重启控制台（或刷新页面）生效

编写符合规范的 formatter 函数

Custom formatters 是挂载在对象上的特殊方法，名称必须为 [console.formatter]（Symbol 形式），且返回一个可被 DevTools 解析的格式化描述对象。它不是普通字符串拼接，而是通过结构化字段控制渲染样式与内容。

函数需返回一个包含 header 和 hasBody（可选）、bodyGetter（可选）的对象
header 是一个数组，每个元素为 {type: 'string'|'number'|'object', value: ...}，决定折叠行显示内容
bodyGetter 是一个函数，返回展开后的内容（同样为格式化数组），用于展示嵌套细节
必须使用 Symbol.for('console.formatter') 作为键名，不能用字符串或 Symbol() 随机生成

实际示例：格式化订单对象

假设你有一个含用户、地址、商品列表的订单对象，希望在控制台中以分组方式清晰呈现：

const order = {
  id: 'ORD-2026-789',
  status: 'shipped',
  user: { name: '张三', email: 'zhang@example.com' },
  address: { city: '上海', district: '浦东新区' },
  items: [
    { sku: 'A1001', name: '无线耳机', qty: 2 },
    { sku: 'B2005', name: '充电线', qty: 1 }
  ],
  [Symbol.for('console.formatter')]: function () {
    return {
      header: [
        { type: 'string', value: '? Order' },
        { type: 'string', value: this.id },
        { type: 'string', value: `(${this.status})` }
      ],
      hasBody: true,
      bodyGetter: () => [
        { type: 'string', value: '? User:' },
        { type: 'object', value: this.user },
        { type: 'string', value: '? Address:' },
        { type: 'object', value: this.address },
        { type: 'string', value: '? Items:' },
        { type: 'object', value: this.items }
      ]
    };
  }
};

console.log(order); // 在启用了 Custom formatters 的控制台中，会显示为可折叠的结构化视图