Noções básicas sobre os recursos de depuração do AJAX ASP.NET
por Scott Cate
A capacidade de depurar código é uma habilidade que todos os desenvolvedores devem ter em seu arsenal, independentemente da tecnologia que estão usando. Embora muitos desenvolvedores estejam acostumados a usar o Visual Studio .NET ou o Web Developer Express para depurar ASP.NET aplicativos que usam código VB.NET ou C#, alguns não sabem que ele também é extremamente útil para depurar código do lado do cliente, como JavaScript. O mesmo tipo de técnicas usadas para depurar aplicativos .NET também pode ser aplicado a aplicativos habilitados para AJAX e, mais especificamente, ASP.NET aplicativos AJAX.
Depurando ASP.NET aplicativos AJAX
Dan Wahlin
A capacidade de depurar código é uma habilidade que todos os desenvolvedores devem ter em seu arsenal, independentemente da tecnologia que estão usando. Não é preciso dizer que entender as diferentes opções de depuração disponíveis pode economizar muito tempo em um projeto e talvez até mesmo algumas dores de cabeça. Embora muitos desenvolvedores estejam acostumados a usar o Visual Studio .NET ou o Web Developer Express para depurar ASP.NET aplicativos que usam código VB.NET ou C#, alguns não sabem que ele também é extremamente útil para depurar código do lado do cliente, como JavaScript. O mesmo tipo de técnicas usadas para depurar aplicativos .NET também pode ser aplicado a aplicativos habilitados para AJAX e, mais especificamente, ASP.NET aplicativos AJAX.
Neste artigo, você verá como o Visual Studio 2008 e várias outras ferramentas podem ser usadas para depurar ASP.NET aplicativos AJAX para localizar rapidamente bugs e outros problemas. Esta discussão incluirá informações sobre como habilitar a Internet Explorer 6 ou superior para depuração, usando o Visual Studio 2008 e o Script Explorer para percorrer o código, bem como usar outras ferramentas gratuitas, como o Auxiliar de Desenvolvimento na Web. Você também aprenderá a depurar ASP.NET aplicativos AJAX no Firefox usando uma extensão chamada Firebug que permite percorrer o código JavaScript diretamente no navegador sem nenhuma outra ferramenta. Por fim, você será apresentado às classes no ASP.NET Biblioteca AJAX que podem ajudar com várias tarefas de depuração, como instruções de rastreamento e declaração de código.
Antes de tentar depurar páginas exibidas na Internet Explorer há algumas etapas básicas que você precisará executar para habilitá-la para depuração. Vamos dar uma olhada em alguns requisitos básicos de configuração que precisam ser executados para começar.
Configurando Explorer da Internet para depuração
A maioria das pessoas não está interessada em ver problemas de JavaScript encontrados em um site exibido com a Internet Explorer. Na verdade, o usuário médio nem saberia o que fazer se visse uma mensagem de erro. Como resultado, as opções de depuração são desativadas por padrão no navegador. No entanto, é muito simples ativar a depuração e colocá-la em uso à medida que você desenvolve novos aplicativos AJAX.
Para habilitar a funcionalidade de depuração, acesse Ferramentas Opções da Internet no menu internet Explorer e selecione a guia Avançado. Na seção Navegação, verifique se os seguintes itens estão desmarcados:
- Desabilitar a depuração de script (internet Explorer)
- Desabilitar a depuração de script (Outros)
Embora não seja necessário, se você estiver tentando depurar um aplicativo, provavelmente desejará que os erros de JavaScript na página fiquem imediatamente visíveis e óbvios. Você pode forçar que todos os erros sejam mostrados com uma caixa de mensagem marcando a caixa de seleção "Exibir uma notificação sobre cada erro de script". Embora essa seja uma ótima opção para ativar enquanto você está desenvolvendo um aplicativo, ela pode rapidamente se tornar irritante se você estiver apenas examinando outros sites, já que suas chances de encontrar erros de JavaScript são muito boas.
A Figura 1 mostra o que a Internet Explorer caixa de diálogo avançada deve cuidar depois de ter sido configurada corretamente para depuração.
Figura 1: Configurando Explorer da Internet para depuração. (Clique para exibir a imagem em tamanho real)
Depois que a depuração estiver ativada, você verá um novo item de menu aparecer no menu Exibir chamado Depurador de Scripts. Ele tem duas opções disponíveis, incluindo Abrir e Interromper na Próxima Instrução. Quando Abrir estiver selecionado, você será solicitado a depurar a página no Visual Studio 2008 (observe que o Visual Web Developer Express também pode ser usado para depuração). Se o .NET do Visual Studio estiver em execução no momento, você poderá optar por usar essa instância ou criar uma nova instância. Quando Break at Next Statement for selecionado, você será solicitado a depurar a página quando o código JavaScript for executado. Se o código JavaScript for executado no evento onLoad da página, você poderá atualizar a página para disparar uma sessão de depuração. Se o código JavaScript for executado depois que um botão for clicado, o depurador será executado imediatamente depois que o botão for clicado.
Observação
Se você estiver executando no Windows Vista com o UAC (Controle de Acesso de Usuário) habilitado e tiver o Visual Studio 2008 definido para ser executado como administrador, o Visual Studio não será anexado ao processo quando você for solicitado a anexar. Para contornar esse problema, inicie o Visual Studio primeiro e use essa instância para depurar.
Embora a próxima seção demonstre como depurar uma página do AJAX ASP.NET diretamente do Visual Studio 2008, usar a opção Depurador de Script do Explorer da Internet é útil quando uma página já está aberta e você gostaria de inspecioná-la mais detalhadamente.
Depuração com o Visual Studio 2008
O Visual Studio 2008 fornece funcionalidade de depuração que os desenvolvedores em todo o mundo dependem todos os dias para depurar aplicativos .NET. O depurador interno permite percorrer o código, exibir dados de objeto, watch para variáveis específicas, monitorar a pilha de chamadas e muito mais. Além de depurar VB.NET ou código C#, o depurador também é útil para depurar ASP.NET aplicativos AJAX e permitirá que você percorra o código JavaScript linha por linha. Os detalhes que seguem se concentram em técnicas que podem ser usadas para depurar arquivos de script do lado do cliente em vez de fornecer um discurso sobre o processo geral de depuração de aplicativos usando o Visual Studio 2008.
O processo de depuração de uma página no Visual Studio 2008 pode ser iniciado de várias maneiras diferentes. Primeiro, você pode usar a opção Depurador de Script Explorer da Internet mencionada na seção anterior. Isso funciona bem quando uma página já está carregada no navegador e você deseja começar a depurá-la. Como alternativa, você pode clicar com o botão direito do mouse em uma página .aspx no Gerenciador de Soluções e selecionar Definir como Página Inicial no menu. Se você estiver acostumado a depurar ASP.NET páginas, provavelmente já fez isso antes. Depois que F5 for pressionado, a página poderá ser depurada. No entanto, embora você geralmente possa definir um ponto de interrupção em qualquer lugar que queira no código VB.NET ou C#, nem sempre é o caso do JavaScript como você verá a seguir.
Scripts inseridos versus externos
O depurador do Visual Studio 2008 trata JavaScript inserido em uma página diferente dos arquivos JavaScript externos. Com arquivos de script externos, você pode abrir o arquivo e definir um ponto de interrupção em qualquer linha escolhida. Os pontos de interrupção podem ser definidos clicando na área da bandeja cinza à esquerda da janela do editor de código. Quando o JavaScript é inserido diretamente em uma página usando a <script> marca , definir um ponto de interrupção clicando na área de bandeja cinza não é uma opção. As tentativas de definir um ponto de interrupção em uma linha de script inserido resultarão em um aviso informando "Este não é um local válido para um ponto de interrupção".
Você pode contornar esse problema movendo o código para um arquivo .js externo e referenciando-o usando o atributo src da marca de <script> :
<script type="text/javascript" src="Scripts/YourScript.js"></script>
E se mover o código para um arquivo externo não for uma opção ou exigir mais trabalho do que vale a pena? Embora não seja possível definir um ponto de interrupção usando o editor, você pode adicionar a instrução do depurador diretamente ao código em que deseja iniciar a depuração. Você também pode usar a classe Sys.Debug disponível no ASP.NET biblioteca AJAX para forçar a depuração a iniciar. Você aprenderá mais sobre a classe Sys.Debug mais adiante neste artigo.
Um exemplo de como usar o debugger palavra-chave é mostrado na Listagem 1. Este exemplo força o depurador a interromper antes que uma chamada para uma função de atualização seja feita.
Listagem 1. Usar o depurador palavra-chave para forçar o depurador .NET do Visual Studio a ser interrompido.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
debugger;
UpdatePerson(person);
}
Depois que a instrução do depurador for atingida, você será solicitado a depurar a página usando o .NET do Visual Studio e poderá começar a percorrer o código. Ao fazer isso, você pode encontrar um problema ao acessar ASP.NET arquivos de script da biblioteca AJAX usados na página, portanto, vamos dar uma olhada no uso do Visual Studio . Explorer de script do NET.
Usando o Windows .NET do Visual Studio para Depurar
Depois que uma sessão de depuração for iniciada e você começar a percorrer o código usando a tecla F11 padrão, poderá encontrar a caixa de diálogo de erro mostrada na Figura 2, a menos que todos os arquivos de script usados na página estejam abertos e disponíveis para depuração.
Figura 2: caixa de diálogo de erro mostrada quando nenhum código-fonte está disponível para depuração. (Clique para exibir a imagem em tamanho real)
Essa caixa de diálogo é mostrada porque o Visual Studio .NET não tem certeza de como acessar o código-fonte de alguns dos scripts referenciados pela página. Embora isso possa ser bastante frustrante no início, há uma solução simples. Depois de iniciar uma sessão de depuração e atingir um ponto de interrupção, vá para a janela Depurar Script do Windows Explorer no menu do Visual Studio 2008 ou use a tecla de atalho Ctrl+Alt+N.
Observação
Se você não conseguir ver o menu script Explorer listado, acesse Ferramentas>Personalizar>Comandos no menu .NET do Visual Studio. Localize a entrada Depurar na seção Categorias e clique nela para mostrar todas as entradas de menu disponíveis. Na lista Comandos, role para baixo até Script Explorer e arraste-o para cima até o menu Depurar Windows mencionado anteriormente. Isso disponibilizará a entrada de menu Script Explorer sempre que você executar o Visual Studio .NET.
O script Explorer pode ser usado para exibir todos os scripts usados em uma página e abri-los no editor de código. Depois que o script Explorer estiver aberto, clique duas vezes na página .aspx que está sendo depurada no momento para abri-la na janela do editor de código. Execute a mesma ação para todos os outros scripts mostrados no script Explorer. Depois que todos os scripts estiverem abertos na janela de código, você poderá pressionar F11 (e usar as outras teclas de acesso de depuração) para percorrer o código. A Figura 3 mostra um exemplo do script Explorer. Ele lista o arquivo atual que está sendo depurado (Demo.aspx), bem como dois scripts personalizados e dois scripts injetados dinamicamente na página pelo ASP.NET AJAX ScriptManager.
Figura 3. O script Explorer fornece acesso fácil aos scripts usados em uma página. (Clique para exibir a imagem em tamanho real)
Várias outras janelas também podem ser usadas para fornecer informações úteis à medida que você percorre o código em uma página. Por exemplo, você pode usar a janela Locais para ver os valores de variáveis diferentes usadas na página, a janela Imediata para avaliar variáveis ou condições específicas e exibir a saída. Você também pode usar a janela Saída para exibir instruções de rastreamento gravadas usando a função Sys.Debug.trace (que será abordada posteriormente neste artigo) ou a função Debug.writeln do Explorer internet.
Ao percorrer o código usando o depurador, você pode passar o mouse sobre variáveis no código para exibir o valor atribuído a elas. No entanto, o depurador de script ocasionalmente não mostrará nada enquanto você faz mouse sobre uma determinada variável JavaScript. Para ver o valor, realce a instrução ou a variável que você está tentando ver na janela do editor de código e, em seguida, passe o mouse sobre ele. Embora essa técnica não funcione em todas as situações, muitas vezes você poderá ver o valor sem precisar olhar em uma janela de depuração diferente, como a janela Locais.
Um tutorial em vídeo que demonstra alguns dos recursos discutidos aqui pode ser exibido em http://www.xmlforasp.net.
Depuração com o Auxiliar de Desenvolvimento na Web
Embora o Visual Studio 2008 (e o Visual Web Developer Express 2008) sejam ferramentas de depuração muito capazes, há opções adicionais que também podem ser usadas, que são mais leves. Uma das ferramentas mais recentes a serem lançadas é o Auxiliar de Desenvolvimento na Web. Nikhil Kothari da Microsoft (um dos principais arquitetos ASP.NET AJAX na Microsoft) escreveu essa excelente ferramenta que pode executar muitas tarefas diferentes, desde depuração simples até exibição de mensagens de solicitação e resposta HTTP.
O auxiliar de desenvolvimento web pode ser usado diretamente dentro de Explorer da Internet, o que torna conveniente usar. Ele é iniciado selecionando Ferramentas Auxiliar de Desenvolvimento Web no menu Explorer da Internet. Isso abrirá a ferramenta na parte inferior do navegador, o que é bom, pois você não precisa sair do navegador para executar várias tarefas, como solicitação HTTP e log de mensagens de resposta. A Figura 4 mostra como é a aparência do Auxiliar de Desenvolvimento na Web em ação.
Figura 4: Auxiliar de Desenvolvimento na Web (clique para exibir imagem em tamanho real)
O auxiliar de desenvolvimento da Web não é uma ferramenta que você usará para percorrer a linha de código por linha, como acontece com o Visual Studio 2008. No entanto, ele pode ser usado para exibir a saída de rastreamento, avaliar facilmente variáveis em um script ou explorar que os dados estão dentro de um objeto JSON. Também é muito útil para exibir dados que são passados de e para uma página ASP.NET AJAX e um servidor.
Depois que o Auxiliar de Desenvolvimento na Web estiver aberto na Internet Explorer, a depuração de scripts deverá ser habilitada selecionando Script Habilitar Depuração de Script no menu auxiliar de Desenvolvimento da Web, conforme mostrado anteriormente na Figura 4. Isso permite que a ferramenta intercepte erros que ocorrem à medida que uma página é executada. Ele também permite acesso fácil a mensagens de rastreamento que são saída na página. Para exibir informações de rastreamento ou executar comandos de script para testar funções diferentes em uma página, selecione Script Mostrar Console de Script no menu Auxiliar de Desenvolvimento web. Isso fornece acesso a uma janela de comando e a uma janela imediata simples.
Exibindo mensagens de rastreamento e dados de objeto JSON
A janela imediata pode ser usada para executar comandos de script ou até mesmo carregar ou salvar scripts que são usados para testar funções diferentes em uma página. A janela de comando exibe mensagens de rastreamento ou depuração gravadas pela página que está sendo exibida. A listagem 2 mostra como gravar uma mensagem de rastreamento usando a função Debug.writeln do Explorer internet.
Listagem 2. Escrevendo uma mensagem de rastreamento do lado do cliente usando a classe Debug.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
Debug.writeln("Person name: " + person.LastName);
UpdatePerson(person);
}
Se a propriedade LastName contiver um valor de Doe, o Auxiliar de Desenvolvimento Web exibirá a mensagem "Nome da pessoa: Doe" na janela de comando do console de script (supondo que a depuração tenha sido habilitada). O Auxiliar de Desenvolvimento web também adiciona um objeto de debugService de nível superior em páginas que podem ser usadas para gravar informações de rastreamento ou exibir o conteúdo de objetos JSON. A listagem 3 mostra um exemplo de como usar a função de rastreamento da classe debugService.
Listagem 3. Usando a classe de debugService do Auxiliar de Desenvolvimento Web para gravar uma mensagem de rastreamento.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.trace("Person name: " + person.LastName);
}
UpdatePerson(person);
}
Um bom recurso da classe debugService é que ela funcionará mesmo se a depuração não estiver habilitada na Internet Explorer facilitando o acesso sempre aos dados de rastreamento quando o Auxiliar de Desenvolvimento da Web estiver em execução. Quando a ferramenta não estiver sendo usada para depurar uma página, as instruções de rastreamento serão ignoradas, pois a chamada para window.debugService retornará false.
A classe debugService também permite que os dados do objeto JSON sejam exibidos usando a janela inspetor do Auxiliar de Desenvolvimento da Web. A listagem 4 cria um objeto JSON simples que contém dados de pessoa. Depois que o objeto é criado, uma chamada é feita para a função de inspeção da classe debugService para permitir que o objeto JSON seja inspecionado visualmente.
Listagem 4. Usando a função debugService.inspect para exibir dados de objeto JSON.
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.inspect("Person Object",person);
}
UpdatePerson(person);
}
Chamar a função GetPerson() na página ou por meio da janela imediata resultará na janela de diálogo Inspetor de Objetos aparecendo conforme mostrado na Figura 5. As propriedades dentro do objeto podem ser alteradas dinamicamente realçando-as, alterando o valor mostrado na caixa de texto Valor e clicando no link Atualizar. O uso do Inspetor de Objetos torna simples exibir dados de objeto JSON e experimentar a aplicação de valores diferentes às propriedades.
Erros de depuração
Além de permitir que dados de rastreamento e objetos JSON sejam exibidos, o auxiliar de desenvolvimento web também pode ajudar na depuração de erros em uma página. Se um erro for encontrado, você será solicitado a continuar para a próxima linha de código ou depurar o script (consulte a Figura 6). A janela da caixa de diálogo Erro de Script mostra a pilha de chamadas completa, bem como os números de linha para que você possa identificar facilmente onde os problemas estão dentro de um script.
Figura 5: usando a janela Inspetor de Objetos para exibir um objeto JSON. (Clique para exibir a imagem em tamanho real)
Selecionar a opção de depuração permite executar instruções de script diretamente na janela imediata do Auxiliar de Desenvolvimento web para exibir o valor das variáveis, gravar objetos JSON, além de mais. Se a mesma ação que disparou o erro for executada novamente e o Visual Studio 2008 estiver disponível no computador, você será solicitado a iniciar uma sessão de depuração para que você possa percorrer a linha de código por linha, conforme discutido na seção anterior.
Figura 6: Caixa de diálogo Erro de Script do Auxiliar de Desenvolvimento web (clique para exibir imagem em tamanho real)
Inspecionando mensagens de solicitação e resposta
Durante a depuração ASP.NET páginas AJAX, geralmente é útil ver mensagens de solicitação e resposta enviadas entre uma página e um servidor. Exibir o conteúdo dentro das mensagens permite que você veja se os dados adequados estão sendo passados, bem como o tamanho das mensagens. O Auxiliar de Desenvolvimento na Web fornece um excelente recurso de agente de mensagens HTTP que facilita a exibição de dados como texto bruto ou em um formato mais legível.
Para exibir ASP.NET mensagens de solicitação e resposta do AJAX, o agente HTTP deve ser habilitado selecionando HTTP Habilitar registro em log HTTP no menu Auxiliar de Desenvolvimento web. Depois de habilitada, todas as mensagens enviadas da página atual podem ser exibidas no visualizador de log HTTP, que pode ser acessado selecionando Http Mostrar Logs HTTP.
Embora a exibição do texto bruto enviado em cada mensagem de solicitação/resposta seja certamente útil (e uma opção no Auxiliar de Desenvolvimento na Web), geralmente é mais fácil exibir dados de mensagem em um formato mais gráfico. Depois que o log HTTP tiver sido habilitado e as mensagens tiverem sido registradas, os dados da mensagem poderão ser exibidos clicando duas vezes na mensagem no visualizador de log HTTP. Isso permite que você exiba todos os cabeçalhos associados a uma mensagem, bem como o conteúdo real da mensagem. A Figura 7 mostra um exemplo de mensagem de solicitação e mensagem de resposta exibida na janela Visualizador de Log HTTP.
Figura 7: usando o Visualizador de Log HTTP para exibir dados de mensagem de solicitação e resposta. (Clique para exibir a imagem em tamanho real)
O Visualizador de Log HTTP analisa automaticamente objetos JSON e os exibe usando uma exibição de árvore, tornando-o rápido e fácil de exibir os dados de propriedade do objeto. Quando um UpdatePanel está sendo usado em uma página ASP.NET AJAX, o visualizador divide cada parte da mensagem em partes individuais, conforme mostrado na Figura 8. Esse é um ótimo recurso que torna muito mais fácil ver e entender o que está na mensagem em comparação com a exibição dos dados brutos da mensagem.
Figura 8: uma mensagem de resposta UpdatePanel exibida usando o Visualizador de Log HTTP. (Clique para exibir a imagem em tamanho real)
Há várias outras ferramentas que podem ser usadas para exibir mensagens de solicitação e resposta, além do Auxiliar de Desenvolvimento na Web. Outra boa opção é o Fiddler, que está disponível gratuitamente em http://www.fiddlertool.com. Embora o Fiddler não seja discutido aqui, também é uma boa opção quando você precisa inspecionar detalhadamente cabeçalhos e dados de mensagens.
Depuração com Firefox e Firebug
Embora o Explorer da Internet ainda seja o navegador mais usado, outros navegadores, como o Firefox, tornaram-se bastante populares e estão sendo usados cada vez mais. Como resultado, você desejará exibir e depurar suas páginas ASP.NET AJAX no Firefox, bem como Explorer da Internet para garantir que seus aplicativos funcionem corretamente. Embora o Firefox não possa vincular diretamente ao Visual Studio 2008 para depuração, ele tem uma extensão chamada Firebug que pode ser usada para depurar páginas. O Firebug pode ser baixado gratuitamente acessando http://www.getfirebug.com.
O Firebug fornece um ambiente de depuração completo que pode ser usado para percorrer linha por linha de código, acessar todos os scripts usados em uma página, exibir estruturas DOM, exibir estilos CSS e até mesmo acompanhar eventos que ocorrem em uma página. Depois de instalado, o Firebug pode ser acessado selecionando Ferramentas Firebug Abrir Firebug no menu do Firefox. Assim como o Auxiliar de Desenvolvimento na Web, o Firebug é usado diretamente no navegador, embora também possa ser usado como um aplicativo autônomo.
Depois que o Firebug estiver em execução, os pontos de interrupção poderão ser definidos em qualquer linha de um arquivo JavaScript, independentemente de o script estar inserido em uma página ou não. Para definir um ponto de interrupção, primeiro carregue a página apropriada que deseja depurar no Firefox. Depois que a página for carregada, selecione o script a ser depurado na lista suspensa Scripts do Firebug. Todos os scripts usados pela página serão mostrados. Um ponto de interrupção é definido clicando na área de bandeja cinza do Firebug na linha em que o ponto de interrupção deve ir, como você faria no Visual Studio 2008.
Depois que um ponto de interrupção for definido no Firebug, você poderá executar a ação necessária para executar o script que precisa ser depurado, como clicar em um botão ou atualizar o navegador para disparar o evento onLoad. A execução será interrompida automaticamente na linha que contém o ponto de interrupção. A Figura 9 mostra um exemplo de um ponto de interrupção que foi disparado no Firebug.
Figura 9: tratamento de pontos de interrupção no Firebug. (Clique para exibir a imagem em tamanho real)
Depois que um ponto de interrupção for atingido, você poderá intervir, percorrer ou sair do código usando os botões de seta. À medida que você percorre o código, as variáveis de script são exibidas na parte direita do depurador, permitindo que você veja valores e faça drill down em objetos. Firebug também inclui uma lista suspensa Pilha de Chamadas para exibir as etapas de execução do script que levaram até a linha atual ser depurada.
Firebug também inclui uma janela de console que pode ser usada para testar diferentes instruções de script, avaliar variáveis e exibir a saída de rastreamento. Ele é acessado clicando na guia Console na parte superior da janela Firebug. A página que está sendo depurada também pode ser "inspecionada" para ver a estrutura e o conteúdo do DOM clicando na guia Inspecionar. Conforme você passa o mouse sobre os diferentes elementos DOM mostrados na janela inspetor, a parte apropriada da página será realçada, facilitando a visualização de onde o elemento é usado na página. Os valores de atributo associados a um determinado elemento podem ser alterados "ao vivo" para experimentar a aplicação de diferentes larguras, estilos etc. para um elemento . Esse é um bom recurso que evita que você tenha que alternar constantemente entre o editor de código-fonte e o navegador Firefox para exibir como as alterações simples afetam uma página.
A Figura 10 mostra um exemplo de como usar o inspetor do DOM para localizar uma caixa de texto chamada txtCountry na página. O inspetor firebug também pode ser usado para exibir estilos CSS usados em uma página, bem como eventos que ocorrem, como acompanhamento de movimentos do mouse, cliques de botão, além de mais.
Figura 10: usando o inspetor DOM do Firebug. (Clique para exibir a imagem em tamanho real)
O Firebug fornece uma maneira leve de depurar rapidamente uma página diretamente no Firefox, bem como uma excelente ferramenta para inspecionar diferentes elementos dentro da página.
Suporte de depuração no AJAX ASP.NET
A biblioteca ASP.NET AJAX inclui muitas classes diferentes que podem ser usadas para simplificar o processo de adição de recursos do AJAX em uma página da Web. Você pode usar essas classes para localizar elementos em uma página e manipulá-los, adicionar novos controles, chamar Serviços Web e até mesmo manipular eventos. O ASP.NET biblioteca AJAX também contém classes que podem ser usadas para aprimorar o processo de depuração de páginas. Nesta seção, você será apresentado à classe Sys.Debug e verá como ele pode ser usado em aplicativos.
Usando a classe Sys.Debug
A classe Sys.Debug (uma classe JavaScript localizada no namespace do Sys) pode ser usada para executar várias funções diferentes, incluindo gravar saída de rastreamento, executar declarações de código e forçar a falha do código para que ele possa ser depurado. Ele é usado extensivamente nos arquivos de depuração da biblioteca ASP.NET AJAX (instalados em C:\Arquivos de Programas\Microsoft ASP.NET\ASP.NET 2.0 Extensões AJAX\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 por padrão) para executar testes condicionais (chamadas asserções) que garantem que os parâmetros sejam passados corretamente para funções, que os objetos contenham os dados esperados e gravem instruções de rastreamento.
A classe Sys.Debug expõe várias funções diferentes que podem ser usadas para lidar com rastreamento, declarações de código ou falhas, conforme mostrado na Tabela 1.
Tabela 1. Funções da classe Sys.Debug.
| Nome da função | Descrição |
|---|---|
| assert(condition, message, displayCaller) | Afirma que o parâmetro de condição é true. Se a condição que está sendo testada for falsa, uma caixa de mensagem será usada para exibir o valor do parâmetro de mensagem. Se o parâmetro displayCaller for true, o método também exibirá informações sobre o chamador. |
| clearTrace() | Apaga a saída de instruções de operações de rastreamento. |
| fail(message) | Faz com que o programa interrompa a execução e interrompa o depurador. O parâmetro de mensagem pode ser usado para fornecer um motivo para a falha. |
| trace(message) | Grava o parâmetro de mensagem na saída do rastreamento. |
| traceDump(object, name) | Gera os dados de um objeto em um formato legível. O parâmetro name pode ser usado para fornecer um rótulo para o despejo de rastreamento. Todos os sub-objetos dentro do objeto que está sendo despejado serão gravados por padrão. |
O rastreamento do lado do cliente pode ser usado da mesma forma que a funcionalidade de rastreamento disponível em ASP.NET. Ele permite que mensagens diferentes sejam vistas facilmente sem interromper o fluxo do aplicativo. A listagem 5 mostra um exemplo de como usar a função Sys.Debug.trace para gravar no log de rastreamento. Essa função simplesmente usa a mensagem que deve ser gravada como um parâmetro.
Listagem 5. Usando a função Sys.Debug.trace.
function BuildPerson()
{
var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
UpdatePerson(person);
}
Se você executar o código mostrado na Listagem 5, não verá nenhuma saída de rastreamento na página. A única maneira de vê-lo é usar uma janela de console disponível no Visual Studio .NET, Auxiliar de Desenvolvimento Web ou Firebug. Se você quiser ver a saída de rastreamento na página, precisará adicionar uma marca TextArea e fornecer uma ID de TraceConsole, conforme mostrado a seguir:
<textArea id="TraceConsole" rows="10" cols="50"></textArea>
Todas as instruções Sys.Debug.trace na página serão gravadas no TraceConsole TextArea.
Nos casos em que você deseja ver os dados contidos em um objeto JSON, você pode usar a função traceDump da classe Sys.Debug. Essa função usa dois parâmetros, incluindo o objeto que deve ser despejado no console de rastreamento e um nome que pode ser usado para identificar o objeto na saída do rastreamento. A listagem 6 mostra um exemplo de como usar a função traceDump.
Listagem 6. Usando a função Sys.Debug.traceDump.
function UpdatePerson(person)
{
//Dump contents of the person object to the trace output
Sys.Debug.traceDump(person,"Person Data");
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
A Figura 11 mostra a saída de chamar a função Sys.Debug.traceDump. Observe que, além de gravar os dados do objeto Person, ele também grava os dados do subpropósitório Address.
Além do rastreamento, a classe Sys.Debug também pode ser usada para executar declarações de código. As declarações são usadas para testar se condições específicas são atendidas enquanto um aplicativo está em execução. A versão de depuração do ASP.NET scripts de biblioteca AJAX contém várias instruções assert para testar uma variedade de condições.
A listagem 7 mostra um exemplo de como usar a função Sys.Debug.assert para testar uma condição. O código testa se o objeto Address é nulo ou não antes de atualizar um objeto Person.
Figura 11: saída da função Sys.Debug.traceDump. (Clique para exibir a imagem em tamanho real)
Listagem 7. Usando a função debug.assert.
function UpdatePerson(person)
{
//Check if address is null
Sys.Debug.assert(person.get_address() == null,"Address is null!",true);
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
Três parâmetros são passados, incluindo a condição a ser avaliada, a mensagem a ser exibida se a declaração retornar false e se as informações sobre o chamador devem ou não ser exibidas. Nos casos em que uma asserção falhar, a mensagem será exibida, bem como as informações do chamador se o terceiro parâmetro for verdadeiro. A Figura 12 mostra um exemplo da caixa de diálogo de falha exibida se a asserção mostrada na Listagem 7 falhar.
A função final a ser abordada é Sys.Debug.fail. Quando você deseja forçar o código a falhar em uma linha específica em um script, você pode adicionar uma chamada Sys.Debug.fail em vez da instrução de depurador normalmente usada em aplicativos JavaScript. A função Sys.Debug.fail aceita um único parâmetro de cadeia de caracteres que representa o motivo da falha, conforme mostrado a seguir:
Sys.Debug.fail("My forced failure of script.");
Figura 12: uma mensagem de falha Sys.Debug.assert. (Clique para exibir a imagem em tamanho real)
Quando uma instrução Sys.Debug.fail é encontrada enquanto um script está em execução, o valor do parâmetro de mensagem será exibido no console de um aplicativo de depuração, como o Visual Studio 2008, e você será solicitado a depurar o aplicativo. Um caso em que isso pode ser bastante útil é quando você não pode definir um ponto de interrupção com o Visual Studio 2008 em um script embutido, mas gostaria que o código parasse em uma linha específica para que você possa inspecionar o valor das variáveis.
Noções básicas sobre a propriedade ScriptMode do controle ScriptManager
A biblioteca ASP.NET AJAX inclui versões de script de depuração e versão instaladas em C:\Arquivos de Programas\Microsoft ASP.NET\ASP.NET 2.0 Extensões AJAX\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 por padrão. Os scripts de depuração são bem formatados, fáceis de ler e têm várias chamadas Sys.Debug.assert espalhadas por elas enquanto os scripts de versão têm espaço em branco removido e usam a classe Sys.Debug com moderação para minimizar seu tamanho geral.
O controle ScriptManager adicionado às páginas ASP.NET AJAX lê o atributo de depuração do elemento de compilação em web.config para determinar quais versões de scripts de biblioteca carregar. No entanto, você pode controlar se os scripts de depuração ou de versão são carregados (scripts de biblioteca ou seus próprios scripts personalizados) alterando a propriedade ScriptMode. ScriptMode aceita uma enumeração ScriptMode cujos membros incluem Auto, Debug, Release e Inherit.
ScriptMode usa como padrão um valor de Auto, o que significa que o ScriptManager marcar o atributo de depuração em web.config. Quando a depuração for falsa, o ScriptManager carregará a versão de lançamento de ASP.NET scripts de biblioteca AJAX. Quando depurar for true, a versão de depuração dos scripts será carregada. Alterar a propriedade ScriptMode para Release ou Debug forçará o ScriptManager a carregar os scripts apropriados, independentemente do valor que o atributo de depuração tem em web.config. A listagem 8 mostra um exemplo de como usar o controle ScriptManager para carregar scripts de depuração da biblioteca ASP.NET AJAX.
Listagem 8. Carregando scripts de depuração usando o ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>
Você também pode carregar versões diferentes (depuração ou versão) de seus próprios scripts personalizados usando a propriedade Scripts do ScriptManager junto com o componente ScriptReference, conforme mostrado na Listagem 9.
Listagem 9. Carregando scripts personalizados usando o ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
</Scripts>
</asp:ScriptManager>
Observação
Se você estiver carregando scripts personalizados usando o componente ScriptReference, deverá notificar o ScriptManager quando o script terminar de ser carregado adicionando o seguinte código na parte inferior do script:
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
O código mostrado na Listagem 9 informa ao ScriptManager para procurar uma versão de depuração do script Person para que ele procure automaticamente Person.debug.js em vez de Person.js. Se o arquivo Person.debug.js não for encontrado, um erro será gerado.
Nos casos em que você deseja que uma versão de depuração ou versão de um script personalizado seja carregada com base no valor da propriedade ScriptMode definida no controle ScriptManager, você pode definir a propriedade ScriptMode do controle ScriptReference como Inherit. Isso fará com que a versão adequada do script personalizado seja carregada com base na propriedade ScriptMode do ScriptManager, conforme mostrado na Listagem 10. Como a propriedade ScriptMode do controle ScriptManager está definida como Depurar, o script Person.debug.js será carregado e usado na página.
Listando 10. Herdando o ScriptMode do ScriptManager para scripts personalizados.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
</Scripts>
</asp:ScriptManager>
Usando a propriedade ScriptMode adequadamente, você pode depurar aplicativos com mais facilidade e simplificar o processo geral. Os scripts de versão da biblioteca ASP.NET AJAX são bastante difíceis de percorrer e ler, pois a formatação de código foi removida enquanto os scripts de depuração são formatados especificamente para fins de depuração.
Conclusão
A tecnologia AJAX ASP.NET da Microsoft fornece uma base sólida para a criação de aplicativos habilitados para AJAX que podem aprimorar a experiência geral do usuário final. No entanto, assim como acontece com qualquer tecnologia de programação, bugs e outros problemas de aplicativo certamente surgirão. Saber sobre as diferentes opções de depuração disponíveis pode economizar muito tempo e resultar em um produto mais estável.
Neste artigo, você foi apresentado a várias técnicas diferentes para depuração ASP.NET páginas AJAX, incluindo Explorer da Internet com o Visual Studio 2008, o Auxiliar de Desenvolvimento para a Web e o Firebug. Essas ferramentas podem simplificar o processo geral de depuração, pois você pode acessar dados variáveis, percorrer o código linha por linha e exibir instruções de rastreamento. Além das diferentes ferramentas de depuração discutidas, você também viu como a classe Sys.Debug da biblioteca ASP.NET AJAX pode ser usada em um aplicativo e como a classe ScriptManager pode ser usada para carregar versões de depuração ou lançamento de scripts.
Biografia
Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET and XML Web Services) é um instrutor de desenvolvimento e consultor de arquitetura do .NET na interface technical training (www.interfacett.com). Dan fundou o site XML for ASP.NET Developers (www.XMLforASP.NET), está no Bureau do Orador da INETA e fala em várias conferências. Dan foi co-autor de Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks e XML for ASP.NET Developers (Sams). Quando ele não está escrevendo código, artigos ou livros, Dan gosta de escrever e gravar música e jogar golfe e basquete com sua esposa e filhos.
Scott Cate trabalha com tecnologias da Microsoft Web desde 1997 e é presidente de myKB.com (www.myKB.com), onde é especialista em escrever aplicativos baseados em ASP.NET com foco em soluções de Software da Base de Dados de Conhecimento. Scott pode ser contatado por e-mail em scott.cate@myKB.com ou seu blog em ScottCate.com