Existe uma solução real para depurar aplicativos cordova [fechado]


130

Passei os últimos dois dias tentando descobrir como depurar um aplicativo HTML5 que criei usando o Cordova 3.2 e implantei em um dispositivo Android 2.3. Todos os artigos / postagens que eu vi fornecem hacks em vez de soluções reais :( e na maioria das vezes, nenhum deles funciona para o meu caso; depure os estilos css e o código Angularjs dentro do meu aplicativo.

Até agora eu testei;

debug.phonegap.com

index.htmlInjetei o script no arquivo e visitei o URL gerado em debug.phonegap.com, mas nada acontece; apenas uma página em branco.

Weinre

A maioria dos artigos que encontrei apontam para o repositório Github obsoleto que contém um arquivo Jar .. mas não foi encontrado :(

Inspeção de borda

Ele funciona e mostra a página da Web que estou navegando no PC dentro do celular. Mas o problema é que ele usa outro navegador (ou emulador) integrado que não seja o que executa aplicativos de conexão telefônica; para que os resultados não sejam precisos.

Emulador do Chrome

O mesmo que o Edge inspeciona; ele não permite exibir o kit da web real v530 fornecido com o Android 2.3.

A solução dos sonhos

A solução perfeita seria uma extensão do Google Chrome (desktop) que permite alternar o navegador para o mesmo encontrado nas plataformas Android 2.3; sem emulação, sem hacks, apenas o próprio navegador com o web-kit v 530.

Infelizmente, essa solução não existe :( ou eu estou errado?

Alguma sugestão?


Respostas:


139

PARA ANDROID:

Você só precisa ativar o "depurador remoto USB" no seu dispositivo Android e conectar com um cabo USB. Em seguida, abra seu aplicativo no dispositivo. O Chrome detectará o navegador remoto e você poderá ver o console da mesma maneira que o usa localmente.

Use este link: chrome://inspect/#devices no navegador Chrome (você precisará colá-lo na barra de navegação).

Se o seu aplicativo travar no dispositivo, você só precisará ver o log do console no navegador e ver o que acontece. Você também pode adicionar funcionalidade, alterar variáveis ​​e substituir funções da mesma maneira que fazemos com nosso navegador local.

Leia este artigo para obter mais informações sobre as etapas a serem seguidas.

Isso funcionará APENAS com dispositivos com Android 4.4 ou superior.

PARA iOS:

Use o Safari para iOS, siga estas etapas:

1. No dispositivo iOS, vá para Configurações> Safari> Avançado> Inspetor da Web para ativar o Inspetor da Web

2. Abra o Safari no seu dispositivo iOS.

3.Conecte-o ao seu computador via USB.

Abra o Safari no seu computador.

5.No menu do Safari, vá para Desenvolver e, procure o nome do seu dispositivo.

6. Selecione a guia que deseja depurar.

insira a descrição da imagem aqui


3
Posso ver o console e meu aplicativo no chrome no meu computador, enquanto meu smartphone está conectado via usb. Solução muito legal.
emilie zawadzki

Ele não encontrou meu telefone até eu correr adb start-server.
Leukipp

@Leukipp Eu também enfrento o mesmo problema, mas depois disso adicione o ADT na inicialização do sistema Windows. meu problema resolver ..
Neotrixs 18/03/16

2
A resposta apresenta a solução para o problema errado - a questão não é depurar um navegador, trata-se de depurar um WebView. Eles são um pouco diferentes, como é evidente, entre uma infinidade de usuários frustrados confusos porque seus WebViews em que seus aplicativos são exibidos não aparecem chrome://inspect.
amn

1
Android 4.4+ :( Essa é a razão ...
candlejack

76

AVISO PRÉVIO

Esta resposta é antiga (janeiro de 2014). Muitas soluções de depuração novas estão disponíveis desde então.


Eu finalmente consegui! usando weinre e cordova (sem compilação Phonegap) e para evitar problemas para futuros desenvolvedores, que podem enfrentar o mesmo problema, fiz um tutorial no YouTube ;)


Estava faltando a configuração adequada do IP, agora funciona perfeitamente, muito obrigado!
Juan Carlos Alpizar Chinchilla

8
Weinre não é depurador, permite apenas inspeções DOM, você não pode js depuração e até mesmo assistir a mensagens de console
Bogdan Mart

19
... como um link para um vídeo do youtube é uma resposta aceitável?
Meekohi 25/03

2
@Meekohi ele fez o vídeo :)
candlejack

10
Como em todas as respostas do stackoverflow - um link para uma solução (feita ou não pelo autor), é desaprovada. Mantenha as soluções aqui, e não externamente para onde elas podem ir um dia.
DarkNeuron

56

Se você pode usar um dispositivo Android 4.4 ou superior, pode usar a Depuração remota do Chrome, mesmo no WebView interno do aplicativo. É um depurador muito melhor que o Weinre, mas a chave é usar a versão recente do Android.

As compilações recentes do Cordova ativam automaticamente esse tipo de depuração, desde que seja uma compilação de depuração (desativada nas compilações --release).


Parece ótimo - também notei que há um plug-in de criação de phonegap disponível para ativar esse recurso.
21414

1
De acordo com o seu comentário: é desligado em -release constrói (Isso não é verdade)
Luckyy

9
Ré. achei esse link útil. Pertinentemente, use o Chrome para navegar chrome://inspecte verificar se "Descobrir dispositivos USB" está marcado. Isso exibirá qualquer WebViews passíveis de depuração nos dispositivos conectados.
Sharadh 9/03/2015

o problema com esta solução é que console.logparece não funcionar. Você precisa passar pelo alertsque é realmente um fardo.
João Pimentel Ferreira

(it's turned off in --release builds).esse aviso salvou meu dia!
maswerdna 8/03

32

O melhor para mim é anexar o depurador do Chrome.

Para fazer isso, execute seu aplicativo em um emulador ou dispositivo (usando o $ cordova emulate)

abra o Google Chrome e acesse chrome://inspect/

Você verá uma lista com os aplicativos em execução. Seu aplicativo deve estar lá. Clique em "inspecionar".

Uma nova janela será aberta com as ferramentas do desenvolvedor. Lá você pode clicar em "console" para verificar se há erros


7
Por favor, verifique sua resposta funcionará nas condições do OP. O depurador do Chrome funciona apenas com o Android 4.4 ou superior.
Chris Neve

20

Se o seu aplicativo estiver executando o Cordova 3.3+ e o dispositivo estiver executando o Android 4.4+, você poderá usar a Depuração da Webview Remota do Chrome para depurar seu aplicativo Cordova.

Para poder fazer isso, você deve primeiro ativar a depuração USB no seu telefone.

Em seguida, abra a guia "inspecionar dispositivos". No Chrome, vá para Configurações > Mais ferramentas > Inspecionar dispositivos .

Se você iniciar o aplicativo no dispositivo enquanto estiver conectado ao computador, o Webview deverá aparecer na lista de dispositivos. Clique no link "Inspecionar" do seu Webview e uma Ferramenta de Depuração para o seu Webview deve aparecer.

Aqui está um artigo explicando completamente como fazê-lo: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/


Esta é uma das melhores e mais completas respostas desta seção de comentários, mesmo que não ajude o OP por causa do 4.4+.
Chris Neve

7

Você já tentou 'GapDebug' ? É grátis.

Parece integrar versões do Safari Webkit Inspector e Chrome Dev Tools para oferecer uma experiência de depuração integrada no OS X e Windows.


1
Essa é uma ferramenta essencial, especialmente para usuários do Windows que desejam se conectar ao iPhone de depuração por etapas - eu recomendo.
mike nelson

7

Outra opção é o Visual Studio, que possui suporte de pré - lançamento para depuração de aplicativos Cordova :

Experiência de depuração unificada . O desenvolvimento de plataforma cruzada geralmente requer uma ferramenta diferente para depurar cada dispositivo, emulador ou simulador. Ferramentas diferentes significam fluxos de trabalho diferentes e perda de produtividade toda vez que você muda de dispositivo. Com o Visual Studio, você pode usar as mesmas ferramentas de depuração de classe mundial para todos os destinos de implantação, incluindo Windows, o emulador Android, dispositivos Android conectados, dispositivos iOS e emuladores e o emulador Apache Ripple.

Agora que a Microsoft lançou a edição da Comunidade do Visual Studio gratuitamente , você pode fazer uma tentativa sem nenhum custo. Você precisará baixar o Visual Studio e o Visual Studio Tools para Apache Cordova .


Como o outrora surpreendente XDK da Intel interrompeu o suporte ao depurador, tive que procurar uma nova opção. O Visual Studio é o único que encontrei que é a solução tudo em um (IDE, depurador, gerenciador de plugins, etc.). A instalação demora um pouco, mas é muito simples. Uso o Enterprise 2015. Ele cria, mas não tenho certeza se ele publica ainda (ainda não cheguei a esse ponto).
Victor Stoddard

5

Até onde eu sei, a única ferramenta produtiva para depuração real nos aplicativos Cordova para plataformas Android de 2.2 a 4.3 é o jshybugger . Weinre é um inspetor, não um depurador. JsHybugger instrumenta seu código, permitindo que você depure dentro do Android WebView.


5

Só quero adicionar que você pode depurar aplicativos Android usando o Genymotion . É MUITO mais rápido que o emulador de ações do Android.


1
O Genymotion permite usar a depuração remota do chrome, pois não é tratado como emulador, mas como dispositivo real. A câmera e outros recursos de hardware também funcionam, mas alguns deles são pagos.
precisa saber é o seguinte

4

Você pode usar o Intel XDK IDE para desenvolver e depurar no emulador ou no dispositivo real

Também achei muito boas as ferramentas do Visual Studio 2015 RC para cordova, com seu emulador de ondulação


3

Se você usa a compilação phonegap, existe uma opção para ativar a depuração.


Para compilações locais, você pode instalar o weinre com o npm: https://npmjs.org/package/weinre

E o link para os documentos do weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/


E existe algo chamado depuração remota do chrome, mas eu não sei muito sobre isso, você pode dar uma olhada no artigo de Raymond Camden: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-and-Remote-Debugging-for-Android

Documentos para a depuração remota do Chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (se bem entendi, você precisa de um dispositivo Android com o Chrome como navegador padrão) Talvez o mais próximo do seu sonho solução?


Obrigado pelas informações; Eu prefiro usar o caminho cordova gratuito;) e consegui trabalhar agora (verifique minha resposta) obrigado! 1
numediaweb

1
verifique minha edição, parece que o chrome não está longe de ser a solução dos seus sonhos, afinal
QuickFix

Observe que o dispositivo que estou usando está executando o Android 2.3, enquanto a depuração remota do Chrome requer Android 4.4 ou superior. Mas obrigado "QuickFix"; Eu tenho tudo funcionando agora .. ver meu tutorial;)
numediaweb

3

No Android 4.4 ou superior com SDK instalado:

adb logcat chromium:D SystemWebViewClient:D \*:S

2

Se você estiver usando o Cordova 3.3 ou superior e seu dispositivo estiver executando o Android 4.4 ou superior poderá usar a 'Depuração remota no Android com Chrome'. Instruções completas estão aqui:

https://developer.chrome.com/devtools/docs/remote-debugging

Em suma:

  • Conecte o dispositivo ao seu computador desktop usando um cabo USB
  • Ativar a depuração USB no seu dispositivo (no meu dispositivo, isso está em Configurações> Mais> Opções do desenvolvedor> Depuração USB)

Ou , se você estiver usando o Cordova 3.3+ e não tiver um dispositivo físico com o 4.4, poderá usar um emulador que usa o Android 4.4+ para executar o aplicativo através do emulador, no seu computador desktop.

  • Execute seu aplicativo Cordova no dispositivo ou emulador
  • No Chrome no seu computador desktop, digite chrome: // inspecionar / # dispositivos na barra de endereço
  • Seu dispositivo / emulador será exibido junto com outros dispositivos reconhecidos conectados ao seu computador e, no seu dispositivo, haverá detalhes do Cordova 'WebView' (basicamente seu aplicativo Cordova), que está sendo executado no dispositivo / emulador ( a maneira como o Cordova funciona é que ele basicamente cria uma janela de 'navegador' no seu dispositivo / emulador, na qual existe um 'WebView', que é seu aplicativo HTML / JavaScript em execução)
  • Clique no link 'inspecionar' na seção 'WebView' onde você vê o seu dispositivo / emulador listado. Isso exibe as ferramentas de desenvolvedor do Chrome que agora permitem depurar seu aplicativo.
  • Selecione a guia 'fontes' das ferramentas de desenvolvedor do Chrome para visualizar o JavaScript que seu aplicativo Cordova no dispositivo / emulador está executando no momento. Você pode adicionar pontos de interrupção no JavaScript que permitem depurar seu código.
  • Além disso, você pode usar a guia 'console' para visualizar quaisquer erros (que serão mostrados em vermelho) ou, na parte inferior do console, você verá um prompt '>'. Aqui você pode digitar quaisquer variáveis ​​ou objetos (por exemplo, objetos DOM) dos quais deseja inspecionar o valor atual e o valor será exibido.

2

Aqui está a solução usando o Phonegap Build. Adicione o seguinte ao seu config.xml para poder inspecionar com a Depuração remota da Webview do Chrome.

Primeiro, verifique se a tag do widget contém xmlns: android = "http://schemas.android.com/apk/res/android"

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

Em seguida, adicione o seguinte

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

Funciona para mim no Nexus 5, Phonegap 3.7.0.

<preference name="phonegap-version" value="3.7.0" />

Crie o aplicativo no Phonegap Build, instale o APK, conecte o telefone ao USB, ative a depuração USB no seu telefone e visite chrome: // inspecionar.

Fonte: https://www.genuitec.com/products/gapdebug/learning-center/configuration/


SANTO BEJEEZUS !!! Eu posso finalmente depurar meus apk's !!! Muito obrigado, não sei por que isso não é em nenhum outro lugar mais proeminente. Incluindo essas notas literalmente no leia-me do meu projeto.
Josh

2

Use o Monitor de dispositivo Android

O Android Device Monitor vem com pacotes do Android sdk que você instalaria anteriormente. No monitor do dispositivo, você pode ver todo o registro do dispositivo, exceções, mensagens de tudo. Isso é útil para depurar falhas do aplicativo ou quaisquer outros problemas. Para executar isso, vá para a pasta tools / dentro do seu android sdk “/ var / android-sdk-linux / tools”. Em seguida, execute o seguinte

chmod +x monitor
./monitor

Se você estiver no Windows, abra diretamente o arquivo monitor.exe. Há uma guia abaixo do “LogCat”, na qual você verá todas as mensagens relacionadas ao dispositivo. Você verá todas as mensagens aqui, incluindo as exceções do dispositivo Android que não são visíveis no Chrome. Certifique-se de criar filtros usando a guia "+" na guia logcat, para ver apenas as mensagens do seu aplicativo.

Fonte: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/


Para usuários do Linux, dependendo do método de instalação do SDK, ele também pode ser encontrado em ~ / Android / Sdk / tools / monitor ou apenas tente digitar monitor.
Strixy 19/05

2

Você também pode depurar com o Chrome seus aplicativos html5

Eu crio um .bat para abrir o chrome no modo de depuração

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

1
Obrigado, mas eu achei a melhor abordagem é usar o weinre para depurar o projeto com o navegador webkit integrado do próprio dispositivo!
Numeroweb

1
Em segundo lugar, considerando que o ripple fornece uma idéia média de como ficará quando você o liberar, o que é bom, às vezes há diferenças comparando o emulador e o dispositivo real, principalmente porque o emulador funciona com o mecanismo do navegador da web ' está sendo executado nele, o que não é o mesmo em algumas situações em que seu dispositivo funcionará. Então, eu costumo usar ambos, ondulação para projetar a interface do usuário, e weinre ao comportamento de teste quando algo não funciona como esperado
Juan Carlos Alpizar Chinchilla

2

Você pode depurar os aplicativos Cordova Android instalados remotamente no seu telefone a partir do seu computador através do cabo USB (você também pode clicar remotamente no aplicativo Web como se estivesse visualizando o aplicativo Web do seu computador) com "Depuração remota do Chrome". Você também pode depurar aplicativos da Web visualizados no navegador Stock Android ou Chrome no Android dessa maneira.

  1. Ative o modo de desenvolvedor no seu dispositivo Android (vá para configurações -> sobre o telefone -> toque em 7x no número da versão).

  2. Conecte seu computador ao telefone via cabo USB.

  3. Almoce o Chrome no seu computador e navegue até o chrome: // inspecione e clique no botão "Inspecionar" ao lado do dispositivo remoto que você deseja depurar (na guia "Dispositivos"). OU clique com o botão direito do mouse dentro do Chrome no seu computador -> Inspecionar -> Traje e controle o DevTools (3 pontos verticais - canto superior direito das ferramentas do desenvolvedor) -> Mais ferramentas -> Dispositivos remotos -> em Dispositivos no lado esquerdo, clique no seu dispositivo ao qual você está conectado via USB -> clique no botão Inspecionar para o aplicativo que deseja.

  4. Em seguida, clique em "Console" e você pode depurar o JavaScript da mesma maneira, como faria em um aplicativo Web normal com as ferramentas de desenvolvedor do Chrome.


Isso funciona no meu telefone (Android 6), mas não funciona no meu tablet (nota 8 android 4.4)
Danielo515

Foi um problema com a visualização na web do Android. Instalando faixa de pedestres plugin permite-me para fazer este tipo de depuração em dispositivos mais antigos (até feijão de geléia)
Danielo515

1

Eu amei weinre! Como usá-lo:

Primeiro, coloque o seu index.html(verifique se app.settings.debugUrlestá definido antes disso):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

Então:

Baseado em http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/


Weinre não é depurador, permite apenas inspeções DOM, você não pode js depuração e até mesmo assistir a mensagens de console,
Bogdan Mart

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.