关于调试：如何从Chrome中的代码设置JavaScript断点？


How to set a JavaScript breakpoint from code in Chrome?

我想强制chrome调试器通过代码在一行中中断，或者使用某种注释标记，比如console.break()。

相关讨论

您可以在代码中使用debugger;。如果开发人员控制台打开，执行将中断。它也适用于Firebug。

相关讨论

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

例子

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

演示

http://jsfiddle.net/hbch5/

有关在javascript中调试的资源

  • http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
  • http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today
相关讨论

也可以使用debug(function)在调用function时中断。

命令行API引用：调试

相关讨论

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

debugger是ecmascript保留的关键字，自es5以来提供了可选语义。

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

标准规定：

Syntax

1
2
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:

  • If an implementation defined debugging facility is available and enabled, then

  • Perform an implementation defined debugging action.
  • Let result be an implementation defined Completion value.
  • Else

  • Let result be (normal, empty, empty).
  • Return result.

    • ES6无变化。

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

    截图：

    screenshot of breakpoint in chrome

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

    相关讨论

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

    https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints函数

    Breakpoint :-

    breakpoint will stop executing, and let you examine JavaScript values.

    After examining values, you can resume the execution of code (typically with a play button).

    Debugger :-

    The debugger; stops the execution of JavaScript, and callsthe debugging function.

    The debugger statement suspends execution, but it does not close any files or clear any variables.

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

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

    见第2节

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

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

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

  • 使用console.log()在浏览器中打印出值慰问。(这将有助于您了解特定点的价值观你的代码)

  • 调试器关键字。将debugger;添加到您想要的位置调试并打开浏览器的开发人员控制台并导航到源选项卡。

    • w3school在这个链接中提供了更多的工具和调试javascript代码的方法。