3

Estava navegando pela documentação do ECMAScript e me deparei com a sessão de keywords reservadas

Segue:

The following tokens are ECMAScript keywords and may not be used as Identifiers in ECMAScript programs.

Keyword :: one of

break do instanceof typeof case else new var

catch finally return void continue for switch while

debugger function this with default if throw delete in try


Todas essas keywords eu conheço, e uso, umas com mais frequência, outras com menos, porem ate hoje nunca tinha visto essa: debugger.

Tentei aplicar um exemplo dessa keyword no jsfiddle mas não entendi o seu funcionamento. Para que ela existe? Qual sua utilidade? E quando usar?

1 Resposta 1

6

É 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:

breakpoint

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.

3
  • 1
    E depois dar um F8 para continuar a execução (no navegador, pelo menos), senão fica travado no breakpoint.
    – Woss
    15/02/2017 às 14:01
  • eu cheguei a tentar usar o debugger para testar se o developer tools estava aberto if(debugger){alert()} kkkk 15/02/2017 às 14:06
  • @AndersonCarlosWoss não sei se F8 é padrão em todos sistema e navegadores, mas obrigado pela dica +1 15/02/2017 às 14:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .