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()
.
12 Answers
You can use debugger;
within your code. If the developer console is open, execution will break. It works in firebug as well.
-
11A nice trick is to trigger the debugger after a few seconds:
setTimeout(function(){debugger;}, 3000);
– ShaharCommented Jul 8, 2014 at 13:02 -
6This is very helpful. Note also
debugger;
is supported in all major browsers. For more information: w3schools.com/jsref/jsref_debugger.asp– ScottyGCommented Apr 15, 2016 at 15:31 -
24@ScottyG MDN is less shiny, more useful: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…– jpaughCommented Feb 1, 2017 at 16:23
-
2@JustusEapen Problem is that Javascript is single-threaded, so it can't interrupt running code.– VitruvieCommented Mar 22, 2017 at 22:38
-
@ScottyG an in terms of standards, it is a reserved statement with implementation defined effects: stackoverflow.com/a/37549760/895245 Commented May 5, 2018 at 9:51
You can also use debug(function)
, to break when function
is called.
-
2Very 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"...– brichinsCommented Sep 23, 2016 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.Commented Jun 5, 2018 at 10:02
-
This link explains this approach in more details but lacks information about undebug() developer.chrome.com/docs/devtools/javascript/breakpoints/…– hthoCommented Apr 10, 2023 at 14:50
Set up a button click listener and call the debugger;
Example
$("#myBtn").click(function() {
debugger;
});
Demo
Resources on debugging in JavaScript
-
1That sets a breakpoint in the click handler, probably not what OP wanted– P VargaCommented Sep 10, 2015 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. Commented May 3, 2018 at 22:19
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/
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.
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).
-
43This doesn't answer the question, he wants to be able to do it in code– robertcCommented Jul 4, 2012 at 16:56
-
3If you load a JS script with an Ajax call, it will not show here, hence the need for a breakpoint in code.– PetruzaCommented Nov 14, 2014 at 15:23
-
@FlorianMargaine, There is no Scripts tab anymore. Please update the image.– PacerierCommented Jun 23, 2015 at 2: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.– NickCommented Nov 4, 2015 at 9:47
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.
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.
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.
};
You can set debug(functionName)
to debug functions as well.
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function
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");
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
debugger;
or just using regular breakpoints in the developer toolbar?