Como depurar javascript no Android?

Estou trabalhando em um projeto que envolve o Raphaeljs. Acontece que não funciona no Android. Ele faz no iPhone.

Como diabos eu vou depurar algo no navegador Android? É o WebKit, por isso, se eu conhecer a versão, a depuração nessa versão completa do WebKit produzirá os mesmos resultados?

Atualização: Depuração Remota

Anteriormente, o log do console era a melhor opção para depurar JavaScript no Android. Hoje em dia, com a depuração remota do Chrome para Android, podemos usar todas as vantagens das Ferramentas para desenvolvedores do Chrome for Desktop no Android. Confira https://developers.google.com/chrome-developer-tools/docs/remote-debugging para obter mais informações.

Atualização: Console JavaScript

Você também pode navegar para about: debug na barra de URL para ativar o menu de depuração e o console de erro do JavaScript com dispositivos Android recentes. Você verá SHOW JAVASCRIPT CONSOLE na parte superior do navegador.

Atualmente no Android 4.0.3 (Ice Cream Sandwich), o logcat gera no canal do navegador. Então você pode filtrar usando adb logcat browser:* *:S.

Resposta original

Você pode usar o consoleobjeto JavaScript incorporado para imprimir mensagens de log com as quais você pode revisar adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Produz esta saída:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

Determinando a versão do WebKit

Se você digitar javascript:alert(navigator.userAgent)na barra de localização, verá a versão do WebKit listada, por exemplo

No Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

No Android Emulator Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

As versões do WebKit que não fazem parte de uma versão do Safari possuem um + após o número da versão, e o número da versão geralmente é superior à versão mais recente do WebKit. Portanto, por exemplo, 528+ é uma compilação não oficial do WebKit que é mais recente que a versão 525.x enviada como parte do Safari 3.1.2.

Experimentar:

1. abra a página que você deseja depurar

2. enquanto estiver nessa página, na barra de endereço de um navegador Android padrão, digite:

   about:debug 

   (Observe que nada acontece, mas algumas novas opções foram ativadas.)

Funciona nos dispositivos que eu tentei. Leia mais no navegador Android sobre: ​​depuração, o que essas configurações fazem?

Editar: O que também ajuda a recuperar mais informações, como o número da linha, é adicionar este código ao seu script:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

O http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) fornece uma ótima maneira de usar o acesso ao conteúdo da sua página da web.

Eu uso o Weinre , parte do Apache Cordova .

Com o Weinre, eu obtenho o console de depuração do Google Chrome no meu navegador de desktop e posso conectar o Android a esse console de depuração e depurar HTML e CSS. Posso executar comandos Javascript no console e eles afetam a página da Web no navegador Android. As mensagens de log do Android são exibidas no console de depuração da área de trabalho.

No entanto, acho que não é possível visualizar ou percorrer o código Javascript real. Então eu combinei o Weinre com as mensagens de log.

(Eu não sei muito sobre o JConsole, mas me parece que a inspeção HTML e CSS não é possível com o JConsole, apenas comandos e log de JavaScript (?).)

Dê uma olhada no jsHybugger . Isso permitirá que você depure remotamente seu código js para:

• Aplicativos híbridos para Android (visualização na web, phonegap, worklight)
• Páginas da Web que são executadas no navegador Android padrão (não no Chrome, ele suporta a extensão ADB sem essa ferramenta)

Como isso funciona (mais detalhes e alternativas no site dos projetos, foi o que achei a melhor maneira).

1. Instale o jsHybugger APK no seu dispositivo
2. Ative a depuração USB no seu dispositivo.
3. Conecte o dispositivo Android ao seu computador desktop via USB
4. Execute o aplicativo no dispositivo Android ('jsHybugger')
5. Digite o URL e a página de destino no aplicativo. Pressione Iniciar serviço e, finalmente, abra o navegador
   • Você verá uma lista de navegadores instalados, escolha um.
   • O navegador é iniciado.
6. De volta ao computador, abra o Chrome no chrome: // inspecionar /
7. Uma janela de inspetores será exibida com as ferramentas de depuração do Chrome vinculadas à página no dispositivo Android.
8. debugar afastado!

Novamente, com o Chrome no Android, use a extensão ADB sem o jsHybugger. Eu acho que isso já descrito na resposta aceita a esta pergunta.

Para sua informação, a razão pela qual o RaphaelJS não funciona no Android é que o webkit do Android (diferente do iPhone Webkit) não suporta SVG no momento. O Google chegou recentemente à conclusão de que o SVG suporta um Android é uma boa ideia, por isso não estará disponível por algum tempo.

Depuração remota completa do Chrome do navegador nativo Android em um Galaxy S6 no Android 5.1.1:

1. Ativar depuração USB no telefone (configurações, toque rapidamente no número da compilação, configurações do desenvolvedor, depuração USB)
2. Abra "Internet"
3. Navegue para 'about: debug' (você verá um erro)
4. Menu MAIS> Configurações> Depuração> Depuração remota
5. Conecte o telefone ao computador com o cabo USB
6. No telefone, no navegador da Internet, abra o site que você deseja depurar
7. Abra o Chrome no computador
8. Navegue para 'chrome: // inspecionar'
9. Clique em inspecionar na guia do navegador que deseja inspecionar.

Os dispositivos Galaxy S5 são exibidos no Chrome, mas as guias são exibidas apenas após a reinicialização. Após reiniciar e tentar conectar, o navegador móvel trava.

Raphael não é suportado em navegadores Android anteriores à 3.0, é esse o seu problema. Eles não têm suporte para gráficos SVG. Porém, ele possui suporte para tela. Se você não precisar animá-lo, poderá renderizar os gráficos com canvg:

http://code.google.com/p/canvg/

Foi assim que resolvemos esse problema ao renderizar ícones SVG no navegador Android padrão.

A about:debug(ou chrome:\\debugambas dizem que a página não pode ser encontrada, mas habilita o menu Debug nas configurações) quando tentadas no Chrome ou Opera no Android KitKat 4.4.2 em uma guia Samsung

Se você tiver permissões de ROOT no seu dispositivo, poderá ver as mensagens do console diretamente no dispositivo. Use um aplicativo como o CatLog para visualizar a saída do log - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=pt-BR Isso permitirá visualizar todas as atividades do logcat.

No Android KitKat / 4.4.2, o console do navegador é enviado para o canal Chromium. Você pode filtrar por "Chromium" para obter toda a atividade do navegador (incluindo a atividade interna do navegador) ou simplesmente filtrar por "Console" para ver apenas o log do console do navegador.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Coloque na linha de endereço chrome://about. Você verá links para todas as possíveis páginas de desenvolvimento.

Você pode experimentar o YConsole um console incorporado js. É leve e simples de usar.

• Capturar logs e erros.
• Editor de objetos.

Como usar :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Ao executar o emulador do Android, abra o navegador Google Chrome e, no 'campo de endereço', digite:

chrome://inspect/#devices

Você verá uma lista dos seus destinos remotos. Encontre seu alvo e clique no link 'inspecionar'.

O Chrome possui um recurso maravilhoso que simplesmente leva o conteúdo real do Android Chrome (incluindo inspeção etc.) para a tela do PC ...

• Ative a depuração USB no dispositivo, talvez você também precise se conectar uma vez via adb devices para ativar a caixa de diálogo "permitir comunicação com ..." no dispositivo móvel,
• conecte o dispositivo Android ao PC,
• inicie o Chrome nos dois e
• depois navegue para chrome://inspect/#devicesno PC.
• Aqui, as guias do celular Chrome são listadas e podem ser inspecionadas.

Há também um manual detalhado na rede: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(descobriu que depois adb logcatnão mostrou nada do navegador)

Minha solução é (para o navegador de ações):

• Navegador de ações
• "consolo.log" no código-fonte JS
• Depurar USB ativado
• Android SDK
• No Android SDK: monitor.bat
• Monitorar o filtro como a imagem anexada

O Android studio fornece tudo o que você precisa para ver console.log e outros. No logcat, basta filtrar para "/ Web Console" e você verá seus logs js ...

Se você tiver algum problema, pode adicionar este plugin: https://github.com/apache/cordova-plugin-console

Se você estiver procurando por opções não remotas:

Nas versões anteriores e sem raiz do Jellybean, um visualizador de logcat pode ser usado se android.permission.READL_LOGS for concedido via adb uma vez.

No firefox, há um complemento do console que lê e mostra todos os logs de aplicativos e também há uma versão do firebug .

Você pode tentar "javascript-compiler-deva" da biblioteca npm executando o comando "npm install javascript-compiler-deva" e, em seguida, executando o compiler.is usando "node compiler.js".

Ele cria um servidor na porta 8888. Você pode clicar em " http: // localhost: 8888 " e digitar seu código JavaScript e pode ver o resultado de qualquer código JavaScript incluindo "console.log" no próprio navegador do telefone.

Também está hospedado em " https://javascript-compiler-deva.herokuapp.com/ "

As opções locais de depuração / about: config ... parecem não funcionar mais nos navegadores 2020 / chrome / ff / ...

Outro navegador com console js não remoto é o DevBrowser

ou WebInspector (o seletor de arquivos não está funcionando)