JS调试：告别满屏的console.log

满屏的 console.log(data) 根本没法在复杂逻辑里定位问题，尤其是处理嵌套深的对象数组时，在控制台翻找哪个 log 对应哪个变量简直是浪费时间。

其实浏览器原生提供的调试手段比打印日志强太多，分享几个我最近在实战中高频使用的替代方案，能快不少。

一、 强制暂停与断点

与其到处写 log，不如直接在代码里插一个 debugger。

function calculateTotal(items) {
  debugger; // 运行到这里浏览器会自动暂停
  return items.reduce((sum, item) => sum + item.price, 0);
}

执行到这一行时，浏览器会直接进入暂停状态。这时候可以在 Sources 面板里直接看当前作用域的所有变量，甚至能单步执行，比盯着控制台看打印结果要直观得多。

二、 提高数据可读性的技巧

处理 API 返回的列表数据时，console.log 出来的对象展开起来很麻烦，建议换成 console.table。

// 别用 console.log(users);
console.table(users);

这样会直接出一个表格，字段对齐，一眼就能看出哪条数据的某个属性出错了。

另外，如果日志太多太乱，可以用 console.group 把相关的日志打包。

console.group("用户登录流程");
console.log("验证凭据中...");
console.log("加载用户信息...");
console.groupEnd();

三、 性能量化

想知道某个异步请求或复杂计算到底卡了多久，不需要自己写 new Date() 算差值，直接用自带的计时器：

console.time("fetchData");
await fetchData();
console.timeEnd("fetchData");

四、 习惯养成

很多时候报错了习惯性先去搜，其实仔细看一眼 Error Stack 就能定位到具体文件和行号。另外，部署前记得清理那些 console.log("HERE") 之类的垃圾代码，不然生产环境的控制台太脏，影响排查真正的问题。