如何在Chrome/Firefox DevTools中刷新页面时自动暂停脚本执行？

Chrome DevTools #

1. 页面启动前完全暂停（未执行任何脚本） #

• 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到Sources面板。
• 点击面板右上角的齿轮图标（设置），在左侧菜单选择「Debugger」，勾选「Pause on start」选项——这会让页面每次刷新时，在执行任何脚本前立刻暂停。
• 快捷操作：直接在Sources面板的调试控制栏（暂停、步进按钮组），点击最右侧的「更多选项」按钮，勾选「Pause on start」。

2. 精准暂停在脚本执行后、脚本执行前 #

如果需要卡在这个阶段，除了用上面的「Pause on start」后手动步进执行到结束，还可以用DOM断点实现：

• 切换到Elements面板，找到并选中<body>标签。
• 右键点击该标签，选择「Break on」→「Attribute modifications」，刷新页面后，DevTools会在<body>开始解析、但还没执行内部脚本时暂停。

Firefox DevTools #

1. 启动时自动暂停 #

• 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到调试器面板。
• 点击面板顶部的设置按钮（齿轮图标），勾选「在加载时暂停」选项。
• 快捷操作：点击调试控制栏的「暂停」按钮旁的下拉箭头，选择「在加载时暂停」，即可实现每次刷新都在脚本执行前暂停。

2. 精准到后前的暂停 #

和Chrome操作逻辑一致：

• 切换到检查器面板，选中<body>标签。
• 右键点击，选择「中断」→「子树修改」，刷新后会在内容开始加载、脚本未执行时暂停。

内容的提问来源于stack exchange，提问作者Estus Flask