如何调试javascript作为弹出窗口加载？

Question

调试在弹出窗口中运行的JavaScript代码的最有效方法是什么？具体来说，我需要跟踪页面加载时发生的情况。

这适用于在LMS中运行的SCORM 1.2课程，它依赖于父窗口中的其他JavaScript对象，因此调试弹出窗口本身不起作用。

虽然我的大部分时间都在调试这些课程，但我可以将技术用于其他环境。

我可以在浏览器中调试器中使用类似于选项的东西，该选项会暂停执行弹出页面的第一行JavaScript，就像我在那里放置一个断点一样。 （我不能，或者至少不知道如何在页面开始之后设置断点）

修改

debugger;语句有效，但仅适用于我控制的代码。我有时需要跟踪在某些弹出窗口打开时运行的JavaScript，并且因为代码已经运行而无法添加断点。

Answer 1

你可以把魔法

debugger;

在javascript代码中的任何地方声明（我知道的每个调试器都会通过在该行自动设置断点来暂停）。

如果这也没有帮助，我只是“在新窗口/标签页中打开该页面”并自行设置断点或使用debugger;

Answer 2

扩展@ jAndy的答案，我发现Fiddler的AutoResponder是一种有效的方法，可以在你无法控制的代码中输入debugger;语句或其他有用的调用。

类似的东西：

1. 在开始之前清除缓存。
2. 运行网站，允许加载您要使用的所有文件。
3. 确定您要篡改的请求，例如您要调试的JavaScript文件。
4. 将该会话从Fiddler导出到本地文件。
5. 编辑本地文件以添加debugger;语句或其他任何内容。
6. 返回fiddler，再次选择请求，然后选择AutoResponder选项卡。
7. 选择“添加规则”，默认情况下会为该确切的网址创建新规则。
8. 在底部的组合框中，选择查找文件..然后浏览到您篡改的文件。
9. 确保选中“启用自动回复”和“不匹配的请求直通”。
10. 在浏览器中再次清除缓存，然后重新启动您尝试调试的网站或网页。

现在，浏览器将加载文件的本地版本而不是网站。可能还有其他方法可以在浏览器中替换本地文件中的远程URL（Charles也有类似AutoResponder和Proxomitron的东西，我不知道是否有一个浏览器插件可以做到这一点，但像Greasemonkey这样的东西也可能工作）。

Answer 3

在Chrome中：加载弹出窗口，当它仍在加载时，将其聚焦，快速按F12（打开开发人员工具），然后按F8。

Answer 4

从2016年开始，Chrome浏览器现在在ChromeDevTools设置中将此选项作为选项

https://twitter.com/chromedevtools/status/697993811696291842?lang=en

Answer 5

我建议通过console功能将信息输出到控制台。然后，您可以在调试工具中查看此信息，例如Firebug for Firefox或Chrome中内置的调试工具。或者，您始终可以使用alert进行调试。

或许我对你的问题不了解......

Answer 6

在Chrome中，您可以将// @sourceURL=myScriptName.js附加到脚本的末尾，然后在弹出窗口打开时将其加载到Chrome的“检查”中的Sources标签中。

请参阅Debugging JavaScript

此外，如果您使用的是ASP.NET MVC，则可以附加@{Write("//@ sourceURL=myScriptName.js");}以及*.cshtml文件中的脚本。