TIL 技巧：在 Chrome DevTools Sources 面板暂停 JavaScript，让失控的无限循环停下来

本篇技术指南讲解如何在页面被意外引入的无限循环卡死时，利用 Chrome DevTools 的 Sources（源代码） 面板一键暂停 JavaScript 执行，冻结住疯狂刷屏的日志现场。读完本文，你将掌握 F12 打开 DevTools、定位 Sources 面板、通过暂停按钮或 F8 快捷键中断循环，以及回到 Console 面板从容检查数据的完整操作路径。

场景还原：无限循环让页面彻底失控

在开发前端功能时，谁都可能不小心写出一段无限循环。典型症状是这样的：

• 你在某段 JavaScript 代码里引入了死循环（例如 while 条件永远为真、递归缺少退出分支）；
• 刷新页面后，浏览器既像挂起又像在不停循环，页面彻底无响应；
• 浏览器整体慢到爬行，标签页几乎无法操作。

如果你正打算通过 console.log 输出一些数据点来定位问题，会更头疼：由于无限循环的存在，日志在 Console 面板里以极快的速度飞驰而过，根本来不及看清任何一条内容。这时候最需要的就是让一切先停下来——暂停按钮正是为此而生。

第一步：确认 DevTools 已经打开，必要时按 F12

既然你已经盯着 Console 里的日志看，通常意味着 DevTools 已经处于打开状态。如果因为浏览器卡顿而关掉了它，直接按 F12 即可重新打开开发者工具。

DevTools 打开后，工作区底部（或侧边）会显示 Console 等面板，顶部则排列着 Elements、Console、Sources 等标签页。

第二步：定位 Sources 面板——JavaScript 调试工具的大本营

在 DevTools 顶部的标签栏中切换到 Sources 标签页。Sources 面板正是 Chrome 存放 JavaScript 调试工具的地方：这里能看到当前页面的所有脚本文件、断点列表、调用堆栈，以及一组调试控制按钮。

仓库中 chrome/trigger-commands-from-the-devtools-command-palette.md 还提到，DevTools 里的功能入口很多，如果不记得某个选项藏在哪，可以随时用 cmd+shift+p 呼出命令面板搜索。不过对于“暂停执行”这个高频操作，直接进 Sources 面板是最直观的。

第三步：两种方式暂停正在运行的 JavaScript

方式一：点击暂停按钮

进入 Sources 面板后，在顶部的调试控制按钮组（Debugger Controls）中找到暂停按钮。它通常是这一排按钮中的第一个，图标为两条竖线（⏸），与播放按钮相邻。点击它，正在执行的 JavaScript 会立刻被冻结。

方式二：按 F8 快捷键

更快捷的方式是键盘操作：只要 Sources 标签页处于焦点状态，直接按 F8 即可触发与点击暂停按钮完全相同的动作，暂停当前脚本执行。

无论用哪种方式，暂停后页面从“飞速刷屏”瞬间进入静止状态，无限循环被冻结在正在执行的那一帧。

暂停之后：回到 Console 从容检查现场

暂停只是第一步，目的不是让循环消失，而是把现场冻结住以便排查。暂停后你可以切回 Console 面板慢慢查看：

• 之前被日志刷屏淹没的输出，现在一条条安静地陈列在那里，可以逐条阅读；
• 也可以在 Console 中手动执行表达式、查看当前作用域内的变量值，定位循环失控的真正原因。

结合仓库中的另一篇 TIL，暂停后想深入操作某个被打印出来的对象时，可以在 Console 里右键点击该日志值，选择 Store as Global Variable，它会被重新记录为 temp1 变量，你就能像操作普通变量一样读取它的属性、调用它的方法；多个值会依次命名为 temp2、temp3……详见 chrome/access-a-value-logged-to-the-console.md。

如果 Console 面板没有显示出来，也可以参考 chrome/toggle-open-the-console-drawer.md：在 DevTools 内按 Esc 键即可切换 Console 抽屉的开合。

从暂停到恢复：完整的调试节奏

暂停并非终点。排查完毕后，你通常还需要恢复执行或逐步推进：

• 再次点击同一个暂停按钮（此时它已变为继续/恢复按钮），或再次按 F8，脚本会从暂停处继续运行；
• 若想更精细地观察循环内部行为，可以借助调试控制按钮组中的单步跳过（Step Over）、单步进入（Step Into）、单步跳出（Step Out）等按钮逐行推进；
• 更稳妥的做法是先修复导致无限循环的代码，再刷新页面验证，避免反复暂停。

这套“暂停 → 检查 → 恢复/修复”的流程，配合 Console 的变量探查能力，能显著提升排查循环类 bug 的效率。

仓库中的相关 TIL 参考

如果你对本话题的周边技巧感兴趣，可以在本仓库（til，Today I Learned 系列）中继续阅读：

• chrome/pause-javascript-from-the-source-devtools-panel.md — 本文的原始出处，简洁记录了完整操作步骤；
• chrome/access-a-value-logged-to-the-console.md — 把 Console 中打印的对象存为全局变量 temp1 以便交互；
• chrome/toggle-open-the-console-drawer.md — 用 Esc 开关 Console 抽屉；
• chrome/trigger-commands-from-the-devtools-command-palette.md — 用 cmd+shift+p 命令面板快速执行 DevTools 功能。