Depurar seu aplicativo compilado com o Visual Studio Tools for Apache Cordova
Este artigo se refere ao Visual Studio Tools for Apache Cordova, que é um software de pré-lançamento. Os recursos descritos estão em pré-lançamento e sujeitos a alterações. Você pode baixar a visualização do Microsoft Download Center.
Visual Studio oferece uma experiência perfeita e comum de ferramentas para desenvolvimento de aplicativos de Cordova em plataformas de dispositivo e tipos de aplicativo. No entanto, nesta versão inicial, nem todas as plataformas de dispositivo suportam todos os recursos de depuração e diagnóstico do Visual Studio, conforme mostrado na tabela a seguir.
Dispositivo ou sistema operacional |
Depurador do Visual Studio suportado? |
Mensagens do console suportadas? |
Solução alternativa |
|---|---|---|---|
Android 4.4 |
Sim |
Sim |
- |
Versões Android 2.3.3 a 4.3 |
Não (consulte informações sobre jsHybugger posteriormente neste artigo) |
Sim |
- |
iOS 6, 7, 8 |
Sim |
Sim |
- |
O Windows 8, 8.1(Store) |
Sim |
Sim |
- |
Windows Phone 8, 8.1 |
Não |
Não (use o plug-in do Console) |
Use o Web Inspector Remote (weinre) ou o plug-in do Console. Consulte depurar o Windows 8 e Windows Phone 8 posteriormente neste artigo. |
Windows Server 2012 R2 |
Sim |
Sim |
Para executar o aplicativo no Windows Server 2012 R2, você deve habilitar a opção Experiência Desktop. |
Dica
Se estiver usando o Windows 7, poderá desenvolver aplicativos para Android e iOS, mas não para Windows ou Windows Phone.
Neste artigo:
Depurar Android e iOS no Apache Ripple
Depurar Android no emulador ou um dispositivo
Depurar iOS no emulador ou um dispositivo
Depurar Windows 8 e Windows Phone 8
Depurar Android e iOS no Apache Ripple
Você pode anexar o depurador do Visual Studio a um aplicativo que está sendo executado no emulador Apache Ripple.
Para depurar no Ripple
Com o aplicativo aberto no Visual Studio, pressione F5.
Você pode atingir pontos de interrupção no seu código, use o Gerenciador de DOM ou veja as mensagens enviadas para o Console do JavaScript.
A ilustração a seguir mostra um ponto de interrupção definido no Editor de Código.
.png "Definindo um ponto de interrupção durante a depuração usando ondulação")
Aqui, o depurador do Visual Studio atinge o ponto de interrupção durante a depuração no emulador Ripple.
.png "Ponto de interrupção detectado pelo depurador do Visual Studio")
Importante
O depurador do Visual Studio não para nos pontos de interrupção atingidos antes de a primeira página carregar no Ripple.No entanto, o depurador irá parar nesses pontos de interrupção depois de atualizar o navegador.
Os seguintes comandos do Console de JavaScript são suportados no momento pelo Ripple:
- console.assert
console.clear
console.count
console.debug
console.dir
console.dirxml
console.error
console.info
console.log
console.time
console.timeEnd
console.warn
Dica
Nenhum outro comando do console ou comandos diversos do Console de JavaScript são suportados no momento.console.dirxml tem o mesmo comportamento que console.dir em navegadores de Webkit.
O Gerenciador de DOM permite depurar CSS e HTML. Recursos disponíveis nas guias Estilos, Computado e Layout do Gerenciador de DOM são suportados no Ripple.
Dica
Para obter informações detalhadas sobre o suporte à depuração, consulte os Problemas conhecidos.
Depurar Android no emulador ou em um dispositivo
Você pode anexar o depurador do Visual Studio ao emulador Android ou a um dispositivo Android para depurar seu aplicativo no Android 4.4.
Se você estiver usando uma versão Android entre 2.3.3 e 4.3, você pode instalar o plug-in jsHybugger para habilitar o diagnóstico Android (Explorador do DOM, console e depuração). Este plug-in implementa seu código localmente para habilitar a depuração remota em dispositivos com Android e emuladores e suporta 2.3.3 Android e versões posteriores.
Para depurar em Android 4.4
Com o aplicativo aberto no Visual Studio, pressione F5.
Se você estiver usando Android 4.4, poderá atingir pontos de interrupção no seu código, ver as mensagens enviadas para o Console do JavaScript e usar o Gerenciador de DOM.
Importante
O depurador do Visual Studio não para nos pontos de interrupção atingidos antes da primeira página carregada nos emuladores do Android 4.4 ou em dispositivos Android.No entanto, o depurador irá parar nesses pontos de interrupção após executar o comando a seguir no Console do JavaScript:window.location.reload()
Para depurar em versões Android 2.3.3-4.3 com o plug-in jsHybugger
Abra o projeto Cordova no Visual Studio.
Np projeto, crie uma pasta plugins, se ainda não existir. (Para adicionar uma pasta, abra o menu de atalho do seu projeto no Gerenciador de Soluções, escolha Adicionar, Nova Pasta e, em seguida, defina o nome da pasta como plugins.)
Baixe o plug-in jsHybugger e extraia seu conteúdo.
Dica
Para obter mais informações sobre esse plug-in, consulte o site do jsHybugger.Você pode usar o plug-in sem uma licença, mas as sessões de depuração são limitadas a dois minutos.Para obter depuração ilimitada, você deverá adquirir uma licença do jshybugger.As instruções a seguir pressupõem que você adquiriu uma licença e baixou o arquivo de licença como jshybugger_license.xml.
Coloque a pasta descompactada jshybugger-plugin-x.x.x na pasta plugins do projeto.
Coloque o arquivo jshybugger_license.xml na raiz do projeto.
O projeto ficará assim no Gerenciador de Soluções.
.png "Estrutura do projeto após a instalação do jsHybugger")
Pressione F5 para iniciar a depuração em relação a um dispositivo ou emulador do Android.
Você pode exibir as mensagens enviadas para o Console do JavaScript e usar o Gerenciador de DOM.
Importante
Você deve remover o plug-in jsHybugger e o arquivo de licença do projeto antes de publicar o aplicativo.
O plug-in não tem efeito ao usar o emulador Apache Ripple ou a depuração em dispositivos e emuladores Android 4.4, portanto não há necessidade de removê-lo ao alternar entre diferentes destinos de Android durante o teste.
Os seguintes comandos do Console de JavaScript são suportados no momento pelo Android:
- console.assert
console.clear
console.count
console.debug
console.dir
console.dirxml
console.error
console.info
console.log
console.time
console.timeEnd
console.warn
Dica
Nenhum outro comando do console ou comandos diversos do Console de JavaScript são suportados no momento.console.dirxml tem o mesmo comportamento que console.dir em navegadores de Webkit.
Recursos disponíveis nas guias Estilos, Computado e Layout do Gerenciador de DOM são suportados no Android.
Aviso
Outras ferramentas de diagnóstico e depuração disponíveis para o Windows não estão disponíveis no momento para o Android.Continuaremos trabalhando para melhorar o suporte à depuração no Android em versões futuras.Para obter informações detalhadas sobre o suporte à depuração, consulte os Problemas conhecidos.
Depurar iOS em um emulador ou um dispositivo
Você pode anexar o depurador do Visual Studio para o simulador do iOS ou um dispositivo iOS. iOS 6, 7 e 8 têm suporte.
Dica
Atualmente, não há suporte para anexar o depurador a aplicativos do iOS que usam o plug-in InAppBrowser.O plug-in de serviços móveis do Azure usa o plug-in InAppBrowser e é afetado por essa limitação.
Para depurar em iOS
Verifique se você tem instalou o agente remoto do vs-mda em seu Mac, iniciar o agente e configurado o Visual Studio para conectar-se ao agente.
Se você estiver depurando em um dispositivo real, vá para o seu dispositivo e escolha configurações, Safari, avançadoe, em seguida, habilitar Web Inspector.
Isso permite depuração no dispositivo remoto. (Essa etapa não é necessária para depurar o simulador do iOS.)
Com seu aplicativo aberto no Visual Studio e iOS selecionado como um destino de implantação, pressione F5.
Você pode clicar em conjunto de pontos de interrupção no seu código, exibir mensagens enviadas para o Console do JavaScript e usar o Explorador do DOM.
Importante
O depurador do Visual Studio não parar em pontos de interrupção são atingidos antes da primeira página é carregada no simulador do iOS ou em dispositivos iOS.No entanto, o depurador irá parar nesses pontos de interrupção após executar o comando a seguir no Console do JavaScript:window.location.reload()
O seguinte comandos do JavaScript Console atualmente têm suporte no iOS:
- console.assert
console.clear
console.count
console.debug
console.dir
console.dirxml
console.error
console.info
console.log
console.time
console.timeEnd
console.warn
Dica
Nenhum outro comando do console ou comandos diversos do Console de JavaScript são suportados no momento.console.dirxml tem o mesmo comportamento que console.dir em navegadores de Webkit.
Recursos disponíveis no estilos, calculado, e Layout guias a Explorador do DOM são suportadas no iOS.
Aviso
Continuaremos a melhorar o suporte à depuração em versões futuras.Para obter informações detalhadas sobre o suporte à depuração, consulte os Problemas conhecidos.
Depurar Windows 8 e Windows Phone 8
Para aplicativos do Windows, você pode usar as mesmas ferramentas de depuração do Visual Studio que você usaria para qualquer aplicativo da Windows Store criado usando HTML e JavaScript. Para obter mais informações, consulte Depurar aplicativos da Store no Visual Studio no Centro de Desenvolvimento do Windows.
Para aplicativos do Windows Phone, esta versão antecipada não oferece suporte a anexar o depurador do Visual Studio. Em vez disso, você pode usar o Web Inspector Remote (weinre), descrito em um post do blog Microsoft Open Technologies.
Dica
Anexar o depurador do Visual Studio para projetos do Windows Phone 8.1 terão suporte na próxima versão do Visual Studio Tools para o Apache Cordova.
Como alternativa ao uso de weinre para depuração do Windows Phone, adicione o plug-in do Console ao aplicativo, crie o aplicativo e, em seguida, abra o projeto do Windows Phone 8 nativo gerado no Visual Studio. O projeto nativo pode ser encontrado na pasta \bld\Debug\platforms\wp8. Com o projeto nativo aberto, você pode usar a janela de Saída para exibir a saída do console. Para obter mais informações sobre como acessar os projetos nativos, consulte Acessar um projeto nativo do Cordova.
Aviso
As alterações feitas ao projeto nativo serão substituídas quando você recria o aplicativo Cordova.
Consulte também
Conceitos
Introdução ao Visual Studio Tools for Apache Cordova