Depurando código Java Script com Visual Studio .Net 2003

Este artigo é um esforço em mostrar como preparar o seu ambiente de desenvolvimento para atingir este objetivo.

por Anderson Noberto

Quem desenvolve aplicações baseadas em Asp.net, utilizando o Microsoft Visual Studio.Net 2003 já está acostumado a recursos poderosos de depuração do código de servidor de suas aplicações: são break-points, inspeção de variáveis, janela de comandos imediatos, etc. O que pouca gente sabe, é que a maioria destes recursos podem ser utilizados para depuração de scripts do lado do cliente (jscript, vbscript, etc). Antes de mais nada, já deixo claro que a "coisa" não funciona de forma tão simples como na depuração de código de servidor, mais normalmente, seguindo algumas regrinhas básicas e fazendo algumas configurações, você conseguirá usar muitos dos poderosos recursos de depuração do Visual Studio no seu código de script. Este artigo é um esforço em mostrar como preparar o seu ambiente de desenvolvimento para atingir este objetivo.

Requisitos:

Microsoft Visual Studio .Net 2003
Microsoft Internet Explorer 6.0 Sp1
IIS 5.01 ou superior

Preparando o Ambiente:

1 - Configurando O IIS:

O primeiro passo para ativar este recurso, é configurar o seu IIS para permitir depuração de scripts. Siga os passos abaixo:

A - Abra o console do gerenciamento do IIS
B - No site web padrão (ou no site superior onde você cria as suas aplicações Asp.Net), clique com o botão direito do mouse e escolha a opção "Propriedades" no menu de contexto.
C - Acesse a guia "Diretório Base" (Ou "Pasta Base") e clique sobre o botão "Configuração..."
D - Na caixa de diálogo que aparecerá, clique sobre a guia "Depuração" e marque a opção "Ativar Depuração de Script de Cliente"
E - Confirme a alteração clicando em "Ok" em todas as caixas de dialogo

2 - Configurando o Browser:

Após configurado o Servidor IIS, você precisa garantir que o seu browser também dará suporte à depuração de scripts. Siga os passos abaixo

A - Abra o seu internet explorer
B - Acesse o Menu: Ferramentas/Opções da Internet
C - Clique na guia Avançado (Advanced)
D - Desmarque a opção "Desabilitar Depuração de Script" (Disable Script Debugging) E - Marque a opção "Mostrar Notificação sobre todos os erros de script" (Display a notification about every script error)
F - Clique em "Ok" para confirmar as modificações

3 - Configurando o Microsoft Visual Studio

Normalmente o Visual Studio já está, por padrão configurado para a depuração de scripts, mais caso você queira se certificar disto, siga estes passos:

A - No Visual Studio, Abra o Menu Tool/Options
B - Na árvore de pastas (à esquerda) escolha a pasta "Debugging"
C - No nó "General" Marque a opção "Insert Breakpoints in Active Server Pages for breakpoints in client script"
D - No nó "Just-in-time" Marque as opções "Native" e "Script" (A opção CLR, já deve estar marcada)
E - Clique em "Ok" para aplicar as modificações

Depurando Script:

Agora que o seu ambiente está configurado, você pode depurar seus scripts. Existem algumas particularidades a serem observadas:

A - Breakpoints em Blocos de Script - Embora você possa inserir breakpoints nos blocos de scripts de um documento html a qualquer momento durante o desenvolvimento, eles não funcionarão corretamente. Isso porque se você inserir breakpoints, eles serão interpretados como breakpoints em código de servidor, mesmo que você esteja inserindo-os numa página aspx.Se você inserir um breakpoint num bloco de script, você verá que durante a execução, o mesmo "sai do lugar". Para resolver este problema, você pode proceder de duas maneiras:

1 - No local onde você deseja inserir um breakpoint, insira um código que gerará uma exceção, por exemplo, faça uma chamada há um procedimento que não exista. Fazendo assim, a execução do seu código será interrompida na linha do erro. A partir deste ponto, você pode fazer inspeções em variáveis e objetos e executar passo-a-passo o seu código.

Isso é interessante para depuração de scripts que são executados automaticamente quando o documento é formado.

Exemplo:

<html>
	<script language="javascript">
		alert("código 1");
		abcdefgh();
		alert("Linha2");
	</script>
</html>

Neste caso, a execução do código será interrompida na linha onde está escrito "abcdefgh();" (considerando que não exista nenhuma função com este nome.

2 - O segundo modelo é um pouco mais complexo, mais nada que assuste. Nele você pode inserir breakpoints nos scripts da sua página, porém só após ela estar em execução:

A - Execute o seu aplicativo pelo Microsoft Visual Studio.Net e acesse a página onde está o script que você deseja depurar.
B - No Visual Studio.Net, acesse o menu Debug/Windows/Running Documents (ou pressione CTRL+Alt+N). Clicando nesta opção, deverá aparecer a janela "Running Documents" que representa todos os documentos em execução no seu aplicativo.
C - Dê um duplo-clique sobre o documento onde está o script que você deseja depurar. O documento será carregado numa janela de código.
D - Procure pelos seu bloco de script e insira os breakpoints nos locais apropriados, da mesma forma que você faz no código de servidor.
A - Breakpoints em Scripts de um arquivo de Script - Em arquivos de script você pode inserir breakpoints normalmente que eles funcionarão como em código de servidor.

Finalizando:

Com estes poucos passos você pode utilizar quase todos os recursos de depuração do Visual Studio nos seus Scripts de clientes. Eis alguns dos recursos:

• Inspeção de Variáveis e objetos (através da janela watch)
• Inspeção Rápida Variáveis e objetos (através da janela Quick watch)
• Execução imediata de comandos de script (Através da janela Command Window)
• Alteração de valores de variáveis e propriedades(Command window)
• Execução manual de métodos (Command window)
• Verificação da pilha de execução(Call Stack)
• Verificação de threads(thread window)
• Execução de código passo-a-passo
• Manipulação da linha de execução
• Manipulação de propriedades de breakpoints (hit count, condition, etc)
• E muito mais....

Dúvidas sobre este artigo, favor escreva para Anderson Norberto Santos (andersonhtm@hotmail.com)