It is equivalent to breakpoint
of other languages, it pauses script execution and only works if the browser's developer tools or another debugger (as in Node.js ) is open, if it is not open it will have no effect.
For example, run the Snippet below and open Developer tools, then click on test:
function a() {}
function b() {}
function foo() {
a();
debugger;
b();
}
<button onclick="foo();">Executar</button>
In Chrome / Opera will appear something like:
NotethatyouhavePausedindebugger,ifyouclicktheplaybuttonitwillcontinueuntilyoufindanotherdebugger;
InmostbrowserstouseplayyoucanpressF8
Howtouse
OfcourseintheexampleaboveIdonothavemuchsensetouseit,theideaofusingbreakpointandthedebuggerisyouuseitinseveralplacesandanalyzewheretheerroroccurs,forexample:
functionfoo(){a();debugger;b();debugger;c();debugger;d();debugger;codecodecode...codecodecode...codecodecode...debugger;codecodecode...debugger;}
Imaginethatyouhaveseverallibrariesorahugescriptthatyoudonotunderstandwheretheproblemis,oryoudonotknowwheretheproblemstarted,forexampleavariablemanipulatedbyvariousscriptsandfunctionsisarrivingwithnull
,thenyoucanmanuallyapplymultipledebugger;
combinedtoconsole
andbytestingstepbystepwhathappenstothevariable
Debuggingdoesnotexistdirectlywithvisualenvironments,therehastobeananalysisoftheoutputsandcodereturnsandthedebugger/breakpointisjustto"pause" and you can test.
For example (of course you can use the debugger anywhere in your script):
function foo() {
x = a();
console.log(x);
debugger;
b(x);
console.log(x);
debugger;
c(x);
console.log(x);
debugger;
d(x);
console.log(x);
debugger;
code code code...
code code code...
x = code code code...
console.log(x);
debugger;
}
If you are in a browser and you have problems with some manipulation of the DOM, you put the debugger in several places and every debugger parses the DOM through the Elements