logo标签列表

如何在Chrome中从代码中设置JavaScript断点？

javascriptdebugginggoogle-chromebreakpoints
763

我想通过代码强制Chrome调试器在某一行上中断，或者使用类似于 console.break() 的注释标记。

53
你尝试过用 debugger; 或在开发者工具栏中使用常规断点吗？ - sazh
你的意思是在代码中设置断点，而不是使用开发者工具中的脚本监视器来设置断点？ - Faris M
2
或者更好的方法是：在Chrome中设置XHR断点。 (https://dev59.com/FXA75IYBdhLWcg3wg5fs) - Felix Kling
10
不是重复问题。“在Chrome浏览器中”和“在代码中”是两件不同的事情，这个问题适用于许多非XHR场景。是的，另一个问题中的答案之一回答了这个问题，但其他答案并不适用。我字面上谷歌搜索了“如何从代码中设置JavaScript断点Chrome浏览器”，这是第一个搜索结果，而另一个问题甚至不在第一页。 - AaronLS
可能是JavaScript中以编程方式控制断点的重复内容？ - Gerardo Lima
setTimeout(function(){debugger;}, 5000) - Piqué
12个回答
1269
你可以在代码中使用 debugger;。如果开发者控制台是打开的，执行将会被中断。它同样适用于firebug。
11
一个不错的技巧是在几秒钟后触发调试器：setTimeout(function(){debugger;}, 3000); - Shahar
6
这非常有帮助。还要注意，在所有主流浏览器中都支持debugger;。获取更多信息：http://www.w3schools.com/jsref/jsref_debugger.asp - ScottyG
24
@ScottyG MDN不那么花哨，更有用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger - jpaugh
2
@JustusEapen 的问题在于 JavaScript 是单线程的，因此它无法中断正在运行的代码。 - Vitruvie
对于那些在执行开始时陷入无限循环的人：另一个简单的技巧是注释所有入口代码并执行，然后只需打开Chrome开发工具并添加断点，现在取消注释已注释的行并重新执行。 - aderchox
显示剩余2条评论
36
2
非常好 - 目前似乎只支持Chrome，但那是我的主要平台。现在我只需要记住不再称我的全局调试标志为“debug”了... - brichins
Chrome调试器命令行API参考实际上包含了一些我之前不知道的非常有用的东西。谢谢！ - Peter T.
这个链接更详细地解释了这种方法，但缺少有关undebug()的信息。https://developer.chrome.com/docs/devtools/javascript/breakpoints/#function - htho
27
1
这会在点击处理程序中设置一个断点，可能不是 OP 想要的。 - ՕլՁՅԿ
@PeterV 如果我只是想打开一个接近我正在调试的代码块的地方，但又不想一直进行调试，那么这很有用...但是，如果只是为了打开调试器...那么有一个按键可以做到。 - Armstrongest
15
9

debugger是ECMAScript中的保留关键字，自ES5以来具有可选语义。

因此，它不仅可以在Chrome中使用，还可以通过node debug myscript.js在Firefox和Node.js中使用。

标准规定：

Syntax

DebuggerStatement :
    debugger ;

Semantics

Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.

The production DebuggerStatement : debugger ; is evaluated as follows:

  1. If an implementation defined debugging facility is available and enabled, then
    1. Perform an implementation defined debugging action.
    2. Let result be an implementation defined Completion value.
  2. Else
    1. Let result be (normal, empty, empty).
  3. Return result.
ES6中没有任何更改。
7
在“脚本”选项卡上，找到您的代码所在位置。在行号左侧单击。这将设置断点。
截图： chrome中断点截图 然后，您将能够在右侧选项卡中跟踪您的断点（如屏幕截图所示）。
42
他想要在代码中实现这个功能，而不仅仅是回答问题。 - robertc
3
如果你使用Ajax调用加载JS脚本，它不会在这里显示，因此需要在代码中设置断点。 - Petruza
@FlorianMargaine，现在没有脚本选项卡了。请更新图片。 - Pacerier
在一些框架中，比如Drupal，JS会添加一个缓存破坏的查询字符串后缀。如果你清除了缓存，它通常会更新这个后缀，这可能会清除你在之前加载时设置的任何断点。 - Nick
3
有许多方法可以调试JavaScript代码。以下两种方法是通过代码广泛调试JavaScript的方法：
  1. 使用console.log()在浏览器控制台中打印值。(这将帮助您了解代码某些点上的值)
  2. 调试器关键字。在要调试的位置添加debugger;，然后打开浏览器的开发者控制台并导航到源选项卡。
有更多工具和方法可用于调试JavaScript代码，请参阅W3School的此链接。
2

断点：

断点会停止执行代码，并允许您检查 JavaScript 值。

检查值后，您可以恢复代码的执行（通常使用播放按钮）。

调试器：

调试器; 会停止 JavaScript 的执行，并调用调试函数。

调试器语句暂停执行，但不会关闭任何文件或清除任何变量。

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接