运行时调试技巧分享

日志输出别乱打，分级管理才高效

写代码最怕的就是程序跑着跑着出问题，却不知道从哪查起。很多人第一反应是狂打 console.log，但信息一多就变成“大海捞针”。建议按日志级别分类：info、warn、error 分开输出，上线时还能通过配置关闭低级别日志。

function debug(level, msg) {
  if (level === 'error') {
    console.error('[ERROR]', new Date().toISOString(), msg);
  } else if (level === 'warn') {
    console.warn('[WARN]', new Date().toISOString(), msg);
  } else {
    console.log('[INFO]', new Date().toISOString(), msg);
  }
}

debug('error', '用户登录失败，token无效');

利用断点调试，别只靠眼睛看

浏览器和 IDE 都自带调试工具，比如 Chrome DevTools 或 VS Code 的调试器。设置断点后，程序运行到指定位置会暂停，你可以查看当前变量值、调用栈，甚至临时修改变量测试逻辑。遇到循环里数据不对，直接在 for 语句加断点，一步步走一遍比打印十次都快。

条件断点更省事

不是每次都要停，比如某个数组在第 100 次循环才出问题。右键断点选“编辑断点”，输入条件如 i === 99，程序只在满足时停下，省得手动点几十次继续。

监控网络请求，接口问题一目了然

前端调接口拿不到数据？打开 Network 面板，筛选 XHR 请求，看状态码是不是 401 或 500。响应内容可以直接预览，还能复制为 curl 命令去终端重放。有时候后端返回了错误信息，但前端没处理，这时候一看就知道错在哪。

动态修改内存变量，现场验证修复思路

调试时发现某个变量值错了，不想重启服务？可以在断点暂停时，在控制台直接改它。比如 user.role = 'admin'，然后继续执行，看看流程能不能走通。这招适合验证临时补丁，避免反复启停服务浪费时间。

善用性能分析工具，卡顿问题轻松定位

页面突然卡住？用 Performance 面板录一段操作，结束后看火焰图。如果某段 JS 占了大块时间，基本就是性能瓶颈。曾经遇到一个列表渲染慢的问题，一录发现是某个递归函数没设退出条件，无限执行了。

异常捕获加上报，线上问题也能追

用户报错说页面白屏，本地又复现不了？可以在入口处监听全局异常：

window.addEventListener('error', function(e) {
  const errorData = {
    message: e.message,
    url: e.filename,
    line: e.lineno,
    column: e.colno,
    stack: e.error?.stack
  };
  navigator.sendBeacon('/api/log-error', JSON.stringify(errorData));
});

这样哪怕用户关掉页面，错误日志也能发出来，配合 sourcemap 还能还原压缩前的代码行。