前端控制台黑魔法：两行代码让调试效率提升 5 倍
——console.table & console.time 实战指南
为什么你还在手写调试代码？
大多数前端同学调试接口时，仍停留在
const res = await fetch('/api/users')
console.log(res) // 打印出一坨 Object
然后眯着眼在折叠面板里找字段；性能测试时，又祭出
const start = Date.now()
await doHeavyTask()
console.log(Date.now() - start)
这些做法不是不行，而是太慢、太脏、太不优雅。
今天，用 2 个被低估的 console API，把调试时间从分钟级压到秒级。
黑魔法 1：console.table —— 接口秒变可排序表格
一行代码
console.table(await fetch('/api/users').then(r => r.json()))
效果
Chrome DevTools 直接渲染成如下表格，可点击表头排序、可过滤、可导出 CSV（右键 → Save as）。
| (index) | id | name | age | city |
|---|---|---|---|---|
| 0 | 1 | Alice | 23 | Beijing |
| 1 | 2 | Bob | 29 | Shanghai |
| 2 | 3 | Carol | 31 | Shenzhen |
进阶技巧
- 只展示部分列
console.table(users, ['name', 'city'])
- 打印 Map / Set
console.table(new Map([['a', 1], ['b', 2]]))
黑魔法 2：console.time / console.timeEnd —— 毫秒级精准计时
一行开始，一行结束
console.time('api')
await fetch('/api/users')
console.timeEnd('api') // api: 127.200 ms
特性
- 可嵌套：
console.time('outer')
console.time('inner')
await step1()
console.timeEnd('inner')
await step2()
console.timeEnd('outer')
- 多段并行：
console.time('A'); console.time('B')
await Promise.all([taskA().then(() => console.timeEnd('A')),
taskB().then(() => console.timeEnd('B'))])
- 与 Performance API 对比
console.time 精度到 0.1 ms，且无需打开 Performance 面板，零干扰测试。
实战场景合集
| 场景 | 黑魔法代码 |
|---|---|
| 检查多级菜单权限树 | console.table(perms, ['id', 'parentId', 'name']) |
| 比较 3 种排序算法耗时 | console.time('quick'); quickSort(arr); console.timeEnd('quick') |
| 查看 React hooks 列表 | console.table(hooks) |
| 批量验证正则 | console.table(testCases.map(t => ({input: t, ok: re.test(t)}))) |
总结 & 彩蛋
- 把
console.table和console.time/timeEnd加入代码片段，设置 VS Code 快捷键，调试效率立刻 +400%。 - DevTools 还有一个隐藏指令：在 Console 输入
getEventListeners($0)可直接查看 DOM 节点绑定的事件。
下次调试别再写 console.log('data', data)，试试这两行黑魔法，你会回来点赞的。
