Como depurar script do lado do cliente no Visual С # .NET ou no Visual translation from VPE for Csharp 2005

IMPORTANTE: Este artigo foi traduzido por um sistema de tradução automática (também designado por Machine Translation ou MT), não tendo sido portanto traduzido ou revisto por pessoas. A Microsoft possui artigos traduzidos por aplicações (MT) e artigos traduzidos por tradutores profissionais, com o objetivo de oferecer em português a totalidade dos artigos existentes na base de dados de suporte. No entanto, a tradução automática não é sempre perfeita, podendo conter erros de vocabulário, sintaxe ou gramática. A Microsoft não é responsável por incoerências, erros ou prejuízos ocorridos em decorrência da utilização dos artigos MT por parte dos nossos clientes. A Microsoft realiza atualizações freqüentes ao software de tradução automática (MT). Obrigado.

Clique aqui para ver a versão em Inglês deste artigo: 816173
Sumário
Este artigo passo a passo descreve como depurar script de cliente em um aplicativo Microsoft ASP.NET usando Visual С # .NET ou Visual translation from VPE for Csharp 2005 e o depurador de scripts Microsoft.

Visual С # fornece um número de novos recursos de depuração que permitem que você identificar e diagnosticar problemas no seu código mais facilmente.

back to the top

Requisitos

A lista a seguir descreve o hardware recomendado, software, infra-estrutura de rede e service packs são necessários:
  • Microsoft Visual Studio .NET ou Microsoft Visual Studio 2005
  • Microsoft (IIS) 5.0 ou posterior
  • Depurador de scripts Microsoft
Este artigo pressupõe que você esteja familiarizado com os seguintes tópicos:
  • Aplicativos da Web
  • ASP.NET
  • Translation from VPE for Csharp Visual
back to the top

Depuração de script do lado do cliente no translation from VPE for Csharp Visual .NET ou no Visual translation from VPE for Csharp 2005

Em versões anteriores do Microsoft Active Server Pages (ASP), aplicativos podem ser difícil depurar, particularmente se ocorrerem os bugs no código de script do lado do cliente. Com o Visual Studio .NET ou Visual Studio 2005, você terá maior controle quando você depura o script do lado do cliente usando o depurador integrado e a janela Locals.

back to the top

Criar o aplicativo

Nesta seção, você cria um aplicativo ASP.NET que exibe três controles HTML TextBox juntamente com um controle Button que calcula a entrada. Este exemplo usa JavaScript para programar o controle de botão .
  1. Para usar o depurador com JavaScript do lado do cliente, você deve primeiro ativar depuração de script para o navegador. Para fazer isso, execute as seguintes etapas:
    1. Abra o Microsoft Internet Explorer.
    2. No menu Ferramentas , clique em Opções da Internet .
    3. Na guia Avançado , localize a seção de Navegação , desmarque a caixa de seleção Desativar depuração de script e, em seguida, clique em OK .

      Observação No Microsoft Windows Server 2003, clique para desmarcar a caixa de seleção Desativar depuração (Internet Explorer) de script .
    4. Feche o Internet Explorer.
  2. Para criar um novo aplicativo Web ASP.NET no Visual translation from VPE for Csharp .NET ou no Visual translation from VPE for Csharp 2005, execute essas etapas:
    1. Abra Visual Studio .NET ou Visual Studio 2005.
    2. No menu arquivo , aponte para novo e, em seguida, clique em Project .

      Observação No Visual Studio 2005, aponte para novo no menu arquivo e, em seguida, clique em Site .
    3. Na caixa de diálogo New Project , clique em projetos Visual С # em Tipos de projeto e, em seguida, clique em ASP.NET Web Application em modelos .

      Observação No Visual Studio 2005, clique em ASP.NET Web Site em modelos e, em seguida, selecione Visual translation from VPE for Csharp à direita da linguagem .
    4. Na caixa de texto nome , digite ScriptDebuggingExample .

      Observação No Visual Studio 2005, clique em OK .
  3. Alterne para o modo de exibição HTML da WebForm1.aspx arquivo.
  4. Copiar e colar o seguinte código dentro a <form> marcas:

    importante Colar os segmentos de código como HTML: clique com o botão direito onde você irá inserir o código e, em seguida, clique em Colar como HTML .
    <table>   <tr>      <td width="100">	<asp:label id="lblFirstNumber" runat="server" Width="125">	   First Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber1" type="text" maxLength="3" 	   size="5" name="txtNumber1">      </td>    </tr>    <tr>      <td width="100">	<asp:label id="lblSecondNumber" runat="server" Width="125">	   Second Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber2" type="text" maxLength="3" 	   size="5" name="txtNumber2">      </td>     </tr>     <tr>       <td width="100">	<asp:Label id="lblResult" runat="server" Width="125">	    Result:	</asp:Label>	</td>	<td width="50">	  <input id="txtResult" type="text" size="5" maxlength="5" 	     NAME="txtResult" readonly>	</td>      </tr>    </table>  <br><table>   <tr>      <td width="150" align="center">        <input id="btnDivide" onclick="return btnDivide_Clicked()"           type="submit" value=" Divide " name="btnDivide">      </td>   </tr></table>
    esse código cria duas caixas de texto de entrada, um botão de cálculo e uma terceira caixa de texto que exibe os resultados.
  5. Copie e cole o seguinte código em sua página; Certifique-se que você posicione o bloco de código antes do primeiro <body> marca:
    <SCRIPT language="javascript">   function btnDivide_Clicked()   {    var intNumber1 = 0;        var intNumber2 = 0;        var intResult = 0;			        intNumber1 = document.all('txtNumber1').value;        intNumber2 = document.all('txtNumber1').value;        intResult = intNumber1/intNumber2;        document.all('txtResult').value = intResult;        return false;    }</SCRIPT>
    esse código programas botão para que as funções a seguir ocorrem quando você clicar no botão:
    • Recupere valores de entrada.
    • Calcule a entrada.
    • Exibir o resultado.
  6. Clique em Salvar .
  7. Para testar o projeto, execute essas etapas:
    1. No menu Debug , clique em Iniciar para criar e executar o aplicativo. WebForm1 é aberto no navegador e exibe duas caixas de texto de entrada, uma caixa de texto resultado e um botão.
    2. Na caixa de texto Número primeiro , digite 16 .
    3. Na caixa de texto Segundo número , digite 2 .
    4. Clique em Dividir . Observe que o resultado da caixa de texto não exibe 8 como você pode esperar.
    5. Feche o Internet Explorer.
back to the top

Depurar o aplicativo

O depurador de scripts da Microsoft é útil para depuração de script de cliente em seu aplicativo ASP.NET. Você pode usar a palavra-chave "depurador" invoque o depurador de scripts Microsoft programaticamente no código de script.
  1. Adicione o seguinte código como o primeiro código no procedimento btnDivide_Clicked :
    debugger
    esta palavra-chave indica onde o depurador de scripts pára de execução e inicia o depurador. Você pode usar esta palavra-chave para os valores de variáveis em todo o restante da rotina de rastreamento.
  2. Clique em Salvar .
  3. Para executar o projeto, execute estas etapas:
    1. No menu Debug , clique em Iniciar para criar e executar o aplicativo.
    2. Quando a página é aberta no navegador, do tipo 16 na caixa de texto Número primeiro .
    3. Na caixa de texto Segundo número , digite 2 .
    4. Clique em Dividir . Observe que a execução pára na palavra-chave a depurador, e esse controle é transferido para o IDE do Visual Studio .NET.
    5. Feche o Internet Explorer.
  4. Clique com o botão direito do mouse a linha de código a seguir:
    intResult = intNumber1/intNumber2;
    e, em seguida, clique em Insert Breakpoint .
  5. No menu Debug , clique em continuar .
  6. No menu Debug , aponte para Windows e, em seguida, clique em locais . Observe que isso define o valor de intNumber1 como 16 conforme o esperado. No entanto, observe que isso também define o valor de intNumber2 para 16 e que isso não corresponde ao valor que você digitou. A variável intNumber2 é atribuída o mesmo valor intNumber1 .
  7. No menu Debug , clique em Stop Debugging para fechar as janelas do depurador e navegador. Controle é retornado para o IDE.
back to the top

Modificar o código

  1. Substitua o código
    intNumber2 = document.all('txtNumber1').value;

    com o seguinte código para atribuir o valor correto para a variável intNumber2:
    intNumber2 = document.all('txtNumber2').value;
  2. Clique em Salvar .
  3. Para testar o projeto novamente, execute essas etapas:
    1. No menu Debug , clique em Iniciar para criar e executar o aplicativo.
    2. Quando a página é aberta no navegador, do tipo 16 na caixa de texto Número primeiro .
    3. Na caixa de texto Segundo número , digite 2 .
    4. Clique em Dividir . Observe que a execução pára no início da rotina btnDivide_Clicked .
    5. Verifique se a janela Locals é aberta. No menu Debug , clique em Step Into para depurar o código linha por linha, até chegar a instrução return . Observe que as variáveis intNumber2 e intNumber1 exibem os valores corretos.
    6. No menu Debug , clique em continuar . Controle é retornado para o navegador e a caixa de texto de resultado exibe o resultado correto.
    7. Feche o Internet Explorer.
back to the top

Listagens de código concluída

Criar o aplicativo

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptDebuggingExample.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html>  <head>    <title>WebForm1</title>    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">    <meta name="CODE_LANGUAGE" Content="C#">    <meta name=vs_defaultClientScript content="JavaScript">    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">  </head>  <SCRIPT language="javascript">   function btnDivide_Clicked()   {        var intNumber1 = 0;        var intNumber2 = 0;        var intResult = 0;			        intNumber1 = document.all('txtNumber1').value;        intNumber2 = document.all('txtNumber1').value;        intResult = intNumber1/intNumber2;        document.all('txtResult').value = intResult;        return false;    }</SCRIPT>  <body MS_POSITIONING="GridLayout">	    <form id="Form1" method="post" runat="server">    <table>   <tr>      <td width="100">	<asp:label id="lblFirstNumber" runat="server" Width="125">	   First Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber1" type="text" maxLength="3" 	   size="5" name="txtNumber1">      </td>    </tr>    <tr>      <td width="100">	<asp:label id="lblSecondNumber" runat="server" Width="125">	   Second Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber2" type="text" maxLength="3" 	   size="5" name="txtNumber2">      </td>     </tr>     <tr>       <td width="100">	<asp:Label id="lblResult" runat="server" Width="125">	    Result:	</asp:Label>	</td>	<td width="50">	  <input id="txtResult" type="text" size="5" maxlength="5" 	     NAME="txtResult" readonly>	</td>      </tr>    </table>  <br><table>   <tr>      <td width="150" align="center">        <input id="btnDivide" onclick="return btnDivide_Clicked()"           type="submit" value=" Divide " name="btnDivide">      </td>   </tr></table>    </form>	  </body></html>

Depurar o aplicativo

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptDebuggingExample.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html>  <head>    <title>WebForm1</title>    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">    <meta name="CODE_LANGUAGE" Content="C#">    <meta name=vs_defaultClientScript content="JavaScript">    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">  </head>  <SCRIPT language="javascript">   function btnDivide_Clicked()   {		debugger	    var intNumber1 = 0;        var intNumber2 = 0;        var intResult = 0;			        intNumber1 = document.all('txtNumber1').value;        intNumber2 = document.all('txtNumber1').value;        intResult = intNumber1/intNumber2;        document.all('txtResult').value = intResult;        return false;    }</SCRIPT>  <body MS_POSITIONING="GridLayout">	    <form id="Form1" method="post" runat="server">    <table>   <tr>      <td width="100">	<asp:label id="lblFirstNumber" runat="server" Width="125">	   First Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber1" type="text" maxLength="3" 	   size="5" name="txtNumber1">      </td>    </tr>    <tr>      <td width="100">	<asp:label id="lblSecondNumber" runat="server" Width="125">	   Second Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber2" type="text" maxLength="3" 	   size="5" name="txtNumber2">      </td>     </tr>     <tr>       <td width="100">	<asp:Label id="lblResult" runat="server" Width="125">	    Result:	</asp:Label>	</td>	<td width="50">	  <input id="txtResult" type="text" size="5" maxlength="5" 	     NAME="txtResult" readonly>	</td>      </tr>    </table>  <br><table>   <tr>      <td width="150" align="center">        <input id="btnDivide" onclick="return btnDivide_Clicked()"           type="submit" value=" Divide " name="btnDivide">      </td>   </tr></table>    </form>	  </body></html>
back to the top

Modificar o código

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptDebuggingExample.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html>  <head>    <title>WebForm1</title>    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">    <meta name="CODE_LANGUAGE" Content="C#">    <meta name=vs_defaultClientScript content="JavaScript">    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">  </head>  <SCRIPT language="javascript">   function btnDivide_Clicked()   {								debugger	    			var intNumber1 = 0;        var intNumber2 = 0;        var intResult = 0;			        intNumber1 = document.all('txtNumber1').value;        intNumber2 = document.all('txtNumber2').value;        intResult = intNumber1/intNumber2;        document.all('txtResult').value = intResult;        return false;    }</SCRIPT>  <body MS_POSITIONING="GridLayout">	    <form id="Form1" method="post" runat="server">    <table>   <tr>      <td width="100">	<asp:label id="lblFirstNumber" runat="server" Width="125">	   First Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber1" type="text" maxLength="3" 	   size="5" name="txtNumber1">      </td>    </tr>    <tr>      <td width="100">	<asp:label id="lblSecondNumber" runat="server" Width="125">	   Second Number:	</asp:label>      </td>      <td width="50">	<input id="txtNumber2" type="text" maxLength="3" 	   size="5" name="txtNumber2">      </td>     </tr>     <tr>       <td width="100">	<asp:Label id="lblResult" runat="server" Width="125">	    Result:	</asp:Label>	</td>	<td width="50">	  <input id="txtResult" type="text" size="5" maxlength="5" 	     NAME="txtResult" readonly>	</td>      </tr>    </table>  <br><table>   <tr>      <td width="150" align="center">        <input id="btnDivide" onclick="return btnDivide_Clicked()"           type="submit" value=" Divide " name="btnDivide">      </td>   </tr></table>    </form>	  </body></html> 
back to the top
Referências
Para obter mais informações sobre o depurador de scripts Microsoft, visite os seguintes sites:Para obter mais informações sobre como usar o depurador de scripts Microsoft para depurar aplicativos da Web ASP.NET, visite o seguinte site:back to the top

Aviso: este artigo foi traduzido automaticamente

Propriedades

ID do Artigo: 816173 - Última Revisão: 11/26/2007 02:07:26 - Revisão: 3.8

Microsoft ASP.NET 1.1, Microsoft ASP.NET 1.0, Microsoft Visual C# 2005 Express Edition, Microsoft Visual C# .NET 2003 Standard Edition, Microsoft Visual C# .NET 2002 Standard Edition

  • kbmt kbdebug kbhowtomaster KB816173 KbMtpt
Comentários