使用 Chrome Web Inspector 在行中间添加断点答案

【问题标题】：Adding a breakpoint in the middle of a line with Chrome Web Inspector使用 Chrome Web Inspector 在行中间添加断点
【发布时间】：2023-03-18 08:20:01
【问题描述】：

假设我有一些这样的 JavaScript 代码：

function breakpointInside() { console.log("How do I add a breakpoint here?"); }
breakpointInside();

假设我无法编辑源文件。我想调试breakpointInside，但我不知道如何在行中间添加断点。在此示例中，单步执行该函数很简单，但假设它是一个更复杂的脚本，这并不实用。

【问题讨论】：

如果有人想知道为什么，我正在尝试调试托管在不受我控制的服务器上的缩小脚本。
从 Google Chrome 55 开始，您可以在每行获得多个断点。请看这里：-umaar.com/dev-tips/129-inline-breakpoints-youtube.com/watch?v=HF1luRD4Qmk&feature=youtu.be&t=573
谨慎使用大型缩小脚本，因为使用所有断点选项注释行可能需要很长时间，从而有效地杀死线程。

标签： javascript debugging google-chrome breakpoints web-inspector

【解决方案1】：

这里有2个相关的解决方案

1) 去混淆源

您不能在一行内放置断点，但您可以（在较新版本的 Chrome 中）右键单击脚本，选择 De-obfuscate Source，然后在去混淆版本上放置一个断点（这将有每行一个语句）。

2) 漂亮的打印

（根据 Nicolas 的评论）

在基于 Chromium 的浏览器的更高版本中，此功能称为 “Pretty print”，它作为一个按钮位于源代码面板下方的左侧，类似于 {}

【讨论】：

在 2015 年，您可以点击左下角名为 pretty print 的 {} 按钮。

【解决方案2】：

您可以使用 Chrome DevTools 实时编辑源代码：只需在“脚本”面板中双击源代码并在 console.log 之前添加一个换行符。按 Ctrl+Enter 或 Ctrl+S 将更改提交到虚拟机。然后在包含 console.log 的新行上设置断点。

【讨论】：

我在发布问题之前尝试过这个，但收效甚微。现在我再试一次，我可以让它在比我的问题稍微复杂的东西上工作，但不适用于我实际上要使用它的应用程序。当我尝试在实际应用程序上使用此技巧时，我可以成功编辑一次。但是，新断点不起作用。如果我再次尝试编辑脚本，我会在控制台中收到此错误：Uncaught Script not found。我可能会选择 Digital 的答案，因为它有效，但无论如何谢谢。
经过进一步调查，此错误似乎来自 v8.googlecode.com/svn/trunk/src/debug-debugger.js 的第 2344 行。
我在实时编辑问题上提交了一个错误：crbug.com/92134 如果您在错误中附加一个代码 sn-p，我们将不胜感激，我们可以在该代码上重现问题并指定您使用的 Chrome 版本使用。

【解决方案3】：

Nicolas Boisteault 的评论是用于最新版 chrome 的评论。

在 2015 年，您可以点击左下角名为漂亮打印的 {} 按钮。 ——尼古拉斯·博伊斯特

【讨论】：