Durante muito tempo, falar em “depurar código em Javascript” era uma forma elegante para incluir vários comandos alert espalhados pelo script, de modo a visualizar o conteúdo de variáveis, propriedades, etc. Foram poucos os profissionais que conheci que aprenderam a depurar nos tempos do ASP usando ferramentas como o Microsoft Script Debugger em conjunto com o Visual Interdev, lembra-se?

Com a chegada do ASP.NET, a depuração de código tanto em ASP quanto em ASP.NET se tornou um processo menos braçal para a alegria do amigo desenvolvedor. No entanto, a depuração do código em javascript continuou sendo um assunto problemático para muitos, especialmente por desconhecerem o fato de que precisam habilitar a depuração no Internet Explorer antes de tentar depurar.

Embora versões anteriores do Visual Studio já oferecessem algum suporte a depuração de código em javascript, é justamente na nova versão que esta prática tem tudo para se popularizar. Pela primeira vez a Microsoft reuniu um conjunto de ferramentas realmente úteis para o desenvolvedor interessado em depurar código em javascript. Saiba que a partir de agora, você só precisará usar uma instrução alert quando quiser fornecer feedback para os seus usuários. Para os demais casos, o Visual Studio irá auxiliá-lo de uma maneira mais elegante. Vejamos o que mudou...

Criando um projeto de Testes no Visual Studio 2008

Para conferirmos na prática como depurar Javascript, vamos criar um projeto do tipo ASP.NET Web Aplication e salvá-lo como TestaDebuggerJS.

Na página Default.aspx que é gerada automaticamente pelo template, iremos criar o formulário a seguir.

Para tornar menos cansativa a geração do código de teste e focar no que realmente nos importa no momento, vamos reproduzir a seguir o código completo da página, que você poderá colar através da guia Source:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestaDebuggerJS._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Teste de Depuração de Javascript</title>

function concatenar()

{

var nome = document.getElementById("txtNome").value;

var sobrenome = document.getElementById("txtSobrenome").value;

var assinatura = nome + " " + sobrenome;

alert("Seja bem vindo " + assinatura + "!");

}

</script>

</head>

<body>

<div>

Nome <input id="txtNome" type="text" /> <br /><br />

Sobrenome <input id="txtSobrenome" type="text" /><br />

</div>

</form>

</body>

</html>

Execute-a no navegador e confira que a mesma funciona conforme esperado.

Adicionando breakpoints ao código

O nosso próximo passo será adicionar um breakpoint no código da função javascript. Veja que aqui as coisas já começam a mudar, uma vez que até o Visual Studio 2005 só era possível adicionar breakpoints a código escritos em Javascript salvos em arquivos .js. No Visual Studio 2008 por sua vez, é possível adicionar breakpoints em código javascript também em arquivos .htm, .aspx e .master.

Para criar um breakpoint, pare com o cursor de inserção na linha onde começamos a declarar a função concatenar e tecle F9. Observe na imagem a seguir que o breakpoint foi criado com sucesso.

Em seguida, tecle F5 para executar o código com o debugger atachado. Como de costume, você irá receber o aviso de que precisa habilitar o debugger. Clique no botão OK para efetuar a mudança requisitada.

Na caixa de mensagem que é mostrada a seguir, você é informado de que precisa habilitar o debug de scripts no Internet Explorer para que as coisas funcionem como esperado. Trata-se de outra novidade do VS 2008:

Se você não receber este aviso, é sinal que o suporte a debug do IE já foi previamente habilitado. Vejamos a seguir como preparar o navegador.

Configurando o Internet Explorer para depuração

Um ponto que não pode ser esquecido na preparação do ambiente para debug é a configuração do Internet Explorer. Isto porque o navegador por default ignora erros de javascript. Conseqüentemente, é necessário habilitar o suporte a debug através do seguinte procedimento válido para o IE 7:

1.    Tecle Alt para exibir a barra de menu do navegador.
2.    No menu Ferramentas selecione Opções da Internet.
3.    A caixa de diálogos Opções da Internet será exibida. Clique na guia Avançadas.
4.    Na lista de opções Configurações, procure pela seção Navegação.
5.    Desmarque as opções Desabilitar depuração de script (Internet Explorer) e Desabilitar depuração de script (outros).
6.    Marque a opção Exibir notificação sobre cada erro de script.
7.    Desmarque a opção Mostrar mensagens de erro HTTP amigáveis.
8.    Clique no botão OK para confirmar as alterações.

Desabilitar a exibição das mensagens amigáveis é um passo vital para a localização de bugs de uma forma geral, pois as mensagens apresentadas são voltadas apenas a usuários finais. Para os desenvolvedores, é importante visualizar o máximo de detalhes possíveis sobre um determinado erro.

Nota: feche e abra novamente o Internet Explorer para que as alterações passem a valer. Tenha em mente que as mudanças que acabamos de propor farão com que o Internet Explorer solicite que selecionemos um debugger, sempre que encontrar um erro e não exista no momento nenhum debugger atachado. Neste ponto, é possível continuar sem anexar um debugger ou atachá-lo e inspecionar o comportamento do código em execução.

Depurando o código

Agora que já temos o Internet Explorer e o web.config com o suporte a depuração ativos, tecle novamente F5 para depurar a página de teste. Entre com o seu nome e sobrenome nos campos de texto e a seguir clique no botão concatenar.

O Visual Studio será colocado em primeiro plano e a depuração do código em javascript será iniciada. Veja que o Visual Studio exibe as janelas Locals e Call Stack com informações pertinentes.

Um detalhe importante a reparar é a de que a execução pausa no documento em run-time (a versão processada da página .aspx) ao invés da versão em tempo de design. Observe a palavra dynamic ao lado do nome da página Default.aspx e o próprio código da página para comprovar. O Visual Studio nos permite acessar as duas versões do documento através do Solution Explorer:

Tenha em mente, contudo, que ao configurarmos ou desmarcarmos breakpoints em tempo de execução, estas mudanças também serão salvas para a versão design-time do documento, nos poupando re-trabalho.

Ao parar com o ponteiro do mouse sobre a variável nome, você irá perceber não só a presença da tooltip contendo o valor, como também a possibilidade de usar vários visualizadores de informação para inspecionar por exemplo textos mais longos:

Selecione document e clique com o botão direito do mouse, escolhendo a seguir a opção QuickWatch.

Veja que o Visual Studio 2008 fornece muito mais informações que a versão anterior nesta janela.

Além dos tipos reais dos objetos, temos acesso aos métodos...

... aos eventos…

... e podemos também navegar pelo DOM facilmente, sem a necessidade de uma ferramenta externa como o IE Developer Toolbar, também da Microsoft:

Para aqueles que não vivem sem a janela Immediate, a boa notícia é a de que podemos alterar os valores das variáveis e de propriedades dos objetos também através desta. Durante a depuração, experimente avançar via F10 o ponto de execução até a linha em que atribuímos a variável assinatura e trocar o conteúdo das variáveis nomes e sobrenome através da janela Immediate:

Conforme esperado, ao executarmos a linha em que o alert é exibido, veremos o novo nome e não aquele que entramos via campos de formulário. Veja:

Conclusão

O Visual Studio 2008 chega trazendo várias inovações em relação à geração e manutenção de código em Javascript, um dos poucos pontos em que ele sempre deixou a desejar. Muitos leitores devem estar se perguntando porque melhorias como estas demoraram tanto a chegar à ferramenta, não é verdade? Pois a resposta é fácil: com a força que o ASP.NET Ajax vem ganhando dentro da plataforma .NET, foi necessário adequar a ferramenta para suportar os recursos de depuração exigidos por esse tipo de solução. Este foi o real motivo pelo qual o suporte ao javascript tanto de debug quanto de intellisense ganhou tanta atenção nesta versão.

Como qualquer novidade, ele ainda apresenta algumas limitações como a impossibilidade de movermos via cursor o ponto de execução ou a falta de alguns tipos de visualizadores de dados mais complexos para algumas situações específicas, mas nada que tire o brilho do esforço realizado pela equipe de desenvolvimento do Visual Studio. Pela primeira vez, podemos dizer que temos uma ferramenta em que podemos trabalhar de forma profissional com Javascript, algo que ainda é vital para todo desenvolvedor Web.

Abraços e até a próxima!

Cláudio Ralha
MCP – MCAD – MCTS
.NET Senior Consultant
Palestrante .NET Microsoft Brasil
Autor do livro Segredos do Visual Studio .NET
Email: claudioralha@hotmail.com
Blog: http://thespoke.net/blogs/claudioralha