Guia de início rápido: depurar o JavaScript usando o console

Artigo
07/08/2015

Aplica-se ao Windows e Windows Phone

Você pode usar a janela do Console do JavaScript para interagir e depurar aplicativos da Windows Store criados com JavaScript. Esses recursos têm suporte para Windows Store e aplicativos do Windows Phone Store. Para a referência de comandos do console, consulte Comandos do Console JavaScript.

A janela do Console do JavaScript permite que você:

Envie objetos, valores e mensagens de seu aplicativo para a janela do console.
Exibir e modificar os valores das variáveis locais e globais no aplicativo em execução.
Visualizadores de objetos de exibição.
Execute o código JavaScript que é executado no contexto do script atual.
Exibir erros de JavaScript e exceções, além de exceções de tempo de execução do Windows e modelo de objeto de documento (DOM).
Execute outras tarefas, como limpar a tela. Consulte Comandos do Console JavaScript para a lista completa de comandos.

Neste tópico:

Depurar usando a janela Console do JavaScript
Modo de depuração e quebrar interativo
Modo de linha única e modo de várias linhas na janela do Console do JavaScript
Alternar o contexto de execução de script

Dica

Se a janela do Console do JavaScript estiver fechada, escolha Depurar > Windows > JavaScript Console para abri-la novamente.A janela só aparece durante uma sessão de depuração de script.

Usando a janela Console do JavaScript, você pode interagir com seu aplicativo sem interromper e reiniciar o depurador. Para obter mais informações, consulte Atualizar um aplicativo (JavaScript). Para obter informações sobre outros recursos, como usar o Explorador do DOM e pontos de interrupção, de depuração do JavaScript, consulte Guia de início rápido: depurar HTML e CSS e Depurar aplicativos da Store no Visual Studio.

Depurar usando a janela Console do JavaScript

As etapas a seguintes criam um FlipView aplicativo e mostram como depurar interativamente um erro de codificação JavaScript.

Para depurar o código JavaScript no aplicativo FlipView

Criar uma nova solução no Visual Studio escolhendo arquivo > novo projeto.
Escolha JavaScript > aplicativos da Windows Store, escolha aplicativos Windows ou aplicativos do Windows Phone, e, em seguida, escolha aplicativo em branco.
Digite um nome para o projeto, como FlipViewApp, e escolha OK para criar o aplicativo.

No elemento BODY de Default. HTML, substitua o código HTML existente por 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" data-win-control="WinJS.UI.FlipView" data-win-options="{
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
</div>

Abra default. CSS e adicione o CSS para o #fView seletor:

#fView {
    background-color:#0094ff;
    height: 500px;
    margin: 25px;
}

Abra default. js e substitua o código com o seguinte código JavaScript:

(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);

})();

Se um destino de depuração não estiver selecionado, escolha simulador ou, para o Windows Phone Emulator 8.1 WVGA 4 inch 512MB na lista suspensa lista ao lado de dispositivo botão o Depurar barra de ferramentas:
Pressione F5 para iniciar o depurador.

O aplicativo será executado, mas imagens estão ausentes. Erros APPHOST na janela Console do JavaScript indicam que as imagens estão ausentes.
Com o FlipView aplicativo em execução no simulador ou emulador de telefone tipo Items no prompt de entrada da janela do console (ao lado de ">>" símbolo) e pressione Enter.

Um visualizador para o items objeto aparece na janela do console. Isso indica que o items objeto instanciado e está disponível no contexto do script atual. Na janela do console, você pode clicar em nós de um objeto para exibir valores de propriedade (ou usar as teclas de direção). Se você clicar na seta para a items._data objeto, como mostra esta ilustração, você descobrirá que suas referências da origem de imagem estão incorretas, conforme o esperado. As imagens padrão (PNG) ainda estão presentes no objeto e há imagens ausentes intercaladas com as imagens esperadas.

Observe também que há muito mais itens no items._data do objeto que você imagina.
No prompt, digite Data.items.push e pressione Enter. A janela do console mostra um visualizador para o push função, que é implementada em um Windows Library para JavaScript (WinJS) arquivo de projeto. Neste aplicativo, estamos usando push para adicionar os itens corretos. Com uma pequena investigação usando o IntelliSense, descobrimos que devemos usar setAt para substituir as imagens padrão.
Para corrigir esse problema interativamente, sem interromper a sessão de depuração, abra Default. js e selecione o código a partir de updateImages função:
```
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 este código no prompt de entrada do Console JavaScript.

Dica

Quando você cola várias linhas de código no prompt de entrada do Console do JavaScript, o prompt de entrada do console alterna automaticamente para o modo.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 escolha o símbolo de seta no canto inferior direito da janela.Para obter mais informações, consulte modos de linha única e multilinha.
Corrija o push função chama no prompt, substituindo pages.push com Data.items.setAt. O código corrigido deve ter esta aparência:
```
Data.items.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Dica

Se você quiser usar o pages do objeto, em vez de Data.items, você precisaria definir um ponto de interrupção em seu código para manter a pages objeto no escopo.
Escolha o símbolo de seta verde para executar o script.
Pressione Ctrl + Alt + M para alternar o prompt de entrada do console para o modo de linha única e, em seguida, escolha Limpar entrada (o "X" vermelho) para excluir o código do prompt de entrada.
Tipo Data.items.length = 3 no prompt e pressione Enter. Isso remove os elementos estranhos dos dados.
O simulador ou emulador do Windows Phone novamente, e você verá que as imagens corretas estão nas correta FlipView páginas.
No Explorador do DOM, você pode ver o elemento DIV atualizado e você pode navegar na subárvore para encontrar os elementos IMG esperados.
Parar a depuração escolhendo Depurar > parar depuração ou pressionando Shift + F5 e, em seguida, corrija o código-fonte.

Para a página Default. HTML completa que contém código de exemplo corrigido, consulte Depurar código de exemplo em HTML, CSS e JavaScript.

Modo de depuração e quebrar interativo

Você pode usar pontos de interrupção e entrar no código enquanto você estiver usando ferramentas como a janela do Console do JavaScript de depuração JavaScript. Quando um programa que está em execução 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 continuar a execução a qualquer momento.

Quando um programa está no modo de interrupção, você pode usar a janela do Console do JavaScript para executar scripts e comandos válidos no contexto de execução do script atual. Neste procedimento, você usará a versão corrigida do FlipView aplicativo que você criou anteriormente para demonstrar o uso do modo de interrupção.

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

No arquivo default. HTML da FlipView aplicativo anteriormente criado, abra o menu de atalho do updateImages() de função e escolha ponto de interrupção > Inserir ponto de interrupção.
Escolha Máquina Local ou Emulator 8.1 WVGA 4 inch 512MB na lista suspensa lista ao lado de Iniciar depuração botão o Depurar barra de ferramentas.
Escolha Depurar > Iniciar depuração, ou pressione F5.

O aplicativo entra no modo de interrupção quando a execução atinge o updateImages() função 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 encerrar a sessão de depuração atual.
Tipo updateImages no prompt e pressione Enter. Um visualizador para a função é exibida na janela do console.
Selecione a função na janela do console para mostrar a implementação da função.

A ilustração a seguir mostra a janela de console nesse ponto.
Copiar uma linha da função da janela de saída para o aviso de entrada e altere o valor de índice para 3:
```
pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Pressione Enter para executar a linha de código.

Se você quiser passar pelo código linha por linha, pressione a tecla F11 ou pressione F5 para continuar a execução do programa.
Pressione F5 para continuar a execução do programa. O FlipView aplicativo aparece e agora todas as quatro páginas mostram uma das imagens não padrão.

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

Modo de linha única e modo de várias linhas na janela do Console do JavaScript

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

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. Modo de linha única limpa o aviso de entrada quando você executa scripts. Para executar um script no modo de linha única, pressione Enter.

Modo de várias linhas não limpa o aviso de entrada quando você executa scripts. Quando você alterna para o modo de linha do modo de várias linhas, você pode desmarcar a linha de entrada pressionando Limpar entrada (o "X" vermelho). Para executar um script no modo de várias linhas, pressione Ctrl + Enter ou escolha o símbolo de seta no canto inferior direito da janela.

Alternar o contexto de execução de script

Janela Console do JavaScript permite que você interaja com um contexto de execução única, que representa uma única instância do host de plataforma da web (WWAHost.exe), cada vez. Em alguns cenários, seu aplicativo pode iniciar outra instância do host, como quando você usa um iframe, um contrato de compartilhamento, um web worker, ou um WebView controle. Se outra instância do host está em execução, você pode selecionar um contexto de execução diferente enquanto executa o aplicativo selecionando o contexto de execução no destino lista.

A ilustração a seguir mostra a lista de destino na janela do Console do JavaScript.

Seleção de destino na janela do console do JavaScript

Você também pode alternar o contexto de execução usando o cd comando, mas você deve saber o nome do contexto de execução e a referência que você usar deve estar no escopo. O destino lista fornece um acesso melhor a outros contextos de execução.

Suporte de plataforma e navegador

A janela do Console do JavaScript é suportada nas seguintes plataformas:

Windows Store e os aplicativos do Windows Phone Store usando JavaScript e HTML
Internet Explorer 11 em execução em Windows 8,1
O Internet Explorer 10 em execução em Windows 8

Consulte também

Compartilhar via

Guia de início rápido: depurar o JavaScript usando o console

Depurar usando a janela Console do JavaScript

Para depurar o código JavaScript no aplicativo FlipView

Modo de depuração e quebrar interativo

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

Modo de linha única e modo de várias linhas na janela do Console do JavaScript

Alternar o contexto de execução de script

Suporte de plataforma e navegador

Consulte também

Tarefas

Conceitos

Outros recursos

Recursos adicionais