如何在 Chrome 或 Safari 中的缩小的 JS 函数上设置断点？

Question

我想在 Chrome 或 Safari JavaScript 调试器的“Cart.add”函数中设置断点。 问题是，这个函数是在一个大的缩小的 JS 文件中定义的，它本身并不存在于一行中。

一些文档说基于 WebKit 的调试器支持调试控制台中的“break”或“debug”命令，但这些在较新版本的调试器中似乎不起作用。

在 JS 文件的那一行设置断点也不起作用，因为该行有很多函数。

有什么建议么？

Answer 1

在 Chrome 中，当您打开“ Scripts选项卡时，您可以通过单击底部的{ }按钮（“漂亮打印”）来美化所选文件。 之后，您可以找到您的行并设置断点。 页面刷新后，代码将保持美化，并带有断点。

Answer 2

debugger语句可能就是您要查找的内容。

评估DebuggerStatement产生式可能允许实现在调试器下运行时导致断点。 如果调试器不存在或不活动，则此语句没有可观察到的效果。

生产DebuggerStatement : debugger ; 评估如下：

1. 如果实现定义的调试工具可用并启用，则

   一种。 执行实现定义的调试操作。

   湾让 result 是一个实现定义的 Completion 值。

2. 别的

   一种。 令结果为（正常，空，空）。

3. 返回结果。

break语句用于退出循环和switch语句，与调试无关。

真正的解决方案是首先不要打扰您的代码:)

Answer 3

1) 错误消息应为您提供指向 Sources 选项卡中源代码的链接。 单击该链接以获取转译后的代码。

2) 单击 Sources 选项卡中源代码底部的“{ }”图标，对转译后的代码进行格式化以便于调试。

3）在失败的行上贴一个断点。

4) 再次重现问题。 这一次，它应该在错误发生之前的断点处中断。

5) 检查局部变量和调用堆栈以确定究竟出了什么问题。

Answer 4

对于 chrome 用户，您需要在实验功能中启用自动漂亮打印。

设置断点现在应该可以工作了。

Answer 5

如果你已经保存了网页，那么使用 jsbeautifier.org 来美化你的 js 文件，它会格式化你的整个脚本。 然后用美化后的版本替换你的js内容。 从这里您可以轻松调试您的 JS