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

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?

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.

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

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).

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

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/

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.

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 .

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.

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

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

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?

No Android 4.4 ou superior com SDK instalado:

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

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.

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/

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/

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

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.

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:

• instalar: sudo npm install -g weinre
• corre: weinre --boundHost -all-
• aberto no navegador: http: // localhost: 8080 / client / # anonymous
• observe as metas aparecerem quando você abrir o aplicativo

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

Os dispositivos com Android <= 4.0.4 precisam adicionar o plug-in https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt