当弹出窗口加载时如何调试JavaScript?

21

如何调试弹出窗口中运行的JavaScript代码是最有效的方式?具体来说,我需要追踪页面加载时发生的情况。

这是为在LMS中运行的SCORM 1.2课程而设计的,它依赖于父窗口中的其他JavaScript对象,因此仅调试弹出窗口本身是行不通的。

尽管大部分时间我都在调试这些课程,但我可以使用其他上下文中的技术。

我可以使用浏览器内调试器中的选项,使其在执行弹出页面的第一行JavaScript时暂停,就像我设置了断点一样。 (直到页面开始后,我无法或至少不知道如何设置断点)

编辑:

debugger;语句可以工作,但仅适用于我控制的代码。 我有时需要跟踪在某个弹出窗口打开时运行的JavaScript,但由于代码已经运行,因此无法添加断点。


同样的问题和 SCORM 情况!如果 window.open() 调用给新窗口一个 "名称",那么它将针对该标签/窗口,如果它已经存在。你只需要先获取一个匹配名称的标签/窗口并开启 devtools,然后再通过打开窗口的步骤即可。 - Chris Walsh
7个回答

17
你可以施展魔法。
debugger;

在您的JavaScript代码中随意插入debugger;语句(我知道的每个调试器都会自动设置断点在该行上)。

如果这也无法帮助,我会只是“在新窗口/标签页中打开该页面”,然后自己设置断点或使用debugger;


1
我可以在我的特定情况下做到这一点,因为第一个运行的东西是我控制的,但我经常需要跟踪我无法修改的脚本。我想要的效果是在弹出窗口命中的第一行代码处设置断点,但是当我启动调试器时,它已经运行了,我无法逐步执行。 - Dan Novak
@DanNovak:好的,你所需要做的就是拦截/保留你所控制的最后一个JavaScript代码行。在第三方脚本启动之前这样做(我其实在想如果你没有访问权限那么调试有什么意义...但不管怎样)。 - jAndy
1
两件事:(1)我在代码中加入了调试器,但当文件是弹出窗口的一部分时,它就无法正常工作。 (2)有时候调试你无法访问的代码是必要的,特别是当你需要告诉客户问题明显在他们的代码内部,而不是你能控制的。 - Seanonymous
6
以上解决方案无法生效,因为弹出窗口在调试器控制台未运行的情况下启动。因此,debugger; 命令会被忽略。 - user959690

6

6

补充 @jAndy 的回答,我发现 Fiddler 的 AutoResponder 是一种有效的方法,可以在你无法控制代码的情况下,插入 debugger; 语句或其他有用的调用。

步骤如下:

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

现在,浏览器将加载该文件的本地版本而不是网站的版本。可能还有其他方法可以在浏览器中使用本地文件替换远程 URL(例如,Charles 有类似于 AutoResponder 的功能,Proxomitron 也可能有,我不知道是否有浏览器插件可以做到这一点,但诸如 Greasemonkey 等工具也可能有效)。


2
在Chrome中:加载弹出窗口,在其仍在加载时,使其聚焦,快速按下F12(打开开发者工具),然后按下F8。

不幸的是,它不能与Chrome扩展弹出窗口一起使用。 - Pavel Sapehin

1
在Chrome中,您可以在脚本结尾添加// @sourceURL=myScriptName.js,然后在弹出窗口中加载到Chrome的检查工具的Sources选项卡中。
请参阅调试JavaScript
此外,如果您正在使用ASP.NET MVC,则可以在*.cshtml文件中的脚本结尾处添加@{Write("//@ sourceURL=myScriptName.js");}

Chrome Inspect


这非常有帮助,因为通常情况下即使您检查弹出窗口的HTML,JS文件也是隐藏的。谢谢! - hypers

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) 

0
我建议通过console函数将信息输出到控制台。然后,您可以在调试工具(如Firefox的Firebug或Chrome内置的调试工具)中查看此信息。或者,您也可以始终使用alert进行调试。
或许我没有完全理解您的问题……

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接