Partilhar via

Visão geral de Depuração e Rastreamento de Aplicativos AJAX

  • Artigo

Aplicativos ASP.NET com tecnologia AJAX habilitada contêm uma mistura de código do servidor e código do cliente.O navegador também pode solicitar dados adicionais de forma assíncrona.Isso pode tornar desafiador depurar aplicativos da Web habilitado para AJAX.Esta visão geral descreve algumas técnicas e ferramentas que podem ajudá-lo a depurar seu código mais facilmente.

Observação:

Com a exceção de Visual Studio e Internet Explorer, os programas mencionados neste tópico são ferramentas de terceiros e não são suportados pela Microsoft.Por favor, consulte a ferramenta do site para obter informações sobre licenciamento e suporte.

Esse tópico contém:

  • Cenários

  • Segundo plano

  • Referência de Classe

Cenários

Você pode usar as seguintes abordagens para depurar um aplicativo ASP.NET habilitado para AJAX em diferentes estágios de desenvolvimento:

  • Habilite a depuração no arquivo de configuração.

  • Use o rastreamento no servidor.

  • Use os métodos da classe Sys.Debug para definir pontos de interrupção e controlar a saída de rastreamento.

  • Habilite a depuração em seu navegador.

  • Anexe o depurador Visual Studio 2008 a sua instância do Internet Explorer ou use ferramentas externas para depurar em outros navegadores.

  • Use ferramentas externas para capturar o tráfego HTTP.

Voltar ao topo

Segundo plano

A arquitetura do ASP.NET AJAX fornece um modelo para modos de lançamento e depuração.O modo de lançamento fornece verificação de erro e manipulação de exceção que são otimizadas para desempenho, com tamanho do script minimizado.O modo de depuração fornece recursos para depuração mais robustos, como verificação de tipo e argumento.Se você criar versões de depuração dos arquivos de script de cliente ou recursos de script, o ASP.NET executa as versões de depuração quando o aplicativo está em modo de depuração.Isso permite que você acione exceções na depuração de scripts mas ainda mantenha o tamanho do código de lançamento para um mínimo.

Uma classe auxiliar de depuração, Sys.Debug, fornece métodos para exibir objetos em formato legível no final de uma página da Web.Ela também mostra mensagens de rastreamento e permite que você use asserções e entre no depurador.Um objeto API Error estendido fornece úteis detalhes da exceção, com suporte aos modos de lançamento e depuração.

As seções a seguir fornecem detalhes sobre as técnicas e ferramentas que você pode usar para depuração e rastreamento.

Configurando o Aplicativo para Depuração

Para habilitar a depuração, adicione um elemento compilation ao arquivo Web.config da raiz do site e defina seu atributo debug como true.Para obter mais informações, consulte Elemento compilation (Esquema de configurações ASP.NET).

O exemplo a seguir mostra uma seção de um arquivo Web.config que tem o atributo debug definido para depuração.

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

Quando a depuração está ativada, o ASP.NET usa uma versão de depuração do Microsoft AJAX Library e versões de depuração de seus arquivos personalizados de script de cliente, se disponível.

Configurando o Aplicativo de Depuração para o Modo de Versão para a Implantação

Quando você implanta uma versão de produção de um aplicativo ASP.NET com tecnologia AJAX habilitada, defina o aplicativo para o modo de produção.Isso garante que o ASP.NET use a versão de lançamento otimizada de performance das bibliotecas de AJAX.Se você tiver criado versões de depuração e liberação de seus arquivos de script e recursos de script personalizados, o ASP.NET também usa as versões de lançamento.Para definir o aplicativo para o modo de liberação, faça o seguinte:

  • No arquivo Web.config, se o elemento compilation contém um atributo debug, certifique-se que o atributo debug é definido como false.

  • Verifique se qualquer página da Web que contém um controle ScriptManager tem sua propriedade ScriptMode definida como Release.

O atributo debug da diretiva @ Page não afeta os aplicativos ASP.NET AJAX.O controle ScriptManager usa apenas as configurações no arquivo Web.config e em suas propriedades IsDebuggingEnabled e ScriptMode para determinar se deve processar scripts de depuração.

Rastreando no Servidor.

Se você estiver usando o rastreamento no servidor para depurar páginas da Web que tenham renderização parcial da página ativada, você deve usar o visualizador de rastreamento (Trace.axd) para exibir a saída de rastreamento.Você pode acrescentar a saída de rastreamento ao final da página, e ela é exibida na primeira vez que a página é processada.No entanto, a exibição de rastreamento não é atualizada como resultado de postagens assíncronas, porque somente o conteúdo de controles UpdatePanel precisam ser atualizados será alterado.Para obter mais informações sobre como usar o visualizador de rastreamento, consulte Visão geral do rastreamento no ASP.NET.

Observação:

Processamento parcial de página é ativado quando a página contém um controle ScriptManager com sua propriedade EnablePartialRendering definida como true.A página também deve conter um ou mais controles UpdatePanel.

Classe Auxiliar de Depuração

O ASP.NET fornece a classe Sys.Debug para depurar aplicativos do cliente.Chamando métodos da classe Sys.Debug,você pode exibir objetos em formato legível no final da página, mostrar mensagens de rastreamento, usar declarações e invadir o depurador.

Se você estiver usando Visual Studio e Internet Explorer, você pode anexar o Visual Studio o depurador para o navegador e exibir mensagens de rastreamento do depurador na Saída janela. Se você não estiver usando Visual Studio, você pode exibir mensagens de rastreamento do depurador no Internet Explorer, criando um textarea elemento na página e definir sua ID como TraceConsole. No Mozilla Firefox, você pode exibir mensagens de rastreamento do depurador usando ferramentas que estão disponíveis como extensões.Os navegadores Safari Apple e Opera exibem mensagens de rastreamento em seus respectivos consoles de depuração.

A tabela a seguir lista os métodos da classe Sys.Debug.

O exemplo a seguir mostra como chamar métodos da classe Sys.Debug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

Configurando o Internet Explorer para Depuração

Por padrão, o Internet Explorer ignora os problemas que encontra em JavaScript.Você pode habilitar a depuração usando o procedimento a seguir.

Para habilitar a depuração no Internet Explorer

  1. No menu Tools, selecione Internet Options.

  2. Na guia Advanced, desmarque as caixas de seleção Disable Script Debugging (Internet Explorer) e Disable Script Debugging (Other).

  3. Selecione a caixa de seleção Display a notification about every script error.

  4. Para desativar mensagens de erro "amigáveis", desmarque a caixa de seleção Show friendly HTTP error messages.

    Se mensagens de erro "amigáveis" estão habilitadas e, se uma resposta de erro HTTP 500 do servidor é muito menor que 513 bytes, o Internet Explorer mascara o conteúdo.No lugar das informações de erro, o Internet Explorer exibe uma mensagem que serve para usuários finais, não para desenvolvedores.

Anexando o Depurador do Visual Studio ao Internet Explorer

Para depurar script de cliente, você deve anexar um depurador ao Internet Explorer.Em Visual Studio, se você iniciar seu aplicativo para depuração (pressionando F5 ou usando o comando Start Debugging no menu Debug), o depurador é anexado automaticamente.

Você também pode anexar o depurador Visual Studio para Internet Explorer quando o aplicativo já está sendo executado.Para fazer isso, no menu Debug, clique em Attach to Process... .Na caixa de diálogo Attach to Process, selecione a instância do Internet Explorer (Iexplore.exe) que você deseja anexar ao depurador.

Observação:

Se o Internet Explorer estiver configurado para depuração, a coluna Type para a instância relevante do Internet Explorer exibe Script, x86.Se você vir somente x86 na coluna Type, certifique-se que o Internet Explorer está configurado para depuração.

Se o Internet Explorer encontra um erro de script e está configurado para depuração de script, mas ele atualmente não está anexado a um depurador, o navegador solicita que você selecione um depurador.Você pode continuar sem depurar ou anexar um depurador e percorrer o código.

Internet Explorer conhecidos de depuração problemas e soluções alternativas

Quando você depurar aplicativos AJAX ASP.NET que usam Internet Explorer, esteja ciente dos seguintes problemas e soluções alternativas:

  • Após o Visual Studio depurador é anexado a Internet Explorer, você pode ver uma lista dos scripts que estão sendo depurado na caixa Script Explorer Janela.(Para exibir esta janela, no menu de Debug,clique em Windows e, em seguida, clique em Script Explorer).A biblioteca de cliente ASP.NET AJAX será exibida como um recurso começando com ScriptResource.axd?..., que o servidor gera dinamicamente do conjunto ASP.NET AJAX.Um problema conhecido no Visual Studio pode impedi-lo de abrir o arquivo.Se Visual Studio exibe um mensagem de erro para esse efeito, ou, se ela ignora cliques no nome de arquivo, feche todos os arquivos de script que estão abertos.Você pode, em seguida, abrir a página e selecionar os arquivos de script que você deseja depurar.

  • Não é possível definir pontos de interrupção no código de JavaScript em elementos script de uma página ASP.NET até depois de o depurador ter passado em código JavaScript nessa página.Para contornar esse problema, configure o ponto de interrupção na função de onde a chamada vem, e depure completamente o código na página da Web ASP.NET.Após o depurador ter parado em uma linha do código JavaScript na página, você pode definir pontos de interrupção como de costume.Outra maneira para o depurador reconhecer scripts em um página ASP.NET é criar um método no arquivo da página ASP.NET que chama o método Sys.Debug.fail.Quando você chamar esse método, o depurador irá parar na chamada para Sys.Debug.fail e deixar que você defina pontos de interrupção em outro lugar.Uma terceira alternativa é colocar todo o seu código personalizado em arquivos externos JavaScript.

  • Visual Studio permite a você definir pontos de interrupção na primeira linha de uma função JavaScript regular, mas não na primeira linha de métodos anônimos, que o ASP.NET usa nas bibliotecas AJAX.Se um método anônimo contiver somente uma linha de código, ou ,se você deve definir um ponto de interrupção na primeira linha de um método anônimo, insira uma linha de código fictícia.Em seguida, você pode definir o ponto de interrupção na segunda linha do método.

Problemas conhecidos do IIS 7.0

Quando você executar páginas ASP.NET habilitadas para AJAX usando IIS 7.0 no Windows Vista e quando o modo de pipeline gerenciado é definido como integrado, os scripts processados pela classe ScriptResourceHandler não serão armazenados em cache.No entanto, os scripts são armazenados em cache quando o modo de pipeline gerenciado é definido como Clássico.

Para obter mais informações sobre o modo gerenciado pipeline de IIS 7.0, consulte Atualizando aplicativos ASP.NET para o IIS 7.0: Diferenças entre o IIS 7.0 modo integrado e clássico modo.

Capturando o Tráfego HTTP

Ao desenvolver aplicativos da Web, geralmente é útil monitorar o tráfego http entre o servidor e o cliente.Uma ferramenta que pode realizar essa tarefa é o Fiddler, que você pode obter o Fiddler PowerToy página no MSDN Web site.Fiddler é executado como um proxy que registra todo o tráfego HTTP.Ele suporta Internet Explorer e outros navegadores.Usando Fiddler, você pode examinar cada solicitação e resposta, que inclui cabeçalhos, cookies e conteúdo da mensagem.

Depurando no Mozilla Firefox

Mozilla Firefox não está integrado com o depurador Visual Studio.Como resultado, não é possível usar o depurador Visual Studio para depurar código do cliente que esteja executando o Firefox.No entanto, Firefox dá suporte a algumas funcionalidades de depuração, como um console JavaScript.Você também pode instalar as seguintes extensões disponíveis do Mozilla que podem aprimorar suas capacidades de depuração:

  • FireBugpermite que você depurar o script de cliente e examine a elementos HTML DOM.Ele também fornece um console de script, uma linha de comando e outras ferramentas.

  • The Depurador do JavaScript(também conhecido sistema autônomo "Venkman") fornece um ambiente de depuração do JavaScript que inclui um navegador de código-fonte e outros recursos.

  • The Extensão do desenvolvedor da Web permite inspecionar os DOM e estilos CSS.

Fiddler também funciona com Firefox.No entanto, você deve configurar o Firefox às solicitações HTTP de rota através do proxy que está sendo executado na porta 8888 no computador local.Para obter mais informações, consulte a página "Configurando Clientes" no site Fiddler.

Voltar ao topo

Referência de Classe

  • Classe Sys.Depurar
    Fornece métodos que definem pontos de interrupção e controlam a saída de rastreamento.

Voltar ao topo

Consulte também

Tarefas

Visão geral da Localização de Recursos para Componentes de Bibliotecas

Conceitos

Visão geral do ASP.NET AJAX

Adicionar recursos de cliente e AJAX