在谷歌浏览器中调试时如何终止脚本执行？

Posted 2023-02-22

【中文标题】在谷歌浏览器中调试时如何终止脚本执行？

【英文标题】：How to terminate script execution when debugging in Google Chrome?

【发布时间】：2012-10-19 12:58:15

【问题描述】：

在 Google Chrome 调试器中单步执行 javascript 代码时，如果我不想继续，如何终止脚本执行？我发现的唯一方法是关闭浏览器窗口。

按“重新加载此页面”会运行其余代码，甚至可以像按 F8“继续”一样提交表单。

更新：

在脚本暂停时按 F5（刷新）：

Google Chrome (v22) 运行脚本。如果脚本提交 HTTP 请求，则会显示该请求的 HTTP 响应。原始页面未刷新。 IE 9 只是冻结。但是 IE 有一个“停止调试”选项，当按下它时（前提是您之前没有按 F5），它会继续在调试器之外运行脚本。 Firebug 的行为与 Chrome 相同。

关闭然后再次打开浏览器窗口并不总是最简单的方法 因为它会杀死浏览器会话状态，这可能很重要。您的所有断点也会丢失。

更新（2014 年 1 月）：

调试时刷新：

Chrome v31：允许脚本在更多断点处运行和停止（但不提交 ajax 请求），然后刷新。 IE 11：刷新不执行任何操作，但您可以按 F5 继续。 Firefox v26：允许脚本运行但不会在更多断点处停止，提交 ajax 请求，然后刷新。

有点进步！

调试时导航到同一页面：

Chrome v31：与刷新相同。 IE 11：脚本终止，新的浏览器会话开始（与关闭和再次打开相同）。 Firefox v26：没有任何反应。

juacala 还提出了一个有效的解决方法。例如，如果您使用 jQuery，从控制台运行 delete $ 将在遇到任何 jQuery 方法时停止执行。我已经在上述所有浏览器中进行了测试，可以确认它可以正常工作。

更新（2015 年 3 月）：

最后，经过 2 年多和近 1 万次浏览，Alexander K 给出了正确答案。谷歌浏览器有自己的任务管理器，它可以杀死一个标签进程而不用关闭标签本身，保持所有断点和其他东西都完好无损。

我什至跑到 BrowserStack.com 在 Chrome v22 中对其进行测试，发现即使在当时也是如此。

在 IE 或 Firefox 中调试时，Juacala 的解决方法仍然有用。

更新（2019 年 1 月）：

Chrome 开发工具最后添加了一种停止脚本执行的正确方法，这很好（虽然有点隐藏）。有关详细信息，请参阅 James Gentes 的回答。

【问题讨论】：

在开发工具控制台中输入debugger;，它会立即将内容放入调试器并停止脚本。

James Gentes 的回答似乎是 2019 年更好的解决方案

为什么大家都在谈论停止脚本？这是关于终止/破坏所有“跟随/计划”的代码。

同意 Andre：对于希望终止当前执行 Javascript 而不会丢失窗口的人 - 下面的 Dan Dascalescu 给出了答案。

@Jake 你拯救了我的一天...简单但直接...非常感谢...

【参考方案1】：

在 Chrome 中，有“任务管理器”，可通过 Shift+ESC 或通过

访问

菜单 → 更多工具 → 任务管理器

您可以选择您的页面任务并按“结束进程”按钮结束它。

【讨论】：

chrome 48这只会关闭开发工具，不会终止它，重新打开它，你可以看到程序仍在运行（tried setInterval()）

我在“更多工具”下看不到“任务管理器”，而 shift+esc 什么也不做...（Chrome 50、OSX）虽然 Shift+ESC 在 Chrome/Windows 下工作...

哇——我想要这个很久了，而且它已经存在很多年了！这是我一年来见过的最有用的 *** 答案！

在 Macintosh (Chrome v.63) 上，此选项显示在“窗口”菜单的第三组中。没有明显的键盘快捷键。

这会杀死标签

【参考方案2】：

截至April 2018, you can stop infinite loops in Chrome：

在开发者工具中打开Sources面板（Ctrl+Shift+I**）。李> 点击暂停按钮暂停脚本执行。

还要注意快捷键：F8和Ctrl+\

【讨论】：

UI 上隐藏的宝石。

回答者有一把打开宇宙秘密的钥匙。

当您有一个无休止运行的脚本想要停止以检查控制台时，该快捷方式特别有用。谢谢。

@DanDascalescu 我有 Chrome 80.0.3987.149，它看起来一样

在我的情况下，即使用 requestAnimationFrame()，Chrome 会继续工作，因此无论脚本是否暂停，CPU 使用率都是 100%。

【参考方案3】：

2020 年 4 月更新

从 Chrome 80 开始，当前的答案都不起作用。没有可见的“暂停”按钮 - 您需要长按“播放”按钮才能访问停止图标：

【讨论】：

感谢上帝！对 OP 问题的真正回答。

@user1023110：我不了解上帝，但不客气 :)

我没有看到停止图标

@SuperUberDuper 你必须按下播放/暂停键，等待下拉菜单出现，然后拖动光标停止图标，然后释放。

我希望我能多次投票！这是对 OP 问题的真正答案，至少在 Chrome 再次更新并[重新]移动此功能之前...

【参考方案4】：

您可以这样做的一种方法是暂停脚本，查看您当前停止的位置后面的代码，例如：

var something = somethingElse.blah;

在控制台中，执行以下操作：

delete somethingElse;

然后播放脚本：尝试访问somethingElse时会出现致命错误，脚本会死掉。瞧，你已经终止了脚本。

编辑：最初，我删除了一个变量。这还不够好。您必须删除 JavaScript 尝试访问其属性的函数或对象。

【讨论】：

you have to delete a function or an object 真是个讨厌的黑客！ （在 UI 中，它很适合作为 kill all 按钮）

这很恶心，但我想不出别的办法。

一年后我又回到了同样的问题……我想不通！有没有办法让它更通用？

你不知道如何终止脚本执行？我一直都能做到这一点。您是否有一个不允许您以这种方式杀死脚本的示例？

@Hashim，您需要能够在函数内放置断点。因此，请确保函数内部与函数定义位于不同的行上。在您的情况下，您需要在控制台中，一旦暂停，输入“document.getElementById('see_older').parentNode.removeChild(document.getElementById('see_older'));”。这是因为您在 javascript 中没有任何东西可以破解。不幸的是，这也改变了 html。如果您可以将代码更改为“var el = document.getElementById('see_older');\n el.getEl...”，那么您可以执行“delete el;”这将阻止它。

【参考方案5】：

如果您在使用debugger 语句时遇到这种情况，

debugger;

...然后我认为页面将继续运行直到 js 运行时产生或下一次中断。假设您处于错误中断模式（暂停图标切换），您可以通过执行以下操作来确保发生中断：

debugger;throw 1;

或者调用一个不存在的函数：

debugger;z();

（当然，如果您尝试单步执行函数，这无济于事，但也许您可以在 Sources 面板中动态添加 throw 1 或 z() 或类似内容，按 ctrl-S 保存，然后ctrl-R 刷新...但是，这可能会跳过一个断点，但如果您处于循环中，则可能会起作用。）

如果您正在执行循环并希望再次触发 debugger 语句，则可以直接键入 throw 1。

throw 1;

然后当你按下 ctrl-R 时，下一个 throw 就会被命中，页面会刷新。

（使用 Chrome v38 测试，大约 2017 年 4 月）

【参考方案6】：

参考@scottndecker 对下面question 的回答，chrome 现在在开发者工具下提供了“禁用 JavaScript”选项：

右上角垂直... 设置 在“首选项”下，转到最底部的“调试器”部分并选择“禁用 JavaScript”

好消息是您可以通过选中/取消选中它来停止并再次重新运行。

【讨论】：

如果你因为在开发者工具菜单和 Chrome 菜单之间感到困惑而投了反对票，那非常可悲:(

对我不起作用。我选中了禁用 JavaScript 框，但脚本仍在运行。

【参考方案7】：

这是个好问题。我认为您不能终止脚本执行。虽然我从来没有找过，但我在工作中使用 chrome 调试器已经很长时间了。我通常在我的 javascript 代码中设置断点，然后调试我感兴趣的代码部分。当我完成调试该代码时，我通常只运行程序的其余部分或刷新浏览器。

如果您想阻止脚本的其余部分被执行（例如，由于将要进行 AJAX 调用）您唯一能做的就是在控制台中删除该代码 - fly，从而阻止这些调用被执行，那么你可以毫无问题地执行剩余的代码。

我希望这会有所帮助！

P.S：我试图在以下一些教程/指南中找到终止执行的选项，但找不到。正如我之前所说，可能没有这样的选择。

http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C

http://www.nsbasic.com/app/tutorials/TT10.htm

【讨论】：

我帮忙了吗？似乎没有终止选项，但是为了防止执行以下代码，您可以在之前对其进行注释或删除以下代码/在 Chrome 调试器中调用“live”（后一个选项将使继续按钮表现得像一个终止）。我知道它们不是理想的解决方案，但我认为它们是最容易接受的。有cmets吗？

在许多情况下，需要阻止执行的代码位于调用堆栈（当前函数返回后将获得控制权的函数）。当然，我可以在调用堆栈中向上编辑函数，然后找到并编辑所有可能被异步调用的函数。我敢肯定，如果在按下“页面刷新”按钮时它被暂停，浏览器刷新页面而脚本仍处于暂停状态肯定是一件微不足道的事情。我也认为这应该是任何浏览器的预期行为（不幸的是，它不是）。

其实我找到了一种解决方法来实现脚本执行的终止！：在chrome中，我打开调试器来调试我的一个应用程序并设置了一个断点。我运行页面。执行在断点处暂停。然后我检查问题并了解导致错误的原因。 要终止执行 我单击 URL 旁边的 X 按钮（停止页面加载），然后在继续执行脚本 (F8) 时它将终止。我认为，实现它的方法相当简单。你觉得这个怎么样？

Chrome 中的 X 按钮在页面加载后被刷新按钮替换，因此之后无法按 X（我也在 IE 中尝试过，它一直都有可用的 X，但是它总是冻结）。我还在页面加载期间测试了您的建议，发现按 X 和 F8 后脚本没有终止。很可能在按下 X 时尚未加载到浏览器中的脚本之后没有加载，但这应该很明显。

哦，你是对的，这是一个快速测试，没有代表性......然后似乎没有解决方案。

【参考方案8】：

您可以暂停任何我认为在调试此类场景时非常有用的 XHR 模式。

例如，我在包含“/”的 URL 模式上给出了断点

【参考方案9】：

如果您有恶意循环，请暂停 Google Chrome 调试器中的代码（源标签中的“||”小按钮）。

切换回 Chrome 本身，打开“任务管理器”（Shift+ESC），选择您的选项卡，单击“结束进程”按钮。

您将收到 Aww Snap 消息，然后您可以重新加载 (F5)。

正如其他人所指出的，在暂停点重新加载页面与重新启动流氓循环相同，如果调试器随后也锁定（在某些情况下会导致重新启动 chrome 甚至 PC ）。调试器需要一个“停止”按钮。 Nb：接受的答案已经过时，因为它的某些方面现在显然是错误的。如果你投票给我，请解释一下:)。

【讨论】：

有一个better way。

【参考方案10】：

在“开发人员工具”中打开源代码选项卡，单击正在运行的脚本中的行号，这将创建一个断点，调试器将在那里中断。

【参考方案11】：

本文上面提到的这个问题有很多合适的解决方案，但我发现了一个小技巧，可以插入到脚本中或粘贴到 Chrome 控制台（调试器）中来实现它：

jQuery(window).keydown(function(e)  if (e.keyCode == 123) debugger; );

这将导致在您点击F12 时暂停执行。

【讨论】：

如果你（希望）不使用 jQuery 怎么办？

然后使用纯Javascript，比如document.addEveneListner..来获取keydown事件..