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().

have you tried `debugger;` or just using regular breakpoints in the developer toolbar? — sazh, Apr 06 '12 at 23:45
you mean set breakpoints from the code itself rather than setting them using the script watcher in the developer tools? — Faris M, Apr 06 '12 at 23:48
Or maybe better: [Set a breakpoint in XHR in Chrome](http://stackoverflow.com/questions/3249696/set-a-breakpoint-in-xhr-in-chrome). — Felix Kling, Apr 06 '12 at 23:56
Not a duplicate. "in Chrome" vs "in code" are two different things, and this question is applicable to many non-XHR scenarios. Yes 1 of the answers in the other question answers this question, but others are not applicable. I literally googled "set javascript breakpoint from code chrome" and this is the first result, and the other question isn't even on the first page. — AaronLS, Dec 28 '12 at 21:10
Possible duplicate of [Programmatically control breakpoints in Javascript?](http://stackoverflow.com/questions/5271465/programmatically-control-breakpoints-in-javascript) — Gerardo Lima, Nov 10 '15 at 11:41

score 1262 · Accepted Answer · answered Apr 06 '12 at 23:49

1262

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

answered Apr 06 '12 at 23:49

xn.

15,776
2
30
34

10

A nice trick is to trigger the debugger after a few seconds: `setTimeout(function(){debugger;}, 3000);` – Shahar Jul 08 '14 at 13:02
5

This is very helpful. Note also `debugger;` is supported in all major browsers. For more information: http://www.w3schools.com/jsref/jsref_debugger.asp – ScottyG Apr 15 '16 at 15:31
22

@ScottyG MDN is less shiny, more useful: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger – jpaugh Feb 01 '17 at 16:23
2

@JustusEapen Problem is that Javascript is single-threaded, so it can't interrupt running code. – Vitruvie Mar 22 '17 at 22:38
@ScottyG an in terms of standards, it is a reserved statement with implementation defined effects: https://stackoverflow.com/a/37549760/895245 – Ciro Santilli OurBigBook.com May 05 '18 at 09:51
Works for IE as well. With dynamically loaded scripts, trying to locate where to place the breakpoint to track what is calling an offending function can be difficult. I use `debugger;elusiveFunction();` step into the function and set the breakpoint. – Alan Samet Jul 10 '19 at 17:09
For those who are getting trapped in an infinite loop as soon as the execution's started: Another simple trick is to comment all the entry code and execute, then simply open Chrome dev tools and add your breakpoint, now uncomment the commented lines and re-execute. – aderchox Jul 30 '22 at 08:49

score 36 · Answer 2 · edited Apr 11 '23 at 13:57

36

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

Command Line API Reference: debug

edited Apr 11 '23 at 13:57

htho

1,549
1
12
33

answered Aug 19 '16 at 11:00

Protector one

6,926
5
62
86

2

Very nice - appears to be Chrome only at this time, but that's my primary platform anyways. Now I just need to remember to stop calling my global debugging flag "debug"... – brichins Sep 23 '16 at 21:48
The Chrome Debugger Command Line API Reference actually contains some other quite helpful things I wasn't aware of. Thanks! – Peter T. Jun 05 '18 at 10:02
This link explains this approach in more details but lacks information about undebug() https://developer.chrome.com/docs/devtools/javascript/breakpoints/#function – htho Apr 10 '23 at 14:50

score 27 · Answer 3 · answered May 04 '14 at 17:33

27

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

answered May 04 '14 at 17:33

martynas

12,120
3
55
60

1

That sets a breakpoint in the click handler, probably not what OP wanted – P Varga Sep 10 '15 at 13:59
@PeterV I'd find it useful if I was just trying to open up my code to a place that was close to a block of code I was debugging... but didn't want to debug all the time... but yeah, if it's just to open the debugger... then there's a keypress for that. – Armstrongest May 03 '18 at 22:19

score 15 · Answer 4 · edited Mar 07 '16 at 19:22

15

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/

edited Mar 07 '16 at 19:22

Jonathan Hall

75,165
16
143
189

answered Feb 02 '14 at 04:55

Andrija

14,037
18
60
87

Ciro Santilli OurBigBook.com · Answer 5 · 2018-05-05T09:50:06.763

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:

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.

No changes in ES6.

score 7 · Answer 6 · answered Apr 06 '12 at 23:53

7

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

Screenshot:

screenshot of breakpoint in chrome

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

answered Apr 06 '12 at 23:53

Florian Margaine

58,730
15
91
116

42

This doesn't answer the question, he wants to be able to do it *in code* – robertc Jul 04 '12 at 16:56
3

If you load a JS script with an Ajax call, it will not show here, hence the need for a breakpoint in code. – Petruza Nov 14 '14 at 15:23
@FlorianMargaine, There is no Scripts tab anymore. Please update the image. – Pacerier Jun 23 '15 at 02:37
In some frameworks, like Drupal, the JS gets a cache-busting query string suffix added. If you flush caches, it often updates this suffix which can wipe out any breakpoints you have set on the previous load. – Nick Nov 04 '15 at 09:47

score 3 · Answer 7 · answered Apr 26 '18 at 14:18

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

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)
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.

score 2 · Answer 8 · answered Jan 21 '14 at 10:02

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.

score 2 · Answer 9 · edited Jun 20 '20 at 09:12

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.
};

score 2 · Answer 10 · answered Jan 19 '18 at 10:37

2

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

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

answered Jan 19 '18 at 10:37

Lance

75,200
93
289
503

score 0 · Answer 11 · answered Mar 30 '20 at 21:56

I wouldn't recommend debugger; if you just want to kill and stop the javascript code, since debugger; will just temporally freeze your javascript code and not stop it permanently.

If you want to properly kill and stop javascript code at your command use the following:

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

score -1 · Answer 12 · edited Feb 04 '21 at 10:51

-1

This gist Git pre-commit hook to remove stray debugger statements from your merb project

maybe useful if want to remove debugger breakpoints while commit

edited Feb 04 '21 at 10:51

motis10

2,484
1
22
46

answered Feb 04 '21 at 09:21

towith

109
1
3

How to set a JavaScript breakpoint from code in Chrome?

12 Answers12

Linked

Related