如何用 console.table 在浏览器控制台直观地打印对象数组数据-js教程-PHP中文网

console.table比console.log更适合查看数组对象，因其自动提取公共key为列头、对齐成可排序表格，便于横向比对字段差异；而console.log以折叠结构显示，展开繁琐且易串行。

如何用 console.table 在浏览器控制台直观地打印对象数组数据

console.table 为什么比 console.log 更适合看数组对象

因为 console.table 会自动提取每个对象的公共 key 作为列头，把值对齐成表格，一眼就能横向比对字段差异；而 console.log 打印数组对象时是折叠结构，展开后还得手动点开每个项，尤其字段多、数据量稍大（比如 10+ 条）就容易看串行。

它原生支持浏览器控制台（Chrome、Edge、Firefox 均可），无需引入任何库，但注意 Safari 目前只支持基础表格显示（不支持嵌套对象展开、自定义列等高级特性）。

怎么让 console.table 只显示关心的字段

传入第二个参数——一个字符串数组，指定要展示的 key 列。这个参数不是过滤数据，只是控制列显隐：

const users = [
  { id: 1, name: 'Alice', email: 'a@b.com', role: 'admin' },
  { id: 2, name: 'Bob',   email: 'b@c.com', role: 'user' }
];
console.table(users, ['name', 'role']); // 只显示 name 和 role 两列

常见误用：console.table(users, ['name']) 写成 console.table(users.name) —— 后者会报 undefined，因为 users.name 是 undefined，不是数组。

字段名必须完全匹配对象属性名（区分大小写）
如果某个对象没有该字段，对应单元格显示 undefined
不支持点号路径（如 ['profile.age'] 不生效，嵌套字段需先扁平化）

遇到嵌套对象或数组时 console.table 显示不全怎么办

console.table 对第一层属性友好，但遇到 { user: { name: 'Alice' } } 这类结构，默认只显示 [object Object]，无法展开查看内容。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

解决办法是预先映射成扁平结构：

const nestedData = [
  { id: 1, profile: { name: 'Alice', city: 'Beijing' } },
  { id: 2, profile: { name: 'Bob',   city: 'Shanghai' } }
];
const flattened = nestedData.map(item => ({
  id: item.id,
  name: item.profile.name,
  city: item.profile.city
}));
console.table(flattened);

注意：不要试图用 JSON.stringify 后再打印——那只会变成一整列字符串，失去表格意义。