如何在弹出窗口加载时调试 javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12695968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to debug javascript as a popup window loads?
提问by Dan Novak
What is the most effective way to debug JavaScript code that runs in a popup window? Specifically I need to trace what is happening as the page loads.
调试在弹出窗口中运行的 JavaScript 代码的最有效方法是什么？具体来说，我需要跟踪页面加载时发生的情况。
This is for SCORM 1.2 courses running in an LMS, which depends on other JavaScript objects in a parent window, so debugging the popup by itself won't work.
这是针对在 LMS 中运行的 SCORM 1.2 课程，它依赖于父窗口中的其他 JavaScript 对象，因此单独调试弹出窗口将不起作用。
I could use a technique for other contexts though most of my time is debugging these courses.
我可以在其他上下文中使用一种技术，尽管我的大部分时间都在调试这些课程。
I could use something like an option in the in-browser debugger that pauses on the first line of JavaScript that executes for a popup page, as if I put a breakpoint there. (I can't, or at least don't know how, to set breakpoints until well after the page has started)
我可以在浏览器内调试器中使用类似选项，它会在为弹出页面执行的 JavaScript 的第一行上暂停，就好像我在那里放置了一个断点一样。（我不能，或者至少不知道如何在页面启动之后设置断点）
Edit:
编辑：
The debugger;statement works, but only for code I control. I sometimes need to trace JavaScript that runs as some popup window opens, and can't add breakpoints because the code has already run.
该debugger;语句有效，但仅适用于我控制的代码。我有时需要跟踪在某些弹出窗口打开时运行的 JavaScript，并且无法添加断点，因为代码已经运行。
采纳答案by jAndy
You can put the magic
你可以把魔法
debugger;
statement anywhere into your javascript code (every debugger I know about will halt there by automatically setting a breakpoint at that line).
在您的 javascript 代码中的任何位置声明（我知道的每个调试器都会通过在该行自动设置断点来停止）。
If that doesn't help either, I'd just "open that page in a new window / tab" and setting up breakpoints myself or also using debugger;
如果这也没有帮助，我只是“在新窗口/标签中打开该页面”并自己设置断点或也使用 debugger;
回答by Dan Novak
Expanding on @jAndy's answer, I've found Fiddler's AutoResponder to be an effective way to put in debugger;statements or other useful calls in code you don't control.
扩展@jAndy 的回答，我发现 Fiddler 的 AutoResponder 是一种debugger;在您无法控制的代码中放入语句或其他有用调用的有效方法。
Something like:
就像是：
- Clear your cache before you start.
- Run the site, allowing all the files you want to work with to load.
- Identify a request you want to tamper with, e.g. a JavaScript file you want to debug.
- Export that session from Fiddler to a local file.
- Edit the local file to add
debugger;statements or whatever. - Back in fiddler, select the request again, then the AutoResponder tab.
- Select 'Add Rule', which will create a new Rule for that exact URL by default.
- In the combo box at the bottom, select Find a file.. then browse to the file you tampered with.
- Be sure "Enable automatic responses" and "Unmatched requests passthrough" up top are checked.
- Clear cache again in your browser, then restart the site or page you're trying to debug.
- 在开始之前清除缓存。
- 运行站点，允许加载您要使用的所有文件。
- 确定要篡改的请求，例如要调试的 JavaScript 文件。
- 将该会话从 Fiddler 导出到本地文件。
- 编辑本地文件以添加
debugger;语句或其他内容。 - 返回 fiddler，再次选择请求，然后选择 AutoResponder 选项卡。
- 选择“添加规则”，默认情况下将为该确切 URL 创建一个新规则。
- 在底部的组合框中，选择 Find a file.. 然后浏览到您篡改的文件。
- 确保选中顶部的“启用自动响应”和“不匹配的请求直通”。
- 在浏览器中再次清除缓存，然后重新启动您尝试调试的站点或页面。
Now, the browser will load the local version of the file instead of from the site. There may be other ways to substitute a local file for a remote URL in the browser (Charles has something like AutoResponder and Proxomitron may as well, I don't know if there's e.g. a browser addon to do that, but stuff like Greasemonkey may also work).
现在，浏览器将加载文件的本地版本，而不是从站点加载。可能还有其他方法可以在浏览器中用本地文件替换远程 URL（Charles 也有类似 AutoResponder 和 Proxomitron 的东西，我不知道是否有浏览器插件来做到这一点，但像 Greasemonkey 这样的东西也可能工作）。
回答by Chris Sunami supports Monica
As of 2016, Chrome now has this as an option in the ChromeDevTools Settings
从 2016 年开始，Chrome 现在在 ChromeDevTools 设置中将此作为一个选项
https://twitter.com/chromedevtools/status/697993811696291842?lang=en
https://twitter.com/chromedevtools/status/697993811696291842?lang=en
回答by John Jiang
In Chrome: load the popup, while it is still loading, get it focused, quickly press F12 (open developer tool), then F8.
在 Chrome 中：加载弹出窗口，当它仍在加载时，将其聚焦，快速按 F12（打开开发人员工具），然后按 F8。
回答by Khosro
In Chrome you can append // @sourceURL=myScriptName.jsto end of your script then,it loads in Sourcestab in Chrome's Inspect when popup opens.
在 Chrome 中，您可以附加// @sourceURL=myScriptName.js到脚本的末尾，然后Sources当弹出窗口打开时，它会加载到 Chrome Inspect 的选项卡中。
Refer to Debugging JavaScript
Also if you are using ASP.NET MVC, you can append @{Write("//@ sourceURL=myScriptName.js");}and the of your scripts that is inside in your *.cshtmlfiles.
此外，如果您使用的是 ASP.NET MVC，您可以附加文件@{Write("//@ sourceURL=myScriptName.js");}中的脚本*.cshtml。
回答by thatidiotguy
I would recommend outputting information to the console via the consolefunction. You can then see this information in a debugging tool such as Firebug for Firefox, or the built in ones in Chrome. Alternatively, you could always use alertfor debugging.
我建议通过该console功能将信息输出到控制台。然后，您可以在调试工具（例如 Firefox 的 Firebug 或 Chrome 中的内置工具）中查看此信息。或者，您可以始终alert用于调试。
Or maybe I am not understanding something about your question....
或者也许我对你的问题不了解......
