É possível abrir o console das ferramentas do desenvolvedor no Chrome no telefone Android?

165

Um aplicativo AngularJS funciona bem na área de trabalho, mas não é renderizado corretamente no celular (o código real está sendo exibido). Este é um telefone Android.

Gostaria de ver quais erros estão aparecendo no console.

É possível abrir o console JS no aplicativo chrome no celular (como no computador)?

google-chrome-devtools mobile-chrome tim_xyz
fonte

Respostas:

134

Você pode fazer isso usando a depuração remota, aqui está a documentação oficial . Processo básico:

  1. Conecte seu dispositivo Android
  2. Selecione seu dispositivo: Mais ferramentas> Inspecionar dispositivos *das ferramentas de desenvolvimento no pc / mac.
  3. Autorize no seu celular.
  4. Depuração feliz !!

* Agora são "dispositivos remotos".

PseudoAj
fonte
2
Eu acho que uma explicação detalhada é fornecida no link da documentação
PseudoAj 3/17/17
59
Isso é possível sem um computador externo?
Eric Reed
59
A pergunta pede um console de ferramentas de desenvolvedor aberto no Chrome no telefone Android? sua soultion requer uma máquina de depuração separada. Na sua resposta de depuração não é no próprio telefone
Fennekin
5
Não tenho outra maneira de conhecer @fennekin. Sinta-se livre para atualização se você acha que há melhor maneira,
PseudoAj
5
A partir de janeiro de 2019, não consegui encontrar os dispositivos Inspecionar em Mais ferramentas, finalmente encontrei-o no chrome: // inspecionar e você precisa permitir a depuração USB do seu telefone
Abhinav Singh
53

Quando você não tem um PC em mãos, você pode usar o Eruda, que é devtools para navegadores móveis https://github.com/liriliri/eruda.
Ele é fornecido como javascript incorporável e também como um bookmarklet (colar o bookmarklet no chrome remove o javascript: prefix, então você deve digitá-lo você mesmo)

trogper
fonte
1
Muito bom companheiro para ferramentas como Termux, que tornam real o desenvolvimento em dispositivos móveis solitários! Eu já integrados eruda-webpack-pluginem um único projeto: npm i eruba-webpack-plugin --save-optional.
vintproykt 3/08/19
Maneira mais fácil de obter o que está na consola
makwana.a
Solução impressionante. Está disponível em uma CDN.
Netishix 27/09/19
Isso não parece funcionar para mim. Colá-lo na barra de endereço (e depois ler 'javascript:') parece não fazer nada.
BT
@BT Alguns sites restringem-se a carregar scripts de domínios permitidos listados. Experimente em outro site.
trogper
10

Como você deseja apenas ver o que foi impresso no console, basta adicionar a parte "impressa" em algum lugar do seu HTML para que apareça na página da web. Você pode fazer isso por si mesmo, mas há um arquivo javascript que faz isso por você. Você pode ler sobre isso aqui:

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

O código está disponível no Github ; você pode baixá-lo e colá-lo em um arquivo javascipt e adicioná-lo ao seu HTML

John Balvin Arias
fonte
FYI: Você pode encontrar uma situação em que o console NÃO apareça. Com base em algumas conversas no final de sua página inicial oficial , você pode tentar explicitamente mobileConsole.init(). Esse truque ajuda no meu caso. YMMV.
precisa saber é
1
esse link ainda funciona, leva muito tempo para carregar. No entanto, posso resumir que essas conversas entre mim e o proprietário da biblioteca acabaram adicionando as seguintes informações na seção Notas em sua página principal: "Se mobileConsole não iniciar (a detecção móvel falhar), você poderá substituir a inicialização automática definindo substituaAutorun para true ou adicione o seguinte script à sua página: if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
RayLuo 25/06/19
7

Faça um favor a si mesmo e apenas aperte o botão fácil:

Baixar Web Inspector (Código Aberto) na loja Play.

A CAVEAT: ATTOW, a saída do console não aceita parâmetros de descanso! Ou seja, se você tem algo parecido com isto:

console.log('one', 'two', 'three');

você só verá

1

conectado ao console. Você precisará agrupar manualmente os parâmetros em uma matriz e ingressar, assim:

console.log([ 'one', 'two', 'three' ].join(' '));

para ver a saída esperada.

Mas o aplicativo é de código aberto ! Um patch pode ser iminente ! O patcher pode até ser você!

Sensei James
fonte
3

O Kiwi Browser é um Chromium móvel e permite a instalação de extensões . Instale o Kiwi e instale a extensão do Chrome "Mini JS console" (basta pesquisar no Google e instalar no site de extensões do Chrome, o uBlock também funciona;). Ele ficará disponível no menu Kiwi na parte inferior e mostrará a saída do console para a página atual.

Pawel
fonte
-1

Provavelmente você pode experimentar o Gear Browser, ele pode inspecionar elementos e depurar o site apenas no celular.

https://gear4.app

Angolao
fonte
5
O aplicativo é apenas para iPhones. A pergunta especificou Android.
Pete