是否可以在不使用断点的情况下使用 Firebug 停止 javascript？答案

【问题标题】：Is it possible to stop a javascript with Firebug without using breakpoints?是否可以在不使用断点的情况下使用 Firebug 停止 javascript？
【发布时间】：2010-04-13 16:22:49
【问题描述】：

Firebug 是否可以通过按下按钮或键盘快捷键来停止 javascript，而不是通过设置断点来停止它？

我为什么要这样做？我们有一个非常动态的网站，里面有很多动画。如果我可以在动画正在做我想要检查的事情时停止脚本，那将是一个很大的帮助。这比摆弄断点要快得多。

【问题讨论】：

标签： javascript debugging firebug

【解决方案1】：

我就是这样做的，从 Web 控制台（不是暂存器）运行：

window.addEventListener("keydown", function() {debugger;})

然后返回调试器选项卡。当你聚焦文档并按下某个键时，浏览器会暂停 JS。

【讨论】：

嗯，不错 :-/ ...顺便说一句，它只是 javascript，所以它可以通过多种方式使用（注入），而不仅仅是从控制台，对吧？谢谢。
当然可以，但是您必须在与文档相同的 javascript 上下文中，这就是暂存器无法工作的原因。不过，您绝对可以将它包含在文档本身的 javascript 中。

【解决方案2】：

Firebug 中有一个暂停按钮。单击它就是您要查找的内容。

【讨论】：

标有“中断所有错误”的暂停按钮？不是这样的。
@matt，至少它可以快速分析。解决方案对我来说已经足够好了。 +1

【解决方案3】：

Firebug 有不同的方法来停止脚本执行，而无需在特定行设置断点。这些选项称为Break On features。

在您的情况下，我看到两个相关选项：

在下一个执行行中断 JavaScript
Script 面板有一个 Break On Next 按钮 ()，它允许您在下一个执行的 JavaScript 语句处停止脚本执行。此功能也可以通过键盘快捷键Ctrl+Alt+B来启用。

所以，只要动画到达您想要检查它的位置，只需点击键盘快捷键即可。
打破 HTML 突变
HTML 面板有一个 Break On Mutate 按钮 ()，它允许您在下一次 HTML 突变时停止脚本执行。
还有更细粒度的选项可以在特定元素的突变处停止，这些选项在元素的上下文菜单中可用。这些选项是：
- 属性更改中断：当元素的属性被添加、更改或删除时停止脚本执行。
- Break On Child Addition or Removal：在添加或删除子节点时停止脚本执行。
- Break On Element Removal：当元素本身被移除时停止脚本执行。
在您的情况下，Break On Attribute Change 可能是正确的选择，以防动画更改元素的 style 属性内的 CSS。

【讨论】：

感谢您的两个选择，我会尽我所能找到我喜欢的方式。我必须调试一些 javascript 脚本并想知道我会遭受多少痛苦:-) 谢谢。
请注意，这些选项仅适用于 Firebug 和 development of Firebug is unfortunately discontinued in favor of the Firefox DevTools（以及 Firebug 的 Script panel is already broken in Firefox 50）。尽管 DevTools 仍然缺少第二个选项（HTML 突变中断）。此功能在bug 1004678 中请求。

【解决方案4】：

如果你知道它在哪里做你想要检查的事情，那么断点有什么问题？此外，您可以在代码中使用 debugger 关键字，也可以在代码中注入 console.log/debug/warn/info 语句。（您可以为那些没有控制台对象的环境存根）。

【讨论】：

【解决方案5】：

根据您的描述，我猜您的代码中的 javascript 控制台日志记录可能对您有最大的帮助。查看http://getfirebug.com/wiki/index.php/Console_API。

【讨论】：

【解决方案6】：

根据您使用的动画库，可能有一个“停止所有动画”方法 - 例如jQuery's .stop()。你是如何处理动画的？

【讨论】：

【解决方案7】：

如果你使用 web 开发者插件，你可以禁止所有的 java 脚本在页面上运行，然后使用 firebug。

【讨论】：

哇。'chrispederick.com/work/web-developer' 现在我可以通过大量的 CSS 更新对我的 JS 代码进行故障排除，看看到底发生了什么。此页面上的大多数其他解决方案都无法让我到达那里。当 JS 在脚本中“停止”时，您无法检查 CSS。 @Marty 谢谢。
这不会停止当前页面的脚本执行。它只会在下一页完全重新加载时禁用 JavaScript，这无助于检查特定点的动画。

【解决方案8】：

解决此问题的最佳方法是转到 HTML 下拉菜单，该下拉菜单位于 firebug 中的 HTML 选项卡旁边。取消选择“突出显示更改”和“滚动更改以查看”，这应该允许您检查正在执行的 html 和 css 代码。我希望你们也想这样做。

【讨论】：

【解决方案9】：

如果网站不断地从您的服务器重新加载内容，您可以切换到“网络”窗格。那里的上下文菜单有一个“Break on XHR”条目，选中该条目后，它将在脚本尝试获取新内容时停止。

【讨论】：

【解决方案10】：

最简单的方法是安装 firefox 扩展“PrefBar”。在那里您可以添加一个复选框“JavaScript”。如果你停用它，javascript 就会停止。

【讨论】：

嗯...你怎么能安装一个 Firefox 扩展，但无法阅读和理解问题...？ :-)。停止意味着运行然后停止，而不是“停用”。提问者的目标是能够按需暂停-停止，而无需设置断点:-)