20

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

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

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

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

编辑：

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

4

7 回答 7

16

你可以把魔法

debugger;

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

如果这也没有帮助，我只需“在新窗口/选项卡中打开该页面”并自己设置断点或也使用debugger;

于 2012-10-02T18:24:00.633 回答
6

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

就像是：

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

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

于 2014-08-15T00:17:37.890 回答
6

自 2016 年起，Chrome 现在将其作为 ChromeDevTools 设置中的一个选项

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

于 2018-12-14T19:14:00.320 回答
2

在 Chrome 中：加载弹出窗口，当它还在加载时，让它集中，快速按 F12（打开开发者工具），然后按 F8。

于 2013-10-31T03:11:08.887 回答
1

在 Chrome 中，您可以附加// @sourceURL=myScriptName.js到脚本的末尾，然后在弹出窗口打开时加载到SourcesChrome 的检查中的选项卡中。

请参阅调试 JavaScript

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

铬检查

于 2016-01-21T10:09:05.793 回答
0

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

或者，也许我对你的问题有些不理解......

于 2012-10-02T18:22:58.823 回答
0

这是似乎对我有用的唯一方法：

  --- CONTEXT: CODE EDITOR ------
  1.) Put this line at the top of the .js file to be debugged (will cause breakpoint as soon as the file is opened by the browser):
      debugger;
  2.) Push the new code to the server.   
  
  --- CONTEXT: CHROME Browser ------
  1.) Close all the Chrome browser windows except 1 window, 1 tab
  2.) Close Chrome browser (Chrome / Quit)
  3.) From the COMMAND LINE in MAC... 
      /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
      (this will open Chrome and every window / tab that opens will open the debugger)
  4.) Open Chrome browser (1 window, 1 tab appears)
  5.) Enter link where the debugger line of code was added in step 1 
        (Debugger should stop on first line of Javascript content)
于 2022-03-01T21:24:40.940 回答