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

发布于 2024-11-28 08:38:17 字数 303 浏览 0 评论 0原文

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

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

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

Say I have some JavaScript code like this:

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

Assume I can't edit the source file. I would like to debug breakpointInside, but I cannot figure out how to add a breakpoint in the middle of the line. In this example, it's trivial to step into the function, but assume it's a more complex script where this isn't as practical.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

污味仙女 2024-12-05 08:38:17

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

1) De-obfuscate Source

您不能在一行内放置断点,但您可以(在较新版本的 Chrome 中)右键单击脚本,选择 De-obfuscate Source,并在去混淆版本上放置一个断点(每一行都有一个语句)。

2) Pretty Print

(基于 Nicolas 的评论)

在基于 Chromium 的浏览器的更高版本中,此功能称为“Pretty print”,并且可以作为按钮使用源代码面板的左下方,看起来像 {}

Here are 2 related solutions

1) De-obfuscate Source

You can't put a breakpoint inside a line, but you can (in newer versions of Chrome) right-click on the script, select De-obfuscate Source, and put a breakpoint on the de-obfuscated version (which will have one statement on each line).

2) Pretty Print

(based on comment by Nicolas)

In later versions of Chromium-based browsers, this function is called "Pretty print" and is available as a button at the left below the source code panel that looks like {}

儭儭莪哋寶赑 2024-12-05 08:38:17

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

You can edit the source with Chrome DevTools live: simply double click on the source in the Scripts panel and add a line break before console.log. Press Ctrl+Enter or Ctrl+S to commit your change into the virtual machine. Then set breakpoint on the new line containing console.log.

长安忆 2024-12-05 08:38:17

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

在 2015 年,您可以点击左下角名为“漂亮打印”的 {} 按钮。 – 尼古拉斯·布瓦斯托

The comment by Nicolas Boisteault is the one to be used in latest versions of chrome.

In 2015 you can click the {} button called pretty print at the bottom left. – Nicolas Boisteault

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文