断点调试是什么：程序员天天用却未必讲得清的那件事

你在改一段文档生成脚本，运行后页面空白，控制台没报错，数据也看着正常——可就是少了一行标题。这时候你大概率会加个 console.log，再跑一遍；发现不对，再加一个；再跑……直到眼花缭乱，日志堆满屏幕。

其实，你本可以“暂停”程序

断点调试，说白了，就是让代码在你指定的地方“踩一脚刹车”，停住不往下走，然后让你亲手翻看此刻变量的值、函数的调用路径、DOM 的状态——就像把程序按帧播放，一帧一帧查问题。

它不是玄学工具，也不是 IDE 专属功能。主流浏览器（Chrome/Firefox/Edge）按 F12 打开开发者工具，切到「Sources」或「调试器」标签页，在某行代码左侧灰色边栏单击一下，那个红点就是断点。刷新页面，执行到这一行时，自动暂停，时间仿佛凝固。

举个文档排版里的真实例子

假设你用 JavaScript 动态生成一份会议纪要 HTML：

function renderMinutes(data) {
  const title = data.title || '未命名会议';
  const items = data.items || [];
  let html = `<h1>${title}</h1>`;
  items.forEach(item => {
    html += `<p>● ${item.text}</p>`;
  });
  document.getElementById('output').innerHTML = html;
}

结果渲染出来标题总是空的。你在第 2 行 const title = data.title || '未命名会议'; 左侧打个断点，刷新——程序停住，鼠标悬停在 data 上，立刻看到它是个空对象 {}；再点开看 data.title，显示 undefined。问题当场定位：上游数据没传过来，不是模板逻辑的问题。

比起反复改 console.log、删删改改再刷新，断点让你一次看清上下文，省掉七次重试。

它不只用于查错。写文档转换工具时，你想确认某段 Markdown 解析后是否正确生成了嵌套列表，也可以在解析函数返回前设断点，直接 inspect 输出的 AST 对象结构。这比靠猜和日志拼凑更稳、更快、更安静。