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

Question

说我有一些像这样的JavaScript代码：

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

假设我无法编辑源文件。 我想调试breakpointInside ，但我无法弄清楚如何在行的中间添加断点。 在这个例子中，步入函数是微不足道的，但是假设它是一个更复杂的脚本，这是不实际的。

Answer 1

这是2个相关的解决方案

1）去混淆源

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

2）漂亮的打印

（根据尼古拉斯的评论）

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

Answer 2

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

在2015年，您可以单击左下方名为pretty print的{}按钮。 - Nicolas Boisteault

Answer 3

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