使用 Chrome Web Inspector 在行中间添加断点
假设我有一些像这样的 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这里有 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
{}
您可以使用 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.
Nicolas Boisteault 的评论是在最新版本的 chrome 中使用的评论。
The comment by Nicolas Boisteault is the one to be used in latest versions of chrome.