使用Chrome Web检查器在一行的中间添加断点

Question

假设我有一些 JavaScript 代码，如下所示：

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

假设我不能编辑源文件。 我想调试breakpointInside，但是我不知道如何在代码行的中间添加断点。 在这个例子中，逐步进入函数很容易，但是假设这是一个更复杂的脚本，在这种情况下就不太实用。

- icktoofay

---

如果有人想知道为什么，我正在尝试调试一个托管在我无法控制的服务器上的压缩脚本。 - icktoofay

自从 Google Chrome 55 版本以来，您可以在同一行上设置多个断点。请参考以下链接：- https://umaar.com/dev-tips/129-inline-breakpoints/ - https://www.youtube.com/watch?v=HF1luRD4Qmk&feature=youtu.be&t=573 - anddoutoi

使用时需谨慎处理大型压缩脚本，因为对所有断点选项进行注释可能需要数分钟的时间，从而有效地终止线程。 - ericP

Answer 1

以下提供2个相关的解决方案：

1) 反混淆源代码

虽然无法在一行内放置断点，但是您可以（在较新版本的Chrome中）右键单击脚本，选择反混淆源代码，然后在反混淆的版本上放置断点（每行将只有一个语句）。

2) 格式化输出

（基于Nicolas的评论）

在后续版本的基于Chromium的浏览器中，此功能称为"格式化输出"，可在源代码面板左侧下方看到一个如{}的按钮。

- Digital Plane

---

2015年您可以在左下角点击名为“漂亮打印”的{}按钮。 - Nicolas Boisteault

Answer 2

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

- Pavel

---

我在发布问题之前尝试过这个方法，但效果不佳。现在我再次尝试，可以在比问题中稍微复杂一些的东西上使其工作，但不能用于我实际要使用它的应用程序。当我尝试在真实应用程序中使用此技巧时，我可以成功编辑一次。然而，新的断点不起作用。如果我再次尝试编辑脚本，则会在控制台中收到此错误：未捕获的脚本未找到。我可能会选择Digital的答案，因为它有效，但还是谢谢。 - icktoofay

进一步调查后发现，此错误来自于http://v8.googlecode.com/svn/trunk/src/debug-debugger.js的第2344行。 - icktoofay

我已经在实时编辑问题上提交了一个漏洞报告：http://crbug.com/92134 如果您能够附加一个代码片段，使我们能够重现问题并指定您使用的Chrome版本，我们将不胜感激。 - Yury Semikhatsky

Answer 3

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

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

- UKM