domingo, setembro 17, 2006

Debugando JavaScript

Se você for desenvolvedor web ou por qualquer motivo lidar com JavaScript, sabe o quanto é difícil debugar Javascript. Você passa horas e horas escrevendo um código fabuloso e quando vai testar surge um erro tão sugestivo e estimulante quanto "Unknown Error". A linha, claro, não é indicada.

É óbvio que esse problema só existe quando você usa o InternetExplorer. O Firefox vem "de fábrica" com um excelente Console de Javascript que indica todos os erros de uma forma muito mais clara do que o IE. Mas como, infelizmente, a maioria das pessoas ainda usa o IE é necessário testar o site nele também.

Normalmente, se colocaria milhões de alert("Entrou no loop") e coisas do tipo. Mas fuçando na internet achei três soluções interessantes: (1) A Debug Window (2) O MS Script Debugger e (3) O MS Script Editor.

Os últimos dois programas são da Microsoft. O primeiro é gratuito e o segundo vem com MS Office 2003. Não tive a oportunidade de testar o Script Editor, pois no meu trabalho usa-se o Office 2000. Tentei usar o Script Debugger mas aparentemente ele só funcionava enquanto estava de administrador da máquina. E não sei quanto a você, mas pra mim, usar o IExplorer logado como Administrador é um crime.

Resumindo, o método que estou usando agora é o número 1, da Debug Window. Ele consiste em criar uma janela (pop-up) que irá receber todas as mensagens de debug do programa. O método é interessante por que em uma única linha você habilita ou desabilita o debug. Além disso, ele não trava o Javascript como o "alert" faz, tornando-o uma boa opção para scripts em que o tempo é precioso. Não é, claro, a melhor opção, que seria uma interface completa de debug (ou usar o Firefox que tem vários debuggers entre suas extensões - vide post anterior) mas está quebrando um bom galho pra mim no trabalho.

PS: O código não é meu, apenas estou copiando aqui. Ele se encontrava originalmente no artigo JavaScript Debug Utility da Isocra.

O código tinha originalmente 3 partes. Eu só utilizo as duas primeiras, mas vou reproduzir aqui a terceira também.

Essa é a função que cria a janela:

// Show the debug window
function showDebug() {
window.top.debugWindow =
window.open("",
"Debug",
"left=0,top=0,width=300,height=700,scrollbars=yes,"
+"status=yes,resizable=yes");
window.top.debugWindow.opener = self;
// open the document for writing
window.top.debugWindow.document.open();
window.top.debugWindow.document.write(
"<HTML>" +
"<HEAD>" +
" <TITLE>Debug Window</TITLE>" +
"</HEAD>" +
"<BODY>" +
" <PRE> \n");
}


Essa é a função que imprime o texto desejado na janela de debug:

// If the debug window exists, then write to it
function debug(text) {
if (window.top.debugWindow && ! window.top.debugWindow.closed) {
window.top.debugWindow.document.write(text+"\n");
}
}


E essa função, que eu não utilizo, fecha a janela de debug

// If the debug window exists, then close it
function hideDebug() {
if (window.top.debugWindow && ! window.top.debugWindow.closed) {
window.top.debugWindow.close();
window.top.debugWindow = null;
}
}
Utilizar o código é bem simples. Coloque, no início da página uma chamada para a função showDebug(); Em seguida, nos lugares desejados chame a função "debug" com um texto como parâmetro. Algo do tipo 'debug("valor da variavel x:" + x)'. Abra a página e voilá!

Quando o sistema for para produção, basta retirar a linha inicial. O site do artigo original tem umas dicas de performance que você pode olhar se lhe parecer interessante. Mas me parece que a performance perdida com o script é tão minúscula que não vale a pena. Claro que é possível que o script seja time-sensitive. Nesse caso, dê uma olhada no artigo.

Nenhum comentário: