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

How to set a JavaScript breakpoint from code in Chrome?

提问人:Paul 提问时间:4/7/2012 最后编辑:Ciro Santilli OurBigBook.comPaul 更新时间:4/11/2023 访问量:311946

问:

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

JavaScript 调试 google-chrome 断点

评论

53赞 sazh 4/7/2012
您是否尝试过或只是在开发人员工具栏中使用常规断点?debugger;
0赞 Faris M 4/7/2012
您的意思是从代码本身设置断点,而不是使用开发人员工具中的脚本观察器设置断点?
2赞 Felix Kling 4/7/2012
或者更好的是:在 Chrome 的 XHR 中设置断点
10赞 AaronLS 12/29/2012
不是重复的。“在 Chrome 中”与“在代码中”是两回事,这个问题适用于许多非 XHR 场景。是的,另一个问题中的 1 个答案回答了这个问题,但其他答案不适用。我从字面上用谷歌搜索了“从代码 chrome 设置 javascript 断点”,这是第一个结果,另一个问题甚至不在第一页上。
0赞 Gerardo Lima 11/10/2015
Javascript 中编程控制断点的可能重复?

答:

1271赞 xn. 4/7/2012 #1

您可以在代码中使用。如果开发人员控制台处于打开状态,则执行将中断。它也适用于firebug。debugger;

评论

11赞 Shahar 7/8/2014
一个很好的技巧是在几秒钟后触发调试器:setTimeout(function(){debugger;}, 3000);
6赞 ScottyG 4/15/2016
这是非常有帮助的。注意 所有主流浏览器也支持此功能。欲了解更多信息,请访问:w3schools.com/jsref/jsref_debugger.aspdebugger;
24赞 jpaugh 2/2/2017
@ScottyG MDN 不那么闪亮,但更有用:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......
2赞 Vitruvie 3/23/2017
@JustusEapen问题是 Javascript 是单线程的,所以它不能中断正在运行的代码。
0赞 Ciro Santilli OurBigBook.com 5/5/2018
@ScottyG标准而言,它是一个保留语句,具有实现定义的效果:stackoverflow.com/a/37549760/895245
7赞 Florian Margaine 4/7/2012 #2

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

截图:

screenshot of breakpoint in chrome

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

评论

42赞 robertc 7/5/2012
这并不能回答问题,他希望能够在代码中做到这一点
3赞 Petruza 11/14/2014
如果使用 Ajax 调用加载 JS 脚本,则它不会在此处显示,因此需要在代码中使用断点。
0赞 Pacerier 6/23/2015
@FlorianMargaine,不再有“脚本”选项卡。请更新图像。
0赞 Nick 11/4/2015
在某些框架(如 Drupal)中,JS 添加了一个缓存无效查询字符串后缀。如果刷新缓存,它通常会更新此后缀,这可能会清除在上一次加载时设置的任何断点。
2赞 user2539341 1/21/2014 #3

这是可能的,您可能有很多原因想要这样做。例如,在页面加载开始时调试一个 javascript 无限循环,这会阻止 chrome 开发者工具集(或 firebug)正确加载。

参见第 2 节

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

或者,只需在所需的测试点向代码添加一行包含单词调试器的行。

15赞 Andrija 2/2/2014 #4

正如其他人已经说过的那样,这是要走的路。 我编写了一个小脚本,您可以在浏览器的命令行中使用该脚本在函数调用之前设置和删除断点: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/debugger;

27赞 martynas 5/5/2014 #5

设置按钮单击侦听器并调用debugger;

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

演示

http://jsfiddle.net/hBCH5/

有关在 JavaScript 中进行调试的资源

评论

1赞 P Varga 9/10/2015
这在点击处理程序中设置了一个断点,可能不是 OP 想要的
0赞 Armstrongest 5/4/2018
@PeterV,如果我只是想将我的代码打开到靠近我正在调试的代码块的地方,我会发现它很有用......但不想一直调试......但是,是的,如果只是为了打开调试器......然后有一个按键。
9赞 Ciro Santilli OurBigBook.com 5/31/2016 #6

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

因此,它不仅可以在Chrome中使用,还可以通过节点调试myscript.js在Firefox和Node.js中使用。

该标准说

语法

DebuggerStatement :
    debugger ;

语义学

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

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

  1. 如果实现定义的调试工具可用且已启用,则
    1. 执行实现定义的调试操作。
    2. 设 result 为实现定义的 Completion 值。
    1. 设 result 为(normal, empty, empty)。
  2. 返回结果。

ES6 没有变化。

36赞 Protector one 8/19/2016 #7

您还可以使用 ,在调用时中断。debug(function)function

命令行 API 参考:debug

评论

2赞 brichins 9/24/2016
非常好 - 目前似乎只是 Chrome,但无论如何这是我的主要平台。现在我只需要记住停止将我的全局调试标志称为“debug”......
0赞 Peter T. 6/5/2018
Chrome 调试器命令行 API 参考实际上包含一些我不知道的其他非常有用的东西。谢谢!
0赞 htho 4/10/2023
此链接更详细地解释了这种方法,但缺少有关 undebug() developer.chrome.com/docs/devtools/javascript/breakpoints/ 的信息...
2赞 Parth Raval 11/5/2016 #8

断点:-

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

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

调试器:-

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

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

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};
2赞 Lance 1/19/2018 #9

您也可以设置为调试函数。debug(functionName)

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

3赞 Keet Sugathadasa 4/26/2018 #10

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

  1. 用于在浏览器中打印出值 安慰。(这将帮助您了解某些点的值 的代码)console.log()

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

有关调试 JavaScript 代码的更多工具和方法,请参阅 W3School 的此链接

0赞 S To 3/31/2020 #11

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

如果您想按照您的命令正确终止和停止 javascript 代码,请使用以下命令:

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

-1赞 towith 2/4/2021 #12

这个要点 Git 预提交钩子,用于从 merb 项目中删除杂散调试器语句

如果要在提交时删除断点,可能很有用debugger