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

Posted 2023-02-21

【中文标题】如何在 Chrome 或 Safari 中的缩小 JS 函数上设置断点？

【英文标题】：How to set a breakpoint on a minified JS function in Chrome or Safari?

【发布时间】：2011-11-14 00:46:14

【问题描述】：

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

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

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

有什么建议吗？

【问题讨论】：

你能把 javascript 解压然后再做一次吗？ ***.com/questions/822119/…

【参考方案1】：

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

【讨论】：

这个技巧太棒了，不要以为我会自己想出来。

不，它不会保持美化

对我不起作用。它保持美化但永远不会到达断点，总是执行缩小的脚本。

出于某种原因，这并不适合所有人：code.google.com/p/chromium/issues/detail?id=415406

这个功能曾经可以工作，但现在 (53.0.2785.143) 我不能再让它工作了。很想知道它是 chrome 中的错误/功能丢失，还是我破坏的设置/我做错了什么

【参考方案2】：

debugger statement 可能就是您要找的。​​p>

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

生产 DebuggerStatement : debugger ; 的评估如下：

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

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

b.让 result 是实现定义的 Completion 值。

其他

一个。让结果为（正常、空、空）。

返回结果。

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

不过，真正的解决方案是一开始就不要篡改代码 :)

【参考方案3】：

1) 错误消息应为您提供指向源代码的链接 来源选项卡。单击该链接可转到已转译的代码。

2) 点击源代码底部的“ ”图标 Sources 选项卡以格式化转译的代码以便于调试。

3) 在失败的行处设置断点。

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

5) 检查局部变量并调用堆栈 确定到底出了什么问题。

【参考方案4】：

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

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

【参考方案5】：

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

【讨论】：

请注意，当您处理缩小的 js 文件时，通常意味着您正在调试生产环境中的某些内容。大多数情况下，您无法访问该环境以将脚本替换为美化版本，或者即使您这样做，也不应该这样做。