Guia de início rápido: Navegação do depurador (JavaScript)

Artigo
02/27/2013

Este início rápido demonstra como navegar no depurador do Visual Studio e como exibir o estado do programa em uma sessão.

Este início rápido destina-se aos desenvolvedores que não têm experiência em depuração com o Visual Studio e aos desenvolvedores que desejam saber mais sobre como navegar em uma sessão de depuração do Visual Studio. Ele não ensina a arte da depuração propriamente dita. As funções no código de exemplo foram criadas somente para demonstrar os procedimentos de depuração descritos neste tópico. As funções não empregam práticas recomendadas de design de aplicativos ou funções. Na verdade, você logo descobrirá que as funções, e o aplicativo em si, não fazem muita coisa.

As seções deste início rápido foram elaboradas para serem tão independentes quanto possível; assim, você pode ignorar qualquer seção que incluir informações que já sejam do seu conhecimento. Além disso, não é obrigatório criar um aplicativo de exemplo. No entanto, nós recomendamos que isso seja feito e procuramos facilitar o processo ao máximo.

Atalhos do teclado para depuradores. A navegação no depurador do Visual Studio é otimizada para o mouse e o teclado. Várias das etapas deste tópico incluem o acelerador do teclado ou a tecla de atalho em um comentário entre parênteses. Por exemplo, (teclado: F5) indica que pressionar a tecla F5 inicia ou continua a execução do depurador.

Dica

O padrão Módulo

Os aplicativos da Windows Store geralmente usam o padrão Módulo do JavaScript para encapsular dados e funções em uma página. O padrão Módulo usa um único fechamento anônimo e autoexecutável para manter a funcionalidade da página separada do namespace global. Neste tópico, nós chamamos essa função de module.

Neste tópico

Você pode aprender como:

Criar o aplicativo de exemplo

Definir e executar até um ponto de interrupção, fazer step-into de uma função e examinar dados do programa

Fazer step-into, step-over e step-out de funções

Definir um ponto de interrupção condicional, executar até o cursor e visualizar uma variável

Ver dados de variáveis na janela Locais

Exibir dados de variáveis e a cadeia de protótipos de um objeto
Examinar dados da cadeia de escopos

Navegar até o código usando a janela Pilha de Chamadas

Criar o aplicativo de exemplo

A depuração envolve o código e, portanto, o aplicativo de amostra usa a estrutura do aplicativo da Windows Store somente para criar um arquivo de origem em que você possa ver como a navegação em uma sessão de depuração funciona e como examinar o estado do programa. Todo o código que você invocará é chamado pela função module do arquivo default.js. Nenhum controle é adicionado e nenhum evento é tratado.

Crie um aplicativo em branco da Windows Store em JavaScript. Abra o Visual Studio. Na página inicial, escolha o link Novo Projeto. Na caixa de diálogo Novo Projeto, selecione JavaScript na lista Instalado e selecione Windows Store. Na lista de modelos de projeto, escolha Aplicativo em Branco. O Visual Studio cria uma nova solução e um novo projeto, e exibe o arquivo default.htm no editor de códigos.

Observe os arquivos de script que são carregados na página.
- Os arquivos base.js e ui.js criam a Biblioteca do Windows para JavaScript. A Biblioteca do Windows para JavaScript é um conjunto de arquivos JavaScript e CSS que facilitam a criação de aplicativos da Windows Store usando JavaScript. Você a utiliza juntamente com HTML, CSS e o Tempo de Execução do Windows para criar seu aplicativo.
- Seu código começa no arquivo default.js .
Abra o arquivo de origem default.js. No Gerenciador de Soluções, abra o nó js e escolha default.js.
Substitua o conteúdo da página pelo código de exemplo. Exclua todo o conteúdo do arquivo default.js. Siga este link: Código de exemplo de navegação do depurador (JavaScript) e copie o código listado na seção JavaScript para a área de transferência. (Escolha Voltar no navegador ou no visualizador da ajuda para retornar a esta página do início rápido.) No editor do Visual Studio, cole o código no arquivo default.js, agora vazio. Escolha Ctrl+ S para salvar o arquivo.

Agora você pode prosseguir acompanhando com os exemplos deste tópico.

Definir e executar até um ponto de interrupção, fazer step-into de uma função e examinar dados do programa

A maneira mais comum de iniciar uma sessão de depuração é escolher Iniciar Depuração no menu Depurar (teclado: F5). O aplicativo é iniciado e continua em execução até que um ponto de interrupção seja alcançado, você suspenda a execução manualmente, ocorra uma exceção ou o aplicativo chegue ao fim.

Quando a execução é suspensa no depurador, é possível exibir o valor de uma variável ativa em uma dica de dados pausando o mouse sobre a variável.

Depois de suspender a execução do aplicativo (ou seja, interromper o depurador), você controla a maneira como o restante do código do programa é executado. Você pode continuar linha por linha, passando de uma chamada de função para a própria função, ou pode executar uma função chamada em uma única etapa. Esses são os procedimentos seguidos na depuração do aplicativo. Você também pode retomar a execução padrão do aplicativo, até o próximo ponto de interrupção definido ou até a linha onde o cursor está posicionado. Você pode parar a sessão de depuração a qualquer momento. O depurador foi projetado para realizar as operações de limpeza necessárias e sair da execução.

Exemplo 1

Neste exemplo, você define um ponto de interrupção no corpo da função module em default.js enquanto ela chama a primeira das nossas instruções do usuário. Em seguida, você faz step-into da função, exibe os valores das variáveis em dicas de dados do depurador e interrompe a depuração.

Defina um ponto de interrupção. Defina um ponto de interrupção na instrução callTrack = "module function"; que ocorre logo após a chamada para app.start(). Escolha a linha na medianiz sombreada do editor de código-fonte (teclado: posicione o cursor na linha e escolha a tecla F9).

O ícone de ponto de interrupção aparece na medianiz.
Execute até o ponto de interrupção. Inicie a sessão de depuração escolhendo Iniciar Depuração no menu Depurar (teclado: F5).

O aplicativo começa a ser executado e a execução é suspensa imediatamente antes da instrução em que você definiu o ponto de interrupção. O ícone de linha atual na medianiz identifica onde você está, e a instrução atual está realçada.

Agora você está no controle da execução do aplicativo e pode examinar o estado do programa à medida que avança pelas instruções.
Faça step-into da função. No menu Depurar, escolha Depuração Completa (teclado: F11).

Observe que o depurador passa para a linha seguinte, que é uma chamada para a função example1. Escolha Depuração Completa novamente. O depurador passa para a primeira linha de código da função example1. A linha realçada não foi executada, mas a função foi carregada na pilha de chamadas e a memória para as variáveis locais foi alocada.
Quando você faz step-into de uma linha de código, o depurador executa uma das seguintes ações:
- Se a instrução seguinte não é uma chamada para uma função na solução, o depurador executa a instrução, passa para a instrução seguinte e suspende a execução.
- Se a instrução é uma chamada para uma função na solução, o depurador passa para a primeira linha da função chamada e suspende a execução.
Continue a fazer step-into das instruções de example1 até atingir o ponto de saída. O depurador realça a chave de fechamento da função.
Veja os valores das variáveis nas dicas de dados. Continue a fazer step-into das instruções de example1 até atingir o ponto de saída. O depurador realça a chave de fechamento da função. Quando você pausa o mouse em um nome de variável, o nome e o valor da variável são exibidos em uma dica de dados.
Adicione uma inspeção para a variável callTrack. A variável callTrack é usada em todo este início rápido para mostrar as funções chamadas nos exemplos. Para ficar mais fácil visualizar o valor da variável, adicione-a a uma janela Inspeção. Selecione o nome de variável no editor e escolha Adicionar Inspeção no menu de atalho.

Você pode inspecionar diversas variáveis em uma janela Inspeção. Os valores das variáveis inspecionadas, assim como os valores nas janelas de dica de dados, são atualizados sempre que a execução é suspensa. As variáveis inspecionadas são salvas entre as sessões de depuração.
Pare a depuração. No menu Depurar, escolha Parar Depuração (teclado: Shift+F5). Isso encerra a sessão de depuração.

Fazer step-into, step-over e step-out de funções

Em contraste com fazer step-into de uma função chamada por uma função pai, fazer step-over de uma função executa a função filho e depois suspende a execução na função de chamada enquanto o pai é retomado. Você pode fazer step-over de uma função quando estiver familiarizado com o modo como a função opera e tiver certeza de que sua execução não afetará o problema que você está investigando.

Fazer step-over de uma linha de código que não contém uma chamada de função executa a linha da mesma forma que fazer step-into da linha.

Fazer step-out de uma função filho continua a execução da função e depois suspende a execução após a função retornar para a respectiva função de chamada. Você pode fazer step-out de uma função long quando tiver determinado que o restante da função não é significativo.

Tanto o step-over quanto o step-out de uma função executam a função.

Para sobre e de métodos

Exemplo 2

Neste exemplo, você faz step-into, step-over e step-out de funções.

Chame a função example2 na função module. Edite a função module e substitua a linha depois de var callTrack = "module function" por example2();.
Execute até o ponto de interrupção. Inicie a sessão de depuração escolhendo Iniciar Depuração no menu Depurar (teclado: F5). O depurador suspende a execução no ponto de interrupção.
Faça step-over da linha de código. No menu Depurar, escolha Depuração Parcial (teclado: F10). O depurador executa a instrução var callTrack = "module function" do mesmo modo como fez no step-into da instrução.
Faça step-into de example2 e example2_a. Escolha a tecla F11 para fazer step-into da função example2. Continue a fazer step-into das instruções de example2 até atingir a linha var x = example2_a();. Novamente, faça step-into dessa linha para seguir para o ponto de entrada de example2_a. Continue a fazer step-into de cada instrução de example2_a até retornar a example2.
Faça step-over de uma função. Observe que a próxima linha de example2 – var y = example2_a(); – é basicamente a mesma que a linha anterior. Você pode fazer step-over dessa linha com segurança. Escolha a tecla F10 para passar do reinício de example2 para esta segunda chamada a example2_a. Observe que a cadeia de caracteres callTrack indica que a função example2_a foi executada duas vezes.
Faça step-out de uma função. Escolha a tecla F11 para fazer step-into da função example2_b. Observe que example2_b não é muito diferente de example2_a. Para fazer step-out da função, escolha Depuração Circular no menu Depurar (teclado: Shift+F11). Observe que a variável callTrack indica que example2_b foi executada e que o depurador retornou ao ponto onde example2 é retomado.
Pare a depuração. No menu Depurar, escolha Parar Depuração (teclado: Shift+F5). Isso encerra a sessão de depuração.

Definir um ponto de interrupção condicional, executar até o cursor e visualizar uma variável

Um ponto de interrupção condicional especifica uma condição que faz com que o depurador suspenda a execução. A condição é especificada por qualquer expressão de código que possa ser avaliada como true ou false. Por exemplo, você pode usar um ponto de interrupção condicional para examinar o estado do programa em uma função chamada com frequência somente quando uma variável atingir determinado valor.

Executar até o cursor é como definir um único ponto de interrupção. Quando a execução é suspensa, você pode selecionar uma linha na fonte e retomar a execução até que a linha selecionada seja alcançada. Por exemplo, você pode percorrer um loop em uma função e determinar que o código no loop está sendo executado corretamente. Em vez de percorrer cada iteração do loop, você pode executar até o cursor que está posicionado depois que o loop é executado.

Às vezes, é difícil ver um valor de variável na linha de uma dica de dados ou outra janela de dados. O depurador pode exibir cadeias de caracteres, HTML e XML em um visualizador de texto que apresenta uma exibição formatada do valor em uma janela rolável.

Exemplo 3

Neste exemplo, você define um ponto de interrupção condicional para interromper uma iteração específica de um loop, depois executa até o cursor que está posicionado após o loop. Você também exibe o valor de uma variável em um visualizador de texto.

Chame a função example3 na função module. Edite a função module e substitua a linha depois de var callTrack = "module function"; pela linha example3();.
Execute até o ponto de interrupção. Inicie a sessão de depuração escolhendo Iniciar Depuração no menu Depurar (teclado: F5). O depurador suspende a execução no ponto de interrupção na função module.
Faça step-into da função example3. Escolha Depuração Total no menu Depurar (teclado: F11) para ir até o ponto de entrada da função example3. Continue fazendo step-into da função até ter iterado um ou dois loops do bloco for. Observe que demoraria muito para percorrer todas as 1.000 iterações.
Defina um ponto de interrupção condicional. Na medianiz esquerda da janela de código, clique com o botão direito do mouse na linha s += i.toString() + "\n"; e escolha Condição no menu de atalho.

Marque a caixa de seleção Condição e digite i == 500; na caixa de texto. Escolha a opção É verdadeiro e clique em OK. O ponto de interrupção permite que você verifique o valor na iteração de número 500 do loop for. Um ícone de ponto de interrupção condicional pode ser identificado pela cruz branca.
Execute até o ponto de interrupção. No menu Depurar, escolha Continuar (teclado: F5). Pause no i para confirmar se o valor atual de i é 500. Observe também que a variável s é representada como uma única linha e é muito mais maior que a janela de dica de dados.
Visualize uma variável string. Clique no ícone de lupa na dica de dados de s.

A janela Visualizador de Texto é exibida e o valor da cadeia de caracteres é apresentado como uma cadeia de caracteres de várias linhas.
Execute até o cursor. Selecione a linha callTrack += "->example3"; e escolha Executar até o Cursor no menu de atalho (teclado: Ctrl+F10). O depurador conclui as iterações do loop e suspende a execução na linha.
Pare a depuração. No menu Depurar, escolha Parar Depuração (teclado: Shift+F5). Isso encerra a sessão de depuração.

Usar Executar até o Cursor para retornar ao código e excluir um ponto de interrupção

A execução até o cursor pode ser muito útil quando você fez step-into de um código de biblioteca da Microsoft ou de terceiros. Embora a depuração do código de biblioteca possa ser informativa, em geral ela pode levar um longo tempo. E normalmente você está muito mais interessado no seu próprio código. Este exercício mostra como fazer isso.

Defina um ponto de interrupção na chamada app.start. Na função module, defina um ponto de interrupção na linha app.start()
Execute até o ponto de interrupção e faça step-into da função de biblioteca.

Quando você faz step-into de app.start(), o editor exibe o código em base.js. Faça step-into de mais algumas linhas.
Faça step-over e step-out de funções. Ao fazer step-over (F10) e step-out (SHIFT+F11) do código em base.js, talvez você chegue à conclusão de que examinar a complexidade e o comprimento da função start não é o que você deseja fazer.
Posicione o cursor no seu código e execute até ele. Alterne de volta para o arquivo default.js no editor de códigos. Selecione a primeira linha de código após app.start() (você não pode executar até um comentário ou uma linha em branco). Escolha Executar até o Cursor no menu de atalho. O depurador continua a execução da função app.start e suspende a execução no ponto de interrupção.

Ver dados de variáveis na janela Locais

As janelas Locais formam um modo de exibição de árvore com os parâmetros e as variáveis na cadeia de escopos da função atualmente em execução.

Exibir dados de variáveis e a cadeia de protótipos de um objeto

Adicione um objeto array à função module. Edite a função module e substitua a linha depois de var callTrack = "module function" por var myArray = new Array(1, 2, 3);.
Execute até o ponto de interrupção. Inicie a sessão de depuração escolhendo Iniciar Depuração no menu Depurar (teclado: F5). O depurador suspende a execução no ponto de interrupção. Faça step-into da linha.
Abra a janela Locais. No menu Depurar, aponte para Janelas e escolha Locais (teclado: Alt+4).
Examine as variáveis locais na função module. As janelas Locais exibem as variáveis da função atualmente em execução (a função module) como nós de nível superior da árvore. Quando você insere uma função, o JavaScript cria todas as variáveis e atribui a elas o valor undefined. As funções que são definidas na função têm o respectivo texto como um valor.
Percorra as definições de callTrack e myArray. Encontre as variáveis de callTrack e myArray na janela Locais. Faça step-over (F10) das duas definições e observe que os campos Valor e Tipo mudam. A janela Locais realça os valores de variáveis que foram alterados desde a última interrupção.
Examine o objeto myArray. Expanda a variável myArray. Cada elemento da matriz é listado no nó [prototype] que contém a hierarquia de herança do objeto Array. Expanda esse nó.
- O nó Methods lista todos os métodos do objeto Array.
- O nó [prototype] contém o protótipo do objeto Object do qual Array é derivado. Os nós [prototype] podem ser recursivos. Cada objeto pai na hierarquia de objetos é descrito no nó [prototype] do respectivo filho.
Pare a depuração. No menu Depurar, escolha Parar Depuração (teclado: Shift+F5). Isso encerra a sessão de depuração.

Examinar dados da cadeia de escopos

A cadeia de escopos de uma função inclui todas as variáveis que estão ativas e podem ser alcançadas pela função. Variáveis globais são parte da cadeia de escopos, assim como quaisquer objetos (incluindo funções) que estejam definidos na função que define a função atualmente em execução. Por exemplo, a variável callTrack que está definida na função module de default.js pode ser alcançada por qualquer função que esteja definida na função module. Cada escopo é listado separadamente na janela Locais.

As variáveis da função atualmente em execução são listadas na parte superior da janela.
As variáveis de cada escopo de função na cadeia de escopos são listadas em um nó [Scope] referente à função. As funções de escopo são listadas de acordo com sua ordem na cadeia, da função que define a função atual até a função mais externa da cadeia.
O nó [Globals] lista os objetos globais que estão definidos fora de qualquer função.

Cadeias de escopo podem ser confusas e são ilustradas melhor por um exemplo. No exemplo a seguir, você pode ver como a função module cria seu próprio escopo e como você pode criar outro nível de escopo criando um fechamento.

Exemplo 4

Chame a função example4 pela função module. Edite a função module e substitua a linha depois de var callTrack = "module function" por example4().
Execute até o ponto de interrupção. Inicie a sessão de depuração escolhendo Iniciar Depuração no menu Depurar (teclado: F5). O depurador suspende a execução no ponto de interrupção.
Abra a janela Locais. Se necessário, no menu Depurar, aponte para Janelas e escolha Locais (teclado: Alt+4). Observe que a janela lista todas as variáveis e funções na função module e também contém um nó [Globals].
Examine as variáveis globais. Expanda o nó [Globals]. Os objetos e as variáveis no escopo global foram definidos pela Biblioteca do Windows para JavaScript. Você pode adicionar suas próprias variáveis ao escopo global.
Faça step-into de example4 e examine as variáveis locais e de escopo. Faça step-into (teclado: F11) da função example4. Como example4 é definido na função module, a função module torna-se o escopo pai. example4 pode chamar qualquer uma das funções na função module e acessar suas variáveis. Expanda o nó [Scope] na janela Locais e observe que ele contém as mesmas variáveis da função module.
Faça step-into de example4_a e examine as variáveis locais e de escopo. Continue a fazer step-into de example4 e da chamada para example4_a. Observe que agora as variáveis locais são de example4_a e que o nó [Scope] continua a guardar as variáveis da função module. Embora as variáveis de example4 estejam ativas, elas não podem ser alcançadas por example4_a e não fazem mais parte da cadeia de escopos.
Faça step-into de multipyByA e examine as variáveis locais e de escopo. Percorra o restante de example4_a e faça step-into da linha var x = multilpyByA(b);.

A variável da função multipyByA foi definida como a função multiplyClosure que é um fechamento. multipyClosure define e retorna uma função interna, mulitplyXby, e captura (fecha sobre) seu parâmetro e sua variável. Em um fechamento, a função interna retornada tem acesso aos dados da função externa e com isso cria seu próprio nível de escopo.

Ao fazer step-into de var x = multilpyByA(b);, você passa para a linha return a * b; na função interna mulitplyXby.
Na janela Locais, apenas o parâmetro b é listado como uma variável local em multiplyXby, mas um novo nível [Scope] foi adicionado. Expandindo esse nó, você vê que ele contém os parâmetros, as funções e as variáveis de multiplyClosure, incluindo a variável a chamada na primeira linha de multiplyXby. Uma verificação rápida do segundo nó [Scope] revela as variáveis da função module, que multiplyXby acessa em sua linha seguinte.
Pare a depuração. No menu Depurar, escolha Parar Depuração (teclado: Shift+F5). Isso encerra a sessão de depuração.

Navegar até o código usando a janela Pilha de Chamadas

A pilha de chamadas é uma estrutura de dados que contém informações sobre as funções que estão sendo executadas no thread atual do aplicativo. Quando você atinge um ponto de interrupção, a janela Pilha de Chamadas exibe uma lista de todas as funções que estão ativas na pilha. A função atualmente em execução fica no alto da lista na janela Pilha de Chamadas. A função que inicia o thread fica no final da lista. As funções intermediárias mostram o caminho das chamadas, desde a função inicial até a função atual.

Além de mostrar o caminho das chamadas para a função atualmente em execução, a janela Pilha de Chamadas pode ser usada para navegar até o código no editor de códigos. Essa funcionalidade pode ser útil quando você estiver trabalhando com vários arquivos e quiser ir rapidamente para uma função específica.

Exemplo 5

Neste exemplo, você faz step-into de um caminho de chamadas que contém cinco funções definidas pelo usuário.

Chame a função example5 na função module. Edite a função module e substitua a linha depois de var callTrack = "module function"; pela linha example5();.
Execute até o ponto de interrupção. Inicie a sessão de depuração escolhendo Iniciar Depuração no menu Depurar (teclado: F5). O depurador suspende a execução no ponto de interrupção na função module.
Abra a janela Pilha de Chamadas. No menu Depurar, escolha Janelas e escolha Pilha de Chamadas (teclado: Alt+7). Observe que a janela Pilha de Chamadas mostra duas funções:
- Código global é o ponto de entrada da função module na parte inferior da pilha de chamadas.
- Função anônima mostra a linha na função module em que a execução é suspensa. Essa é a parte superior da pilha de chamadas.
Faça step-into das funções para alcançar a função example5_d. Escolha Depuração Total no menu Depurar (teclado: F11) para executar as chamadas do caminho até alcançar o ponto de entrada da função example5_d. Observe que, cada vez que uma função chama outra, o número da linha da função que faz a chamada é salvo e a função que é chamada é colocada na parte superior da pilha. O número da linha da função que faz a chamada é o ponto em que essa função suspendeu a execução. Uma seta amarela aponta para a função atualmente em execução.
Use a janela Pilha de Chamadas para navegar até o código de example5_a e definir um ponto de interrupção. Na janela Pilha de Chamadas, selecione o item de lista example5_a e escolha Ir para Código de Origem no menu de atalho. O editor de códigos posiciona o cursor na linha de retorno da função. Defina um ponto de interrupção nessa linha. Observe que a linha de execução atual não é alterada. O cursor do editor apenas mudou de lugar.
Faça step-into das funções e depois execute até o ponto de interrupção. Continue fazendo step-into de example5_d. Observe que, quando você retorna da função, ela é removida da pilha de chamadas. Pressione F5 para continuar a execução do programa. Você para no ponto de interrupção criado na etapa anterior.
Pare a depuração. No menu Depurar, escolha Parar Depuração (teclado: Shift+F5). Isso encerra a sessão de depuração.