Guia de início rápido: Depurando aplicativos (JavaScript)

O Visual Studio fornece uma experiência de depuração abrangente para aplicativos Windows Store criados para Windows usando JavaScript, a qual inclui recursos que são familiares para desenvolvedores do Internet Explorer e do Visual Studio. Este tópico fornece uma visão geral dos recursos de depuração específicos para esses aplicativos, juntamente com tutoriais que mostram como usar esses recursos.

Ao depurar, você pode usar um modelo interativo no qual pode exibir e interagir com o código HTML, CSS e JavaScript renderizado para corrigir problemas. Também é possível usar um modelo de depuração com Visual Studio mais tradicional, que permite realizar tarefas importantes como definir pontos de interrupção e percorrer o código. Ou você pode usar qualquer combinação de ambos os modelos.

A tabela a seguir lista os recursos de depuração que estão disponíveis para aplicativos Windows Store usando JavaScript e fornece links para informações adicionais.

Explorador de DOMs	O Explorador de DOMs fornece uma exibição que representa como o shell interpreta uma página, em vez do código-fonte original. Ele proporciona acesso a informações dinâmicas sobre os estilos, layouts e atributos dos elementos selecionados no momento. Você pode alterar os estilos, layouts e atributos e imediatamente ver os resultados. Para obter mais informações, consulte: Depuração interativa usando o Explorador de DOMs Como inspecionar as regras de CSS Como exibir e editar o layout Como exibir os ouvintes de eventos
A janela Console JavaScript	Na janela Console JavaScript, você pode interagir com o aplicativo renderizado enviando mensagens ao console, exibindo os valores das variáveis locais e globais, e executando o código JavaScript. O console também relata erros e exceções de JavaScript, além de exceções de DOM (Document Object Model) e do Tempo de Execução do Windows. Para obter mais informações, consulte: Depuração interativa usando a janela Console JavaScript O modo de linha única e o modo de várias linhas na janela Console JavaScript Comandos do console de JavaScript
Atualizar	Atualizar permite que você edite o código-fonte e depois recarregue páginas sem interromper e reiniciar o depurador. Para obter mais informações, consulte Como atualizar um aplicativo.
Selecionar elemento	No Explorador de DOMs, é possível selecionar os elementos de DOM clicando em áreas do aplicativo em execução no Simulador ou no computador host. Para obter mais informações, consulte Selecionando elementos.
Sessões de depuração	Para obter informações sobre como iniciar sessões de depuração e a implantação de aplicativos, consulte: Como iniciar uma sessão de depuração (JavaScript) Executando aplicativos da Windows Store do Visual Studio
Pontos de interrupção, percorrendo o código	O depurador do Visual Studio permite definir pontos de interrupção e percorrer o código usando comandos como F5 (Iniciar Depuração ou Continuar) e F11 (Depuração Completa). Ao percorrer o código, você pode interagir com o aplicativo baseado no estado atual na janela Console JavaScript. Para obter mais informações, consulte: Guia de início rápido: Navegação do depurador (JavaScript) Depuração interativa e modo de interrupção
Criador de Perfil	Para obter informações sobre como localizar problemas de desempenho em seu aplicativo, consulte Analisando o desempenho de aplicativos da Windows Store
JavaScript Memory Analyzer	Para obter informações sobre como localizar perdas de memória em seu aplicativo, Analisando o uso de memória em aplicativos da Windows Store (JavaScript)

Este tópico também fornece informações sobre estas tarefas de depuração de JavaScript: Habilitando exceções de primeira chance e Depurando aplicativos que usam componentes do Tempo de Execução do Windows.

Depuração interativa usando o Explorador de DOMs

O Explorador de DOMs mostra a página renderizada, e você pode usá-lo para alterar valores e imediatamente ver os resultados. Assim, você pode testar alterações usando um processo iterativo sem interromper e reiniciar o depurador. O código-fonte em seu projeto não muda quando você interage com a página usando esse método; então, quando localiza as correções de código desejadas, você interrompe o depurador e faz as alterações no código-fonte.

Dica

Se não quiser interromper o depurador, você poderá fazer alterações no código-fonte e atualizar seu aplicativo usando o botão Atualizar aplicativo do Windows na barra de ferramentas Depurar. Para obter mais informações, consulte Como atualizar um aplicativo.

Você pode usar o Explorador de DOMs para:

• Inspecionar código HTML, CSS e JavaScript renderizado e navegar pela subárvore de elementos de DOM.

• Alterar dinamicamente atributos de elementos renderizados.

• Inspecionar a aplicação de estilos CSS à página e fazer alterações dinamicamente.

Ao depurar aplicativos, muitas vezes é preciso selecionar elementos no Explorador de DOMs. Quando você seleciona um elemento, os valores que aparecem nas guias à direita são atualizados automaticamente para refletir o elemento selecionado no Explorador de DOMs. Estas são as guias: Estilos, Rastrear Estilos, Layout, Atributos e Eventos. Para obter mais informações sobre como selecionar elementos, consulte Selecionando elementos.

Dica

Se a janela Explorador de DOMs estiver fechada, clique em Depurar > Janelas > Explorador de DOMs para reabri-la. A janela só aparece durante uma sessão de depuração de script.

No procedimento a seguir, avançaremos pelo processo de depurar interativamente um aplicativo usando o Explorador de DOMs. Vamos criar um aplicativo que usa um controle FlipView e depurá-lo. O código do aplicativo contém vários erros.

Para usar depuração interativa no Explorador de DOMs

1. Crie uma nova solução no Visual Studio clicando em Arquivo > Novo Projeto.

2. Selecione o modelo do JavaScript chamado Aplicativo em Branco e digite um nome para o projeto, como FlipViewApp.

3. No elemento BODY de default.html, adicione este código:

       <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
                style="display:none">
           <div class="fixedItem" >
               <img src="#" data-win-bind="src: flipImg" />
           </div>
       </div>
       <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
           data-win-control="WinJS.UI.FlipView"
               data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
       </div>
   

4. Substitua o código em default.js por este código:

   (function () {
       "use strict";
   
       var app = WinJS.Application;
       var activation = Windows.ApplicationModel.Activation;
   
       var myData = [];
       for (var x = 0; x < 4; x++) {
           myData[x] = { flipImg: "/images/logo.png" }
       };
   
       var pages = new WinJS.Binding.List(myData, { proxy: true });
   
       app.onactivated = function (args) {
           if (args.detail.kind === activation.ActivationKind.launch) {
               if (args.detail.previousExecutionState !==
               activation.ApplicationExecutionState.terminated) {
                   // TODO: . . .
               } else {
                   // TODO: . . .
               }
               args.setPromise(WinJS.UI.processAll());
   
               updateImages();
           }
       };
   
       function updateImages() {
   
           pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
           pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
           pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
       };
   
       app.oncheckpoint = function (args) {
       };
   
       app.start();
   
       var publicMembers = {
           items: pages
       };
   
       WinJS.Namespace.define("Data", publicMembers);
   
   })();
   

   Dica

   O código acima em JavaScript é encapsulado em uma função anônima. Esse encapsulamento segue o modelo típico de programação usado nos modelos de projeto. Ao encapsular um código dessa maneira, você pode usar a função WinJS.Namespace.define para acessar elementos de código encontrados em outro lugar do aplicativo.

5. Selecione Simulador na lista suspensa ao lado do botão Iniciar Depuração na barra de ferramentas Depurar.

   

6. Clique em Depurar > Iniciar Depuração, ou pressione F5, para executar o aplicativo no modo de depuração.

   Isso executa o aplicativo no Simulador, mas você verá uma tela basicamente em branco porque o código contém alguns bugs. Uma imagem padrão no lado esquerdo superior indica que algo foi carregado. Se você clicar nessa área da tela, verá uma seta de FlipView indicando que foi criada uma instância do controle, mas o controle não está no tamanho certo.

   Dica

   Você pode pressionar Alt+Tab ou F12 para alternar entre o Visual Studio e o aplicativo em execução. Se estiver executando o aplicativo no Simulador em vez de no computador local, você poderá clicar nos botões do Visual Studio e do Simulador na barra de tarefas do Windows para alternar entre as janelas.

7. No Visual Studio, clique na guia Explorador de DOMs.

8. Na janela Explorador de DOMs, selecione o elemento DIV correspondente à seção cuja ID é "fView":

   

   Dica

   Você também pode selecionar o elemento DIV no canto inferior esquerdo da janela Console JavaScript digitando select(fView) no aviso de entrada >> e pressionando Enter.

   Observe que a largura e a altura estão definidas incorretamente como valores em pixels no Explorador de DOMs.

   Os valores que aparecem nas guias à direita da janela Explorador de DOMs são atualizados automaticamente para refletir o elemento atual no Explorador de DOMs.

9. Na guia Atributos, clique duas vezes no atributo style. Edite a altura e a largura, definindo-as como 100%. Depois que você pressiona Enter, os novos valores são imediatamente refletidos no Simulador, embora você não tenha interrompido a sessão de depuração.

   

   Importante

   Assim como atualiza valores de atributos, você também pode atualizar os valores que aparecem nas guias Estilos, Rastrear Estilos e Layout. Para obter mais informações, consulte Como inspecionar as regras de CSS e Como exibir e editar o layout.

   O controle FlipView agora está dimensionado corretamente. Ele também funciona corretamente; porém, em vez das imagens esperadas, você vê as imagens padrão, imagens ausentes e as imagens esperadas intercaladas com as imagens ausentes.

   Há um bug no código JavaScript que causa esse problema. Na próxima seção, vamos explorar uma maneira de corrigir esse bug usando a janela Console JavaScript. Para continuar a depuração, consulte Depuração interativa usando a janela Console JavaScript.

Você pode usar o recurso Atualizar para modificar o código HTML, CSS e JavaScript e recarregar páginas rapidamente sem interromper e reiniciar o depurador. Para obter mais informações sobre o recurso Atualizar, consulte Como atualizar um aplicativo.

Para atualizar o aplicativo durante a depuração

1. Enquanto o aplicativo ainda está em execução, alterne para o Visual Studio.

2. Abra o default.html e modifique o código-fonte alterando a altura e a largura do elemento DIV "fView" para 100%.

3. Clique no botão Atualizar aplicativo do Windows na barra de ferramentas Depurar (ou pressione F4). O botão se parece com este: .

   As páginas do aplicativo são recarregadas e o Simulador volta para o primeiro plano.

   Como antes, as imagens ainda não estão aparecendo corretamente. Você pode continuar a depuração desse aplicativo na próxima seção.

Depuração interativa usando a janela Console JavaScript

Você pode executar e atualizar o código JavaScript na janela Console JavaScript. Como o Explorador de DOMs, a janela Console JavaScript permite testar alterações sem interromper e reiniciar o depurador, para que você possa ver os resultados imediatamente na página renderizada. Quando descobre a alteração ou as alterações desejadas, você interrompe o depurador e faz as correções no código-fonte.

Você pode usar a janela Console JavaScript para:

• Executar scripts no modo de linha única ou de várias linhas.

• Ver mensagens informativas e de erro.

• Realizar outras tarefas, como limpar a tela. Consulte Comandos do console de JavaScript para ver a lista completa de comandos.

Dica

Se a janela Console JavaScript estiver fechada, clique em Depurar > Janelas > Console JavaScript para reabri-la. A janela só aparece durante uma sessão de depuração de script.

Neste procedimento, vamos continuar depurando o aplicativo FlipView que começamos a depurar na seção Depuração interativa usando o Explorador de DOMs. Já vimos que o controle FlipView está funcionando corretamente, mas não está exibindo as imagens esperadas.

Para depurar o código JavaScript no aplicativo FlipView

1. Com o aplicativo FlipView em execução no Simulador, digite Data.items no aviso de entrada da janela Console JavaScript e pressione Enter.

   Um visualizador para o objeto items aparece na janela do console. Isso indica que foi criada uma instância do objeto items e ele está disponível no contexto do script. Na janela do console, você pode clicar nos nós de um objeto para ver os valores de propriedade (ou usar as teclas de direção). Se clicarmos na seta para baixo do objeto items._data, como mostra esta ilustração, veremos que suas referências da origem das imagens estão incorretas, conforme esperado. As imagens padrão ainda estão presentes no objeto e há imagens ausentes intercaladas com as imagens esperadas.

   

2. No aviso, digite Data.items.push e pressione Enter. A janela do console mostra a implementação da função push com base em um arquivo de projeto Windows Library para JavaScript (WinJS). Com uma rápida investigação usando o IntelliSense, descobrimos que devemos usar setAt para substituir as imagens padrão.

3. Para corrigir esse problema interativamente, sem interromper a sessão de depuração, abra default.js e selecione esse código na função updateImages:

   pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

   Copie e cole esse código no aviso de entrada do console JavaScript.

   Dica

   Quando você cola um código de várias linhas no aviso de entrada do console JavaScript, o aviso alterna automaticamente para o modo de várias linhas. Você pode pressionar Ctrl+Alt+M para ativar e desativar o modo de várias linhas. Para executar um script no modo de várias linhas, pressione Ctrl+Enter ou clique no símbolo de seta no canto direito inferior da janela.

4. Corrija as chamadas da função push no aviso, substituindo pages.push por Data.items.setAt, e clique no símbolo de seta para executar o script. O código corrigido deve ter esta aparência:

   Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

5. Pressione Ctrl+Alt+M para alternar o aviso de entrada do console para o modo de linha única e pressione Ctrl+A para selecionar a entrada anterior a fim de removê-la.

6. Digite Data.items.length = 3 no aviso e pressione Enter. Isso remove os elementos extrínsecos aos dados.

7. Verifique o Simulador novamente: você verá que as imagens corretas estão nas páginas corretas de FlipView.

8. No Explorador de DOMs, você pode ver o elemento DIV atualizado e pode navegar na subárvore para localizar os elementos IMG esperados.

9. Interrompa a depuração clicando em Depurar > Parar Depuração ou pressionando Shift+F5 e corrija o código-fonte.

   Para ver a página default.html completa contendo o código de exemplo corrigido, consulte Depuração de código de exemplo de aplicativos de JavaScript.

Depuração interativa e modo de interrupção

Você pode usar pontos de interrupção e fazer step-into do código enquanto está usando ferramentas de depuração JavaScript como a janela Console JavaScript. Quando um programa que está sendo executado no depurador encontra um ponto de interrupção, o depurador suspende temporariamente a execução do programa. Quando a execução é suspensa, o programa alterna do modo de execução para o modo de interrupção. Você pode retomar a execução a qualquer momento.

Quando um programa está no modo de interrupção, você ainda pode usar a janela Console JavaScript para executar os scripts e comandos que são válidos no estado atual do aplicativo. Neste procedimento, vamos usar o aplicativo FlipView que criamos em um procedimento anterior para demonstrar o uso do modo de interrupção.

Para definir um ponto de interrupção e depurar o aplicativo

1. No arquivo default.html do aplicativo FlipView criado anteriormente, clique com o botão direito do mouse na função updateImages() e clique em Ponto de Interrupção > Inserir Ponto de Interrupção.

2. Selecione Computador Local na lista suspensa ao lado do botão Iniciar Depuração na barra de ferramentas Padrão.

3. Clique em Depurar > Iniciar Depuração ou pressione F5.

   O aplicativo entra no modo de interrupção quando a execução atinge a função updateImages(), e a linha atual de execução do programa é realçada em amarelo.

   

   Você pode alterar os valores das variáveis para afetar imediatamente o estado do programa sem finalizar a sessão de depuração atual.

4. Digite updateImages no aviso e pressione Enter. A implementação da função aparece na janela do console.

5. Copie uma linha da função no aviso e altere o valor do índice para 3:

   pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

6. Pressione Enter para executar a linha de código.

   Se quiser percorrer o código linha por linha, pressione F11, ou pressione F5 para continuar a execução do programa.

7. Pressione F5 para continuar a execução do programa. O aplicativo FlipView é exibido, e agora todas as quatro páginas mostram uma das imagens não padrão.

   Para alternar de volta para o Visual Studio, pressione F12 ou Alt+Tab.

O modo de linha única e o modo de várias linhas na janela Console JavaScript

O aviso de entrada na janela Console JavaScript oferece suporte ao modo de linha única e ao modo de várias linhas. O procedimento de depuração interativa neste tópico fornece um exemplo de como usar esses dois modos. Você pode pressionar Ctrl+Alt+M para alternar entre os modos.

O modo de linha única fornece um histórico de entrada. Você pode navegar por esse histórico usando as teclas de seta para cima e seta para baixo. O modo de linha única limpa o aviso de entrada quando você executa scripts. Para executar um script no modo de linha única, pressione Enter.

O modo de várias linhas não limpa o aviso de entrada quando você executa scripts. Quando alterna do modo de várias linhas para o modo de linha única, você pode limpar a linha de entrada pressionando Ctrl+A e digitando qualquer caractere. Para executar um script no modo de várias linhas, pressione Ctrl+Enter ou clique no símbolo de seta no canto direito inferior da janela.

Selecionando elementos

Você pode selecionar elementos DOM de três maneiras diferentes ao depurar um aplicativo:

• Clicando diretamente nos elementos na janela Explorador de DOMs (ou usando as teclas de direção).

• Usando o botão Selecionar Elemento.

• Usando o comando select, que é um dos Comandos do console de JavaScript.

Quando você usa a janela Explorador de DOMs para selecionar elementos e posiciona o ponteiro do mouse em um elemento, o elemento correspondente é realçado no Simulador ou dispositivo. Você deve clicar no elemento, no Explorador de DOMs, para selecioná-lo, ou pode usar as teclas de direção para realçar e selecionar elementos). Você também pode selecionar elementos no Explorador de DOMs usando o botão Selecionar elemento. A ilustração a seguir mostra o botão Selecionar Elemento.

Quando você clica em Selecionar elemento (ou pressiona Ctrl + B), isso altera o modo de seleção para que você possa selecionar um item no Explorador de DOMs clicando nele no aplicativo ou no Simulador. O modo retorna à seleção normal após um único clique. Quando você clica em Selecionar elemento, o aplicativo vai para o primeiro plano e o cursor muda para refletir o novo modo de seleção. Nesse modo, quando você posiciona o ponteiro do mouse nos elementos no Simulador ou no dispositivo, um contorno colorido aparece sobre o elemento. Quando você clica no elemento com o contorno, o Explorador de DOMs volta para o primeiro plano com o elemento especificado selecionado. Para ver um exemplo que demonstra como selecionar elementos usando o botão Selecionar elemento, consulte Como inspecionar as regras de CSS.

Depurando aplicativos que usam componentes do Tempo de Execução do Windows

Ao depurar aplicativos Windows Store usando JavaScript que referenciam arquivos WinMD C# ou Visual Basic, ou que incluem componentes do Tempo de Execução do Windows em C++ (um arquivo WinMD e uma DLL), você pode especificar qual depurador usar. Não é possível depurar o JavaScript e o código gerenciado ou nativo simultaneamente.

Você pode especificar qual depurador executar na página de propriedades Depuração do projeto. Para obter mais informações, consulte Como iniciar uma sessão de depuração (JavaScript).

Implantando aplicativos

Em alguns cenários de depuração dos aplicativos Windows Store criados para o Windows usando JavaScript, talvez seja necessário implantar o aplicativo sem iniciá-lo no Visual Studio. Por exemplo, aplicativos criados para receber conteúdo compartilhado podem ser iniciados pela interface do usuário de compartilhamento; nesse caso, é necessário depurar pelo aplicativo que está compartilhando o conteúdo. Para o aplicativo que está recebendo o conteúdo compartilhado, você pode definir a propriedade Iniciar Aplicativo na página de propriedades Depuração do projeto como Não. Para obter mais informações sobre cenários de implantação de aplicativos, consulte Como iniciar uma sessão de depuração (JavaScript).

Habilitando exceções de primeira chance

Ao usar exceções de primeira chance, você pode especificar que um aplicativo entre no modo de interrupção quando encontrar uma exceção de tempo de execução. Quando esse recurso está habilitado, o aplicativo entra no modo de interrupção mesmo quando as exceções são tratadas. Isso permite ver alguns erros que normalmente não seriam evidentes durante a depuração. Algumas bibliotecas fazem amplo uso de exceções e, ao trabalhar com essas bibliotecas, é melhor deixar as exceções de primeira chance desabilitadas.

Para habilitar exceções de primeira chance

1. No Visual Studio, clique em Depurar > Exceções.

2. Na caixa de diálogo Exceções, expanda o nó Exceções de Tempo de Execução do JavaScript.

3. Marque a caixa de seleção Lançado para todas as exceções nas quais você deseja que o depurador sempre interrompa e clique em OK.

Suporte a navegadores e plataformas

As ferramentas do Visual Studio para JavaScript, o Explorador do DOM e a janela Console do JavaScript são suportadas nas seguintes plataformas:

• Aplicativos Windows Store criados para o Windows 8 usando JavaScript

• Internet Explorer 10 em execução no Windows 8

Clique aqui para baixar o Windows 8 e o Visual Studio.

Consulte também

Tarefas

Como exibir os ouvintes de eventos

Como atualizar um aplicativo

Referência

Troubleshooting Windows Runtime errors

How to handle errors with promises

Conceitos

Depurando aplicativos da Windows Store

Como inspecionar as regras de CSS

Como exibir e editar o layout

Outros recursos

Suporte e acessibilidade ao produto