É equivalente ao breakpoint
de outras linguagens, ele pausa a execução do script e só funciona se Developer tools do navegador ou outro depurador (como no Node.js) estiver aberto, se não estiver aberto não terá efeito.
Por exemplo, execute o Snippet abaixo e abra o Developer tools, depois clique em testar:
function a() {}
function b() {}
function foo() {
a();
debugger;
b();
}
<button onclick="foo();">Executar</button>
No Chrome/Opera vai aparecer algo como:

Note que tem Paused in debugger, se clicar no botão play ele vai continuar até encontrar outro debugger;
Na maior parte dos navegadores para usar o play pode apertar o F8
Como usar
Claro que no exemplo que fiz acima não tem muito sentido usa-lo, a ideia de usar breakpoint e o debugger é você usa-lo em vários lugares e analisar aonde ocorre o erro, por exemplo:
function foo() {
a();
debugger;
b();
debugger;
c();
debugger;
d();
debugger;
code code code...
code code code...
code code code...
debugger;
code code code...
debugger;
}
Imagine que você tem várias bibliotecas ou um script enorme do qual você não está entendendo aonde está o problema, ou não sabe aonde o problema começou, por exemplo uma variável manipulada por vários scripts e funções está chegando com null
, então você pode manualmente aplicar vários debugger;
combinados a console
e testando passo a passo o que ocorre com a variável
Depurar não tem haver diretamente com ambientes visuais, tem haver com analisar as saídas e retornos de códigos e o debugger/breakpoint é apenas para "pausar" e você poder testar.
Por exemplo (claro que você pode usar o debugger em qualquer lugar do teu 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;
}
Se estiver em uma navegador você e tiver problema com alguma manipulação do DOM, você colocar o debugger em vários lugares e a cada debugger analisar o DOM pela aba Elements
.