How to set a JavaScript breakpoint from code in Chrome?

Question

I want to force the Chrome debugger to break on a line via code, or else using some sort of comment tag such as something like console.break().

Answer 1

You can use debugger; within your code. If the developer console is open, execution will break. It works in firebug as well.

Answer 2

Set up a button click listener and call the debugger;

Example

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

Demo

http://jsfiddle.net/hBCH5/

Resources on debugging in 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

Answer 3

You can also use debug(function), to break when function is called.

Command Line API Reference: debug

Answer 4

As other have already said, debugger; is the way to go. I wrote a small script that you can use from the command line in a browser to set and remove breakpoint right before function call: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/

Answer 5

On the "Scripts" tab, go to where your code is. At the left of the line number, click. This will set a breakpoint.

Screenshot:

You will then be able to track your breakpoints within the right tab (as shown in the screenshot).

Answer 6

debugger is a reserved keyword by EcmaScript and given optional semantics since ES5

As a result, it can be used not only in Chrome, but also Firefox and Node.js via node debug myscript.js.

The standard says:

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.

No changes in ES6.

Answer 7

It is possible and there are many reasons you might want to do this. For example debugging a javascript infinite loop close to the start of the page loading, that stops the chrome developer toolset (or firebug) from loading correctly.

See section 2 of

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

or just add a line containing the word debugger to your code at the required test point.

Answer 8

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.

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

Answer 9

You can set debug(functionName) to debug functions as well.

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

Answer 10

There are many ways to debug JavaScript code. Following two approaches are widely used to debug JavaScript via code

1. Using console.log() to print out the values in the browser console. (This will help you understand the values at certain points of your code)

2. Debugger keyword. Add debugger; to the locations you want to debug, and open the browser's developer console and navigate to the sources tab.

For more tools and ways in which you debug JavaScript Code, are given in this link by W3School.