Como posso depurar meu código JavaScript? [fechadas]

Quando eu descobrir que tenho um trecho de código problemático, como devo proceder para depurá-lo?

O Firebug é uma das ferramentas mais populares para esse fim.

Todos os navegadores modernos vêm com alguma forma de aplicativo de depuração de JavaScript integrado. Os detalhes destes serão cobertos nas páginas da web de tecnologias relevantes. Minha preferência pessoal para depurar JavaScript é Firebug no Firefox. Não estou dizendo que o Firebug é melhor do que qualquer outro; depende da sua preferência pessoal e você provavelmente deve testar seu site em todos os navegadores de qualquer maneira (minha primeira escolha pessoal é sempre Firebug).

Abordarei algumas das soluções de alto nível abaixo, usando o Firebug como exemplo :

Raposa de fogo

O Firefox vem com sua própria ferramenta de depuração de JavaScript embutida, mas eu recomendo que você instale o complemento Firebug . Isso fornece vários recursos adicionais com base na versão básica que são úteis. Vou falar apenas sobre Firebug aqui.

Assim que o Firebug estiver instalado, você pode acessá-lo como abaixo:

Em primeiro lugar, se você clicar com o botão direito em qualquer elemento, poderá Inspecionar elemento com Firebug :

Clicar aqui abrirá o painel Firebug na parte inferior do navegador:

O Firebug oferece vários recursos, mas aquele em que estamos interessados ​​é a guia de script. Clicar na guia de script abre esta janela:

Obviamente, para depurar, você precisa clicar em recarregar :

Agora você pode adicionar pontos de interrupção clicando na linha à esquerda do trecho de código JavaScript ao qual deseja adicionar o ponto de interrupção:

Quando o seu ponto de interrupção for atingido, terá a seguinte aparência:

Você também pode adicionar variáveis ​​de observação e geralmente fazer tudo o que você esperaria em uma ferramenta de depuração moderna.

Para obter mais informações sobre as várias opções oferecidas no Firebug, verifique o FAQ do Firebug .

cromada

Chrome também tem seu próprio embutido opção depuração de JavaScript, que funciona de forma muito semelhante, clique direito, inspecionar elemento, etc . Dê uma olhada nas Ferramentas do desenvolvedor do Chrome . Eu geralmente acho os rastreamentos de pilha no Chrome melhores do que no Firebug.

Internet Explorer

Se você está desenvolvendo em .NET e usando Visual Studio usando o ambiente de desenvolvimento web, você pode depurar código JavaScript diretamente colocando pontos de interrupção, etc. Seu código JavaScript parece exatamente o mesmo como se você estivesse depurando seu código C # ou VB.NET .

Se você não tiver isso, o Internet Explorer também fornece todas as ferramentas mostradas acima. Irritantemente, em vez de ter o botão direito do mouse inspecionar recursos de elemento do Chrome ou Firefox, você acessa as ferramentas do desenvolvedor pressionando F12 . Esta questão cobre a maioria dos pontos.

• Internet Explorer 8 (Ferramentas de desenvolvedor - F12). Qualquer outra coisa é de segunda categoria na terra do Internet Explorer
• Firefox e Firebug . Clique F12para exibir.
• Safari (Mostrar barra de menu, Preferências -> Avançado -> Mostrar barra de menu Desenvolver )
• Console JavaScript do Google Chrome ( F12ou ( Ctrl+ Shift+ J)). Quase sempre o mesmo navegador do Safari, mas o Safari é melhor IMHO.
• Opera ( Ferramentas -> Avançado -> Ferramentas do desenvolvedor )

Existe uma palavra-chave depurador em JavaScript para depurar o código JavaScript. Coloque o depurador; snippet em seu código JavaScript. Ele começará automaticamente a depurar o código JavaScript nesse ponto.

Por exemplo:

Suponha que este seja o seu arquivo test.js

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

• Quando o navegador executa a página da web na opção do desenvolvedor com o depurador habilitado, ele automaticamente inicia a depuração a partir do depurador; ponto.
• Deve ser aberta a janela do desenvolvedor do navegador.

Eu uso a velha printfabordagem boa (uma técnica antiga que funcionará bem a qualquer momento).

Olhe para a magia %o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%odespejar conteúdo clicável e pesquisável em profundidade, bem impresso do objeto JS. %sfoi mostrado apenas para registro.

E isto:

console.log("%s", new Error().stack);

fornece rastreio de pilha semelhante ao Java até o ponto de new Error()invocação (incluindo o caminho para o arquivo e o número da linha !!).

Ambos %oe new Error().stackdisponíveis no Chrome e Firefox.

Com essas ferramentas poderosas, você faz suposições sobre o que está errado em seu JS, coloca a saída de depuração (não se esqueça de embrulhar na ifinstrução para reduzir a quantidade de dados) e verifique sua suposição. Corrija o problema ou faça uma nova suposição ou coloque mais saída de depuração no problema de bit.

Também para rastreamentos de pilha, use:

console.trace();

como dizer console

Feliz hacking!

Comece com Firebug e IE Debugger.

Porém, tenha cuidado com depuradores em JavaScript. De vez em quando, eles afetam o ambiente apenas o suficiente para causar alguns dos erros que você está tentando depurar.

Exemplos:

Para o Internet Explorer, é geralmente uma desaceleração gradual e algum tipo de vazamento de memória. Depois de cerca de meia hora, preciso reiniciar. Parece ser bastante regular.

Para o Firebug, provavelmente já passou mais de um ano, então pode ter sido uma versão mais antiga. Como resultado, não me lembro dos detalhes, mas basicamente o código não estava funcionando corretamente e depois de tentar depurá-lo por um tempo desativei o Firebug e o código funcionou bem.

Embora alert(msg);funcione naqueles cenários "Eu só quero descobrir o que está acontecendo" ... todo desenvolvedor encontrou aquele caso em que você acaba em um loop (muito grande ou infinito) do qual não consegue sair.

Eu recomendo que, durante o desenvolvimento, se você quiser uma opção de depuração bem direta, use uma opção de depuração que permita uma pausa. (PS Opera, Safari? E Chrome? Todos têm isso disponível em seus diálogos nativos)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

Com o acima, você pode entrar em um grande ciclo de depuração de pop-up, onde pressionar Enter/ Okpermite que você pule por cada mensagem, mas pressionar Escape/ Cancelpermite que você interrompa bem.

Eu uso o menu / console do desenvolvedor do WebKit (Safari 4). É quase idêntico ao Firebug.

console.log()é o novo preto - muito melhor do que alert().

Meu primeiro passo é sempre validar o HTML e verificar a sintaxe com JSLint . Se você tiver uma marcação limpa e um código JavaScript válido, é hora de Firebug ou outro depurador.

O Visual Studio 2008 tem algumas ferramentas de depuração de JavaScript muito boas. Você pode descartar um ponto de interrupção no código JavaScript do lado do cliente e percorrê-lo usando exatamente as mesmas ferramentas que usaria para o código do lado do servidor. Não há necessidade de anexar a um processo ou fazer algo complicado para ativá-lo.

Eu uso algumas ferramentas: Fiddler , Firebug e Visual Studio. Ouvi dizer que o Internet Explorer 8 tem um bom depurador integrado.

Eu costumava usar o Firebug , até o Internet Explorer 8 sair. Não sou um grande fã do Internet Explorer, mas depois de passar algum tempo com as ferramentas de desenvolvedor integradas, que incluem um depurador muito bom, parece inútil usar qualquer outra coisa. Eu tenho que tirar meu chapéu para a Microsoft, eles fizeram um trabalho fantástico nesta ferramenta.

Você também pode verificar o YUI Logger . Tudo que você precisa fazer para usá-lo é incluir algumas tags em seu HTML. É uma adição útil ao Firebug, que é mais ou menos obrigatória.

Achei que a nova versão do Internet Explorer 8 (imprensa F12) é muito boa para depurar código JavaScript.

Claro, o Firebug é bom se você usa o Firefox.

Além de usar o depurador de JavaScript do Visual Studio, escrevi meu próprio painel simples que incluo em uma página. É simplesmente como a janela Immediate do Visual Studio. Posso mudar os valores das minhas variáveis, chamar minhas funções e ver os valores das variáveis. Ele simplesmente avalia o código escrito no campo de texto.

Estou usando o Venkman , um depurador de JavaScript para aplicativos XUL .

Além do Firebug e das extensões de desenvolvedor nativas do navegador, o JetBrains WebStorm IDE vem com suporte para depuração remota para Firefox e Chrome (extensão necessária) integrado.

Também suporta:

• coffescript: como depurar coffeescript em node.js com mapas de origem do webstorm 6
• node.js

As opções para testar gratuitamente são a versão de avaliação 30 ou o uso de uma versão de acesso antecipado .

Se você estiver usando o Visual Studio , basta colocar debugger;acima o código que deseja depurar. Durante a execução, o controle irá pausar naquele lugar, e você pode depurar passo a passo a partir daí.

Como acontece com a maioria das respostas, realmente depende: O que você está tentando alcançar com a depuração? Desenvolvimento básico, corrigindo problemas de desempenho? Para o desenvolvimento básico, todas as respostas anteriores são mais do que adequadas.

Para testes de desempenho especificamente, eu recomendo Firebug. Ser capaz de traçar o perfil de quais métodos são mais caros em termos de tempo foi inestimável para uma série de projetos em que trabalhei. À medida que as bibliotecas do lado do cliente se tornam mais e mais robustas e mais responsabilidade é colocada do lado do cliente em geral, esse tipo de depuração e criação de perfil se tornará mais útil.

API Firebug Console: http://getfirebug.com/console.html

Ao pressionar,F12 os desenvolvedores da web podem depurar rapidamente o código JavaScript sem sair do navegador. Está integrado em todas as instalações do Windows.

No Internet Explorer 11 , as ferramentas F12 fornecem ferramentas de depuração, como pontos de interrupção, observação e visualização de variáveis ​​locais e um console para mensagens e execução imediata de código.