til 技巧：在 Chrome DevTools 控制台用 console.table() 美化打印表格数据

在 Chrome DevTools 控制台里直接查看大段日志数据往往很痛苦：对象被折叠、字段排列杂乱，肉眼很难快速比对。本指南介绍控制台内置的 console.table() 方法，它能把「对象数组」或「二维数组」自动格式化成带表头的可读表格，帮你快速定位数据问题。读完本文，你将掌握 console.table() 的完整用法、列筛选技巧，以及它与 copy()、全局变量等控制台工具组合使用的实战方案。

为什么需要 console.table()

在调试前端页面时，最常见的操作就是把数据打印到控制台：

console.log(response.users)

当 response.users 是一个包含几十个对象的数组时，控制台会折叠显示，你必须逐个展开对象才能看清每个字段。数据量一大，肉眼很难横向对比各条记录的差异。而 pretty-print-tabular-data.md 记录的正是解决这一痛点的官方内置方法：console.table()。只要把数据传给它，Chrome 就会以「表格」形式渲染输出——每行一条记录、每个属性一列，配合表头一目了然。

基础用法：数组输入

console.table() 最典型的输入是「对象数组」和「二维数组」，Chrome 会自动为它们生成列头与索引列。

对象数组

原文档给出的最小示例：

console.table([{one: 1, two: 2, three: 3}])

控制台会渲染出一个三列表格，第一列是 (index)（即数组下标），后面每列对应对象的每个键（one、two、three），第一行数据为 1、2、3。多条记录会依次排列成多行，方便纵向对比：

const users = [
  { name: "Tom", age: 28, city: "Beijing" },
  { name: "Amy", age: 32, city: "Shanghai" },
];
console.table(users)

输出表格的列会自动取对象键的并集——即使某条记录缺少某个字段，对应单元格也会保留位置。

二维数组

当数据本身是「数组的数组」（例如从 CSV、表格或矩阵计算中得到的行式数据）时，同样可以直接传入：

console.table([
  [1, 2, 3],
  [4, 5, 6],
])

此时表格的列头自动命名为 0、1、2（对应内层数组的下标），第一列依旧是外层数组的 (index)。这非常适合快速浏览结构化但无字段名的数据。

键值对象输入

除了数组，console.table() 也接受普通对象。传入一个「键值对对象」时，会渲染成两列表格：第一列 (index) 显示键名，第二列显示对应的值：

console.table({ one: 1, two: 2, three: 3 })

这种用法适合查看扁平配置对象、统计计数等键值型数据，比 console.log 打印出的折行键值更易读。

按需取列：第二个参数 columns

console.table() 还支持第二个可选参数——一个字符串数组，用于指定「只显示哪些列」。这在对象字段很多、而你只关心其中几列时非常实用：

console.table(users, ["name", "city"])

上面的调用只会渲染 name 与 city 两列（外加 (index) 列），age 等无关字段被隐藏，表格瞬间清爽。使用时注意：列名必须与对象键完全一致（大小写敏感），且只能引用对象顶层存在的键；对二维数组输入同样可指定列下标。

数据形态与边界行为

了解 console.table() 的边界行为，能避免在实际调试中踩坑：

• 只渲染顶层属性：嵌套在记录内部的对象或数组不会继续展开成列，而是在单元格中折叠显示为 Object { ... } 或 Array(...)，需要时仍可点击展开查看详情。
• 键集合取并集：多条对象记录的键不一致时，表格列头取所有键的并集，缺失的字段留空。
• 大数据的渲染截断：当记录数量非常多时，Chrome 只渲染一部分行并在表格下方提示剩余行数，不会一次性把所有数据都铺开。
• 排序交互：渲染出的表格支持点击列头排序，方便对某一字段快速做升序/降序比对。

实战场景：调试 API 响应数据

console.table() 最常见的实战场景是调试接口返回的数据。配合仓库中记录的另外两个控制台技巧，可以组成一套完整的数据检查流程：

1. 保存日志数据：右键点击控制台中已打印的值，选择 Store as Global Variable，Chrome 会将其重新赋值为 temp1、temp2……依次递增的全局变量，详见 access-a-value-logged-to-the-console.md。
2. 表格化查看：拿到 temp1 后直接执行 console.table(temp1)，瞬间把整份数据变成可读表格。
3. 复制分享：确认数据无误后，用 copy(temp1) 把整个对象写入系统剪贴板，粘贴到文档或聊天工具中即可，详见 copy-some-data-from-the-console.md。

一个连贯的示例：

// 假设 Network 面板里抓到接口响应，右键日志 → Store as Global Variable
// 得到全局变量 temp1，然后：
console.table(temp1, ["id", "status", "created_at"])
copy(temp1)

这样既看清了数据结构，又把原始数据完整复制出来，比手动逐个展开对象高效得多。

注意事项与适用范围

• 何时该用 console.table()：数据是多条同构记录（对象数组、二维数组）时，表格化最有价值；如果是单个复杂嵌套对象，console.dir() 或直接 console.log() 的结构化展示往往更合适。
• 性能考量：超大数组会触发渲染截断，若只是确认「数据存在与否」，先用 console.log 抽样或打印 length 更轻量；需要全量分析时建议在代码里先做切片再传入 console.table()。
• 环境支持：这是浏览器与 Node.js 环境通用的控制台标准方法，本仓库文档记录的是其在 Chrome DevTools 中的原生表现，无需任何额外依赖或插件。