如何通过Chrome中的代码设置JavaScript断点?


685

我想强制Chrome调试器通过代码或使用某种注释标签(例如)来中断一行代码console.break()


46
您是否尝试过debugger;或者只是在开发人员工具栏中使用常规断点?
diaho'4

您的意思是从代码本身设置断点,而不是使用开发人员工具中的脚本监视程序设置断点?
Faris M


9
不能重复。“在Chrome中”与“在代码中”是两回事,这个问题适用于许多非XHR方案。是另一个问题的答案中的1个回答了这个问题,但其他问题不适用。我从字面上搜索“从代码镶边设置javascript断点”,这是第一个结果,而另一个问题甚至不在第一页上。
AaronLS

Answers:


1157

您可以debugger;在代码中使用。如果开发者控制台已打开,则执行将中断。它也可以在萤火虫中使用。


8
一个不错的技巧是在几秒钟后触发调试器:setTimeout(function(){debugger;}, 3000);
Shahar

30
计时器技巧是常见的做法吗?验证/证明?
Justus Eapen 2014年

4
这非常有帮助。debugger;所有主要浏览器都支持该注释。有关更多信息:w3schools.com/jsref/jsref_debugger.asp
ScottyG '16

16

@JustusEapen问题在于Javascript是单线程的,因此它无法中断正在运行的代码。
Vitruvius

27

设置按钮点击监听器,然后调用 debugger;

$("#myBtn").click(function() {
 debugger;   
});

演示版

http://jsfiddle.net/hBCH5/

JavaScript调试资源


1
这在点击处理程序中设置了一个断点,可能不是OP想要的
'13

@PeterV如果我只是想将我的代码打开到我正在调试的代码块附近的地方,我会发现它很有用...但是不想一直调试...但是,是的,如果只是打开调试器...那么会有一个按键。
阿姆斯特朗(Armstrongest)'18年

27

您也可以使用debug(function),以中断function被调用的时间。

命令行API参考:调试


2
非常好-目前仅是Chrome,但这仍然是我的主要平台。现在,我只需要记住停止调用全局调试标记“ debug” ...
brichins

《 Chrome调试器命令行API参考》实际上包含了一些我没有意识到的其他有用的东西。谢谢!
Peter T.


8

在“脚本”选项卡上,转到代码所在的位置。在行号的左侧,单击。这将设置一个断点。

屏幕截图:

chrome断点的屏幕截图

然后,您将能够在右侧选项卡中跟踪断点(如屏幕截图所示)。


41
这不能回答问题,他希望能够用代码
robertc

39
xn .:“这是我的回答的图片,当时还只是一个只有0票的小婴儿。现在都长大了。”
AaronLS

3
如果使用Ajax调用加载JS脚本,则该脚本不会在此处显示,因此需要代码断点。
Petruza 2014年

@FlorianMargaine,不再有脚本选项卡。请更新图像。
起搏器

在某些框架(例如Drupal)中,JS会添加添加了消除缓存的查询字符串后缀。如果刷新缓存,它通常会更新此后缀,从而可以清除您在上一次加载时设置的任何断点。
尼克

7

debugger 是EcmaScript的保留关键字,自ES5起提供了可选的语义

结果,不仅可以在Chrome中使用它,还可以通过来在Firefox和Node.js中使用它node debug myscript.js

标准说

句法

DebuggerStatement :
    debugger ;

语义学

评估DebuggerStatement生产可能会允许实现在调试器下运行时导致断点。如果调试器不存在或未处于活动状态,则此语句无效。

生产DebuggerStatement:调试器; 评估如下:

  1. 如果实现定义的调试工具可用并已启用,则
    1. 执行实现定义的调试操作。
    2. 令result为实现定义的完成值。
  2. 其他
    1. 令结果为(正常,空,空)。
  3. 返回结果。

ES6中没有更改。



3

断点

断点将停止执行,并让您检查JavaScript值。

检查值之后,您可以继续执行代码(通常使用播放按钮)。

调试器:

调试器;停止执行JavaScript,并调用调试功能。

debugger语句挂起执行,但不会关闭任何文件或清除任何变量。

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};


2

有许多方法可以调试JavaScript代码。以下两种方法被广泛用于通过代码调试JavaScript

  1. 使用console.log()浏览器控制台打印出来的值。(这将帮助您了解代码某些点的值)

  2. 调试器关键字。添加debugger;到要调试的位置,然后打开浏览器的开发人员控制台并导航到“源”选项卡。

W3School此链接中提供了更多调试JavaScript代码的工具和方式。


1
+1和使用的console.log也有助于找到你的代码,因为通常的文件/行#显示旁边的消息,你可以双击它,在调试器,设置断点,等打开你的代码
约翰·亨克尔

0

我不建议debugger;您只是想杀死并停止javascript代码,因为debugger;这只会暂时冻结您的javascript代码而不是永久停止它。

如果要在命令中正确终止并停止javascript代码,请使用以下命令:

throw new Error("This error message appears because I placed it");

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.