Como depurar javascript no Android?

281

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?

jvenema
fonte
2
Fora do tópico, mas considere verificar o Snap.svg. É o remake de RaphaelJS da mesma pessoa. Ele é recriada sem o apoio de navegadores antigos, por isso é mais rápido, o código é mais limpo, etc.
Lajos Meszaros
Nota para a resposta aceita: No Samsung Experience> = 9, se você não encontrou o dispositivo, mude o tipo USB para o conector de som.
BOZ

Respostas:

245

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.

Pierre-Antoine LaFayette
fonte
12
quando oh quando poderei depurar localmente no Android em momentos em que não posso fazer isso remotamente?
18713 Michael
Não tenho certeza. Não faria muito sentido em um dispositivo pequeno como um telefone, porque o espaço da tela seria muito limitado para um Inspetor da Web completo. Em tablets, pode fazer mais sentido, mas eles teriam que reimaginar o Web Inspector para obter uma interface de toque, o que é um esforço significativo. Talvez eles estejam trabalhando nisso, mas quem sabe.
Pierre-Antoine LaFayette
1
Suspeito que um primeiro corte sem adaptações significativas seja um bom começo, ou seja, permita que uma quantidade significativa de funcionalidade seja usada. Alguns tablets têm até uma caneta para que os eventos do mouse funcionem da mesma maneira.
18713 Michael
O que foi aquilo em um pequeno dispositivo como um telefone!?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/...
Michael Dillon
Nota no link de depuração remota do Chrome para Android: "Você deve fazer login no Chrome com uma de suas contas do Google. A depuração remota não funciona no modo de navegação anônima ou no modo de convidado". Uau, por que?
Sdbbs
135

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;
}
Mads Mobæk
fonte
23
Acabei de tentar, mas o truque about: debug não funcionou no meu Nexus S com o ICS 4.0.3.
Derflocki
6
Você deve tentar navegar para about:debugdentro da mesma guia em que sua página atual está aberta. Em vez de navegar, ele exibirá "SHOW JAVASCRIPT CONSOLE" na parte superior. Se você tentar acessar a about:debugpartir de uma nova guia, ela não funcionará.
Denilson Sá Maia
10
Este é apenas o navegador de ações, certo? Estou tentando isso no Chrome para Android beta no KitKat sem sorte. (parece KitKat já não tem o navegador de ações)
James
7
Esta precisa de um navegador estoque Android, e ele não funciona no Chrome :)
giorgio79
6
O navegador de ações da Kitkat, se o fabricante o usar, é o Chromium. about:debugrealmente encaminha para o chrome://debugque diz "não pode ser encontrado", mas mostra uma Debugopção nas configurações. Algumas das opções não entram em efeito até que uma nova guia seja aberta posteriormente.
Cde
21

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

KajMagnus
fonte
Adicionado um guia passo a passo para o weinr no OS X em stackoverflow.com/questions/13330221/…
leymannx
Já experimentei o Weinre e não estava muito satisfeito com a ferramenta. O log não é realmente confiável. Alguns erros não são mostrados. Mesmo que sejam mostrados, o Weinre exibe apenas a mensagem de erro, sem o rastreamento da pilha. Isso me irritou completamente.
Lewis
Já experimentei o Weinre e não estava muito satisfeito com a ferramenta. O log não é realmente confiável. Alguns erros não são mostrados. Mesmo que sejam mostrados, o Weinre exibe apenas a mensagem de erro, sem o rastreamento da pilha. Isso me irritou completamente.
Lewis
17

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.

cyberflohr
fonte
Por que isso foi prejudicado? É uma das únicas ferramentas que oferece suporte à depuração remota de webViews dentro de aplicativos nativos.
Alfie Hanssen
Porque ele não diz como fazê-lo, a não ser que aponta para um link de todo o projeto, então você tem que cavar it yourself muito antes de realmente ter sucesso
Adaptabi
2
Essa ferramenta é realmente muito boa e resolveu meu problema. Pena que eu tive que procurar no Google por isso, em vez de ver essa resposta, já que alguém decidiu enterrá-la. (Acabei aqui primeiro) vou adicionar alguns detalhes para melhorar a resposta, ver como tudo isso funciona?
Aardvark
O jsHybugger APK não está mais disponível no Google Play nem para download. O projeto está armazenado aqui: github.com/dcendents/jsHybugger ; mas parece não incluir o código para gerar o APK.
Adrian Herscu
14

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.

Ludvig Svenonius
fonte
Obrigado Ludvig, percebi isso logo após o post original, mas com um bom acompanhamento.
Jvenema
Esta não é uma resposta para a pergunta principal. Faça disso um comentário (ou uma pergunta separada) e exclua-o.
PJ Brunet
12

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.

Charlie
fonte
5

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.

user3905
fonte
5

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)
user3663132
fonte
5

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

honzajde
fonte
6
Sim, mas não há nada para o console
Nico
3

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>
yorg
fonte
Isso é ótimo para depurar javascript em dispositivos móveis. Obrigado
ako
3

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

Gregory R.
fonte
Não sei por que essa resposta não recebeu mais reconhecimento. Foi incrivelmente simples e funciona para emulador e dispositivo físico
Frank
3

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)

BurninLeo
fonte
1

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 anexadainsira a descrição da imagem aqui
Antonio Petricca
fonte
0

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

Reinado.85
fonte
0

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 .

Christian Læirbag
fonte
0

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/ "

Devashish Priyadarshi
fonte
0

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)

allofmex
fonte