使用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）漂亮的打印

（基于Nicolas的评论）

在基于Chromium的浏览器的更高版本中，此功能称为“Pretty print”，可在源代码面板左下方的按钮下看作{} < / p>

Answer 2

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

Answer 3

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

  

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