javascript - 使用 Chrome Web Inspector 在行中间添加断点

Question

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

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

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

score 18 · Accepted Answer

这是2个相关的解决方案

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

（基于尼古拉斯的评论）

在基于 Chromium 的浏览器的更高版本中，此功能称为“Pretty print”，可作为源代码面板下方左侧的按钮使用，如下所示{}

score 4 · Accepted Answer

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

score 3 · Accepted Answer

Nicolas Boisteault 的评论是最新版本的 chrome 中使用的评论。

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

3 回答 3