Compartilhar via

Passo-a-passo: Depuração de Páginas da Web no Visual Web Developer

  • Artigo

Visual Web Developer fornece ferramentas para ajudar a rastrear erros em suas páginas da Web ASP.NET.Essa explicação passo a passo, você trabalhará com o depurador, que permite a você depurar o código da página linha por linha e examinar os valores das variáveis.

Nesta explicação passo a passo, você criará um página da Web que contém uma calculadora simples que eleva um número ao quadrado.Após criar a página (que incluirá um erro deliberadamente), você usará o depurador para examinar a página enquanto esta estiver sendo executada.

Tarefas ilustradas nesta explicação passo a passo incluem:

  • Definir pontos de interrupção.

  • Chamar o depurador a partir de um página Web Forms em um site no sistema de arquivos.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • O Visual Web Developer e o .NET Framework.

Você também deve ter uma compreensão geral de como trabalhar no Visual Web Developer.Para obter uma introdução para Visual Web Developer, consulte Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer.

Criando o Site da Web e a Página

Na primeira parte da explicação passo a passo, você criará uma página que você pode depurar.

Se você já tiver Criado um site da Web em Visual Web Developer (por exemplo, por trabalhar com o tópico Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer , você pode usar esse site da Web e vá para " Adicionar controles para depurar " Posteriormente neste exame Através.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File Menu, clique em NovoSite.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. Na Local caixa, clique em Sistema de arquivos e digite o nome da pasta onde você deseja manter as páginas do seu site da Web.

    Por exemplo, digite o nome da pasta C:\WebSites.

  5. Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar no.

    A linguagem de programação que você escolher será o padrão para seu site Web.Entretanto, você pode usar vários idiomas no mesmo aplicativo Web, criando páginas e componentes em linguagens de programação diferentesPara obter informações sobre como criar componentes usando diferentes idiomas, consulte Pastas de código compartilhado em sites da Web ASP.NET.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Criando uma página para depuração

Você começará criando uma nova página.Para esta explicação passo a passo, é importante que você crie uma nova página conforme especificado no procedimento a seguir.

Para adicionar uma página ao site Web

  1. Feche a página Default.aspx.

  2. No Solução Explorer, clique com o botão direito do mouse no nome do seu site da Web (por exemplo, C:\WebSite) e escolha Adicionar novo item.

  3. Em Modelos Visual Studio instaladoEscolha Web Form.

  4. Na Name (Nome) Caixa, tipo DebugPage.aspx.

  5. A partir de Linguagem lista, escolha a programação Idioma você prefere usar.

  6. Certifique-se de que o Coloque o código no arquivo separado Caixa de seleção está desmarcada.

    Nesta explicação passo a passo, você está criando uma página single-file com o código e HTML na mesma página.O código para páginas do ASP.NET pode ser localizado na página ou em um arquivo de classe separado.Para Aprenda mais sobre como manter o código em um arquivo separado, consulte Passo-a-passo: Criando uma página da Web básica com separação de código no Visual Web Developer .

  7. Clique em Adicionar.

    O Visual Web Developer cria a nova página e a abre no modo Source.

Você pode agora adicionar alguns controles à página e depois adicionar código.O código será simples, mas suficiente para permitir que você adicione pontos de interrupção posteriormente.

Para adicionar controles e código para depuração

  1. Switch Para Design Exibir e em seguida, a partir de Padrão Pasta das ToolboxArraste os controles a seguir para a página e definir suas propriedades, conforme indicado:

    Controle

    Propriedades

    Rótulo

    Identificação: CaptionLabel

    (vazia): Text

    TextBox

    Identificação: NumberTextBox

    (vazia): Text

    Button

    Identificação: SquareButton

    Text: Square

    Rótulo

    Identificação: ResultLabel

    (vazia): Text
    Observação:

    Para esta explicação passo a passo, o leiaute da página não é importante.

  2. Clique duas vezes o Button Controlarar para criar um Clique em manipulador para ele.

  3. Adicionar lógica para o Clique em manipulador a c Tudo cTudoEd uma função Square para quadrados o número digitado pelo usuário.O manipulador deve se parecer com o exemplo a seguir.

    Observação:

    O exemplo de código deliberadamente não inclui a verificação de erros.

    		 
    Sub QuadradoButton_Clique(ByVal Sender As Objeto, _ ByVal e As Sistema.EventArgs) Dim Número As Inteiro Dim resultado Número As Inteiro = resultado CInt(NumberCaixa de Texto.Text) = Quadrado(Number) ResultRótulo.Text = CStr(Number) & " elevado ao quadrado é " & CStr(result) End Sub

    protected void SquareButton_Click(object sender, System.EventArgs e) {    int number, result;     number = System.Convert.ToInt32(NumberTextBox.Text);    result = Square(number);    ResultLabel.Text = NumberTextBox.Text +         " squared is " + result.ToString(); }

  4. Crie a função que eleve o número ao quadrado.Inclua um erro no código que adicione o número a si mesmo em vez de multiplicar.O código deve se parecer com o exemplo a seguir.

    Function Square(number As Integer) As Integer    Square = number + number End Function

    int Square(int number ) {        int Square;    Square = number + number;    return Square; }

Você também pode adicionar código na página para alterar o texto do rótulo dependendo se esta for a primeira vez que a página está sendo executada.

Para alterar a legenda do controle Label

  1. Em Design modo de exibição, Duplo - clique a superfície de design (não um controle) para criar um Page_Load manipulador de eventos.

  2. Definir o texto das Etiqueta da legenda Controlar para inserir um número: se esse for o Primeiro vez a página está em execução, ou digite outro número: caso contrário.O manipulador deve se parecer como o exemplo de código a seguir.

    Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)    If Page.IsPostBack = False Then        CaptionLabel.Text = "Enter a number: "    Else        CaptionLabel.Text = "Enter another number: "    End If End Sub

    if(Page.IsPostBack == false) {    CaptionLabel.Text = "Enter a number: "; } else {    CaptionLabel.Text = "Enter another number: " ; }

Testando a Página

Para certificar-se que a página está funcionando, execute-a em seu estado atual.

Para executar a página

  1. Salve a página.

  2. Pressione CTRL+F5 para executar a página.

  3. Digite o número 3 e Pressionarionar a Square Botão.

    Observe que o resultado é incorreto, porque há um erro no programa.O resultado correto é 9.

  4. Feche o navegador.

Depurando a página

Nesta parte da explicação passo a passo, você usará o depurador para examinar o código da página linha por linha ao ser executado, adicionar pontos de interrupção no código e executar a página no modo Debug.

Inicialmente, você definirá pontos de interrupção em seu código.Um ponto de interrupção é uma linha em seu código onde a execução pára e o depurador é chamado.

Para definir pontos de interrupção

  1. Switch Para Origem Exiba.

  2. Clique com o botão direito do mouse na linha seguinte, escolha Ponto de Interrupçãoe então escolha Inserir pontos de interrupção.

    Observação:

    Você pode alternar pontos de interrupção pressionando F9.

    		 
    If Page.IsPostBack = False Then

    if(Page.IsPostBack == false)

  3. Definir outro ponto de interrupção em Linha de seguir o SquareButton_Click identificador:

    result = Square(number)

    result = Square(number);
    Observação:

    Você não pode definir um ponto de interrupção em uma instrução que declara uma variável.

Com pelo menos um ponto de interrupção, você estará pronto para executar o depurador.

Para executar o depurador

  1. A partir de Depurar Menu, escolha Inicia a depuração (ou pressione F5) para executar a página em Modo de Depuração.

    Se você nunca tiver executado o depurador antes, seu aplicativo provavelmente não estará configurado para oferecer suporte a depuração.Por padrão, depuração é desativada em aplicativos por questões de desempenho (páginas executam mais lentamente no depurador) e por razões de segurança.O Visual Web Developer exibe uma mensagem informando a você o que deve fazer para ativar a depuração.

    A opção para ativar a depuração é armazenada como uma configuração no arquivo Web.config, que mantém várias opções de configuração específicas do site.Se o arquivo Web.config não existir, o Visual Web Developer vai tanto criar o arquivo quanto realizar a configuração apropriada do depurador.

    Se o arquivo Web.config já existe mas a depuração não estiver ativada, você verá uma mensagem ligeiramente diferente informando que o Visual Web Developer irá modificar o arquivo Web.config.

  2. Se você vir a mensagem informando que a depuração não foi Habilitado, clique em OK Para Habilitar Depuração.

    No Visual Web Developer, o designer altera para modo de depuração exibindo o código para a página e algumas janelas de depuração.

    O depurador executa sua página linha por linha.Quando o depurador chega na linha com o ponto de interrupção, ele para e realça a linha.

    Porque o ponto de interrupção está na Page_Load manipulador, a página não concluiu o processamento ainda.O navegador está aberto, mas a página não será exibida ainda.

  3. Na Depurar Menu, clique em WindowsClique em Inspeçãoe em seguida, clique em Inspecionar 1.

    Observação:

    Se você estiver usando Visual Web Developer Express Edition, o depurador oferece apenas um único Inspeção a janela.

    Isso abre uma Inspeção janela, w aqui você pode especificar os valores você deseja controlar.

  4. No Editor, clique com o botão direito do mouse o IsPostBack Parte de Page.IsPostBack Expressão e em seguida, clique emAdicionar inspeção de variáveis.

    Isso adiciona a expressão a ser o Inspeção janela e exibe o valor atual do (a propriedadefalse é exibido na Value (Valor) Coluna.Se preferir, você pode digitar o nome de uma variável ou propriedade na Name (Nome) Coluna a Inspeção a janela.

  5. A partir de Depurar Menu, escolha Continue para Continuar execução, ou pressione F5.

    O Continue comando informa o depurador para continuar até que ele obtém para o Avançar ponto de interrupção.O Page_Load manipulador de eventos termina o processamento e a página é exibida no navegador.

  6. Insira o valor 2 em caixa de texto e clique na Square Botão.

    O depurador é exibido novamente, com o ponto de interrupção na linha a Page_Load manipulador.Desta vez, o Inspeção janela que mostra o valor de Page.IsPostBack é verdadeiro.

  7. Pressione F5 novamente para continuar.

    Os depurador processos a Page_Load manipulador e insere o SquareButton_Click manipulador, onde ele pára sobre o segundo ponto de interrupção é configurado.

  8. Na Depurar Menu, clique em Windows e em seguida, clique em Locais.

    Isso abre o Locais janela, que exibe os valores de todas as variáveis e objetos que estão no escopo na linha atual que está sendo executados.O Locais janela fornece uma correspondesse Nativo forma para você exibir esses valores, com a vantagem que você não tem para definir explicitamente uma inspeção de variáveis nos elementos, mas com a desvantagem que a janela pode conter mais informações que você deseja ver ao mesmo tempo.

    Na Locais janela, você verá que o valor de número é 2 e o valor de Resultado é 0.

    Observação:

    Você também pode ver o valor de qualquer variável no programa, mantendo o ponteiro do mouse sobre ela.

  9. Na Value (Valor) Coluna a Locais Janela, clique com o botão direito do mouse na linha para o número variável e selecione Editar valor.Editar o valor da número variável e Alterar-la para 5.

    O valor 2 para a variável número não é um bom teste do programa, como adição e squaring 2 Ambos resultar em 4.Portanto, enquanto o programa está sendo executado, você pode alterar o valor dessa variável.

  10. A partir de Depurar Menu, escolha Step Into Para Depurar a Square Função, ou pressione a tecla F11.

    O Step Into comando faz com que o depurador para executar uma linha e, em seguida, Parar novamente.

  11. Continue a depuração pressionando F11 até chegar a linha de código a seguir.

    ResultLabel.Texto = CStr(Número) & " elevado ao quadrado é " & CStr(result)

        ResultLabel.Text = NumberTextBox.Text +         " squared is " + result.ToString();

    O depurador percorre seu código linha por linha.Quando o depurador executa o Square função, você pode usar o Locais Janela para verificar os dados passados para a função (número e o valor de retorno do (a funçãoSquare).

  12. Na Depurar Menu, clique em Windows e, em seguida, Imediata.

    O Imediata janela permite que você executar comandos.Você pode usar a janela para avaliar expressões (por exemplo, para obter o valor de uma propriedade).

  13. Na Imediata janela, digite a expressão a seguir e pressione ENTER.

    ? NumberTextBox.Text

    A ponto de interrogação (?) é um operador in a Imediata Janela que avalia a expressão seguinte-lo.Nesse exemplo, você estiver avaliando o [P:System.Web.UI.WebControles.Caixa de Texto.Text] Propriedade das NumberTextBox Controle na página.Você pode avaliar qualquer variável, propriedade de objeto ou expressão que combinem essas, usando a mesma sintaxe que você usaria em código.

  14. Na Imediata janela, digite o seguinte e pressione ENTER:

    NumberTextBox.Text = "5"

    Além disso, para avaliar expressões, o Imediata janela permite que você alterar as propriedades ou variáveis

  15. Pressione F5 para continuar a execução do programa.

    Quando a página for exibida, ele exibe o resultado da passagem 5 para o Square Função.Além disso, o texto na caixa de texto foi alterado para 5.

O resultado que você vê —10— é incorreto , já que 10 não é o quadrado de 5.Você pode agora corrigir o erro.

Para corrigir o erro e testar novamente

  1. Mude do navegador para o Visual Web Developer.

    Observação:

    Não feche o janela do navegador.

  2. Na Square Função, alterar o "+" operador para o " * " Operador.

    Como o código não está em execução (a página terminou de ser processada), você está em modo de edição e pode fazer alterações permanentes.

  3. Pressione CTRL+S para salvar a página.

  4. A partir de Depurar Menu, escolha Excluir todos os pontos de interrupção Para que a página não será paralisada sempre que você executá-lo.

    Observação:

    Você também pode limpar os pontos de interrupção, pressionando as teclas CTRL+SHIFT+F9.

  5. Mude para o janela do navegador.

  6. Insera 5 na caixa de texto e clique o botão.

    Desta vez, quando você executar a página e inserir um valor, ele é elevado ao quadrado corretamente.O Temporário as alterações feitas anteriormente, como alterar o [P:System.Web.UI.WebControles.Caixa de Texto.Text] Propriedade das NumberTextBox controle, tem não foram persistentes, porque eles aplicada somente quando a página estava sendo executado o Último tempo.

  7. Feche o navegador para interromper o depurador.

Próximas etapas

O depurador inclui recursos adicionais para ajudá-lo a trabalhar com seu código.Além disso, talvez você queira aprender sobre técnicas para manipular condições de erro e formas em que você pode monitorar o processamento de página em tempo de execução.Por exemplo, talvez você queira explorar o rastreamento.Para obter detalhes, consulte Demonstra Passo a passo: Usar o rastreamento no Visual Web Developer para ajudar a localizar erros de página da Web.

Consulte também

Outros recursos

Depuração no Visual Studio