Front End

18 mai, 2011

Como debugar JavaScript no Internet Explorer

Publicidade

Gostaria de
dividir com você um truque para conseguir um “debugador” world-classe
de graça no IE.

JavaScript debugging in Visual Web Developer
Express

Um pouco de história: usuários do Visual Studio há muito tempo já sabem
que ele vem com um ótimo debugador, provavelmente o melhor debugador de
JavaScript que existe (mas o Firebug está chegando perto
rápido). Sempre que você tem um erro no JavaScript, o Visual Studio consegue se
conectar ao processo do Internet Explorer e começar a debugar. Você pode pausar
a execução do código, voltar e passar para frente a execução, modificar os
dados dentro de variáveis e receber notificações quando variáveis específicas
mudam de valor. Uma vez que você se acostuma com ele, codificar sem um
“debugador” faz com que você se sinta um cego em um quarto escuro,
procurando por um gato preto que não está lá.

O único problema é que ele custa mais de £500. A Microsoft lançou uma
excelente edição grátis do Visual Studio para desenvolvimento web chamada Visual Studio Express, mas entre os recursos reservados para a edição profissional está a
habilidade de se conectar a um processo. Portanto, quando você se deparar com  um erro do
JavaScript em uma página web, o VSE não irá aparecer na lista de possíveis
“debugadores”.

A saída é fazer o VSE iniciar o IE para você, de modo que ele seja dono do
processo e não tenha que se conectar a ele explicitamente.

Este artigo foi originalmente escrito para uma versão antiga do Visual
Studio Express, chamada Visual Web Developer Express. As instruções ainda
deveriam funcionar, me falem se tiverem algum problema com elas.

Passo 1

 Primeiro, habilite o
“debugador” no IE. Vá em: Tools > Internet Options > Advanced,
e tenha certeza de que “Disable Script Debugging (Internet Explorer)” não está
checado e “Display a notification about every script error” está checado.

Passo 2

Faça o Download e instale o VSE.

Passo 3

 Crie um novo website vazio.

Passo 4

Clique no botão
“Start Debugging”.

Você será
solicitado a ativar a “debugação”para esse site – habilite. O VSE
então irá iniciar o IE no modo de debugação. Como seu web site está vazio, você
verá um 404; ignore e navegue para a página em questão ou para o website que
você quer debugar.

Dicas de debugação

Quaisquer erros de script irão fazer com que o IE
pause a execução e transfira o controle para o VSE. A screenshot acima me
mostra a mudança do valor de uma variável com o script pausado.

Algumas dicas de
debugação:

  • Aprenda estes atalhos: Step Over (F10) – executa
    a linha atual de código e segue para a próxima. Se a linha atual de código
    contém o chamado de uma função, o Step Into (F11) move o debugador para
    dentro do chamado da função. O Step Out (Shift+F11) executa o resto da
    função atual e a pausa de novo depois que ela retorna. O Continue (F5)
    resume o script até o próximo erro ou breakpoint.
  • A debugação é mais fácil se você escreve o
    código com um chamado de função por linha, pois assim o debugador sabe
    qual função ele deve pegar.
  • Você pode digitar qualquer expressão na janela
    ‘Watch’, e, quando seu valor mudar, ele irá voltar vermelho.
  • Se você quiser abrir o debugador quando não
    tiver nenhum erro, clique na margem esquerda para configurar um breakpoint, ou cole a palavra-chave ‘debugger’ no seu código (isso funciona no
    Firebug também).
  • A janela do Script Explorer é uma lista
    bastante útil para abrir arquivos JavaScript e HTML que você pode usar
    para encontrar códigos para configurar um breakpoint. Ele não é exibido
    por padrão, mas você pode habilitá-lo em Debug > Windows > Script
    Explorer.
  • Uma dica: se
    você quiser, você pode criar uma homepage para o novo site, e adicionar
    este código na head section: <meta http-equiv=”refresh”
    content=”0;url=http://yoursite.com”>. Isso irá te redirecionar
    automaticamente para o site de sua escolha.

 

Feliz codificação!

?

 Texto
original disponível em http://berniesumption.com/software/how-to-debug-javascript-in-internet-explorer/