Javascript 如何在 Chrome 或 Safari 中的缩小的 JS 函数上设置断点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7366111/
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 set a breakpoint on a minified JS function in Chrome or Safari?
提问by Blake Scholl
I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.
我想在 Chrome 或 Safari JavaScript 调试器的“Cart.add”函数中设置断点。问题是，这个函数是在一个大的缩小的 JS 文件中定义的，它本身并不存在于一行中。
Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.
一些文档说基于 WebKit 的调试器支持调试控制台中的“break”或“debug”命令，但这些在较新版本的调试器中似乎不起作用。
Setting a breakpoint on that lineof the JS file doesn't work either, since there are lots of functions on that line.
在 JS 文件的那一行设置断点也不起作用，因为该行有很多函数。
Any suggestions?
有什么建议？
回答by serg
In Chrome when you open Scriptstab you can prettify selected file by clicking on { }button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.
在 Chrome 中，当您打开Scripts选项卡时，您可以通过单击{ }底部的按钮（“漂亮打印”）来美化所选文件。之后，您可以找到您的行并设置断点。页面刷新后，代码将保持美化，并带有断点。
回答by Mike Samuel
The debuggerstatementis probably what you're looking for.
该debugger语句可能就是您要查找的内容。
Evaluating the DebuggerStatementproduction may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement:
debugger ;is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
a. Perform an implementation defined debugging action.
b. Let result be an implementation defined Completion value.
Else
a. Let result be (normal, empty, empty).
Return result.
评估DebuggerStatement产生式可能允许实现在调试器下运行时导致断点。如果调试器不存在或不活动，则此语句没有可观察到的效果。
生产DebuggerStatement:
debugger ;评估如下：
如果实现定义的调试工具可用并启用，则
一种。执行实现定义的调试操作。
湾 让 result 是一个实现定义的 Completion 值。
别的
一种。令结果为（正常，空，空）。
返回结果。
The breakstatement is for exiting loops and switchstatements and has nothing to do with debugging.
该break语句用于退出循环和switch语句，与调试无关。
The real solution though is to not bugger your code in the first place :)
真正的解决方案是首先不要打扰您的代码:)
回答by Jerin K Alexander
1) The error message should give you a link to the source code in the Sources tab. Click on that link to get taken to the transpiled code.
1) 错误消息应为您提供指向 Sources 选项卡中源代码的链接。单击该链接以获取转译后的代码。
2) Click the "{ }" icon at the bottom of the source code in the Sources tab to format the transpiled code for easier debugging.
2) 单击 Sources 选项卡中源代码底部的“{ }”图标，对转译后的代码进行格式化以便于调试。
3)Stick a breakpoint at the line that is failing.
3）在失败的行上贴一个断点。
4) Reproduce the problem again. This time, it should break at the breakpoint before the error occurs.
4) 再次重现问题。这一次，它应该在错误发生之前的断点处中断。
5) Examine the local variables and call stack to determine what exactly is going wrong.
5) 检查局部变量和调用堆栈以确定究竟出了什么问题。
回答by Eyo Okon Eyo
For chrome users, you'll want to enable automatic pretty print in the experimental features.
对于 chrome 用户，您需要在实验功能中启用自动漂亮打印。
setting your breakpoint should work now.
设置断点现在应该可以工作了。
回答by Harish N
If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily
如果你已经保存了网页，那么使用 jsbeautifier.org 来美化你的 js 文件，它会格式化你的整个脚本。然后用美化后的版本替换你的js内容。从这里您可以轻松调试您的 JS
