Est-il possible d'ouvrir la console des outils de développement dans Chrome sur un téléphone Android?

165

Une application AngularJS fonctionne correctement sur le bureau, mais ne s'affiche pas correctement sur le mobile (le code réel est affiché). Ceci est sur un téléphone Android.

Je voudrais voir quelles erreurs apparaissent dans la console.

Est-il possible d'ouvrir la console JS sur l'application Chrome sur mobile (comme sur le bureau)?

google-chrome-devtools mobile-chrome tim_xyz
la source

Réponses:

134

Vous pouvez le faire en utilisant le débogage à distance, voici la documentation officielle . Processus de base:

  1. Connectez votre appareil Android
  2. Sélectionnez votre appareil: Plus d'outils> Inspectez les appareils à *partir des outils de développement sur PC / Mac.
  3. Autorisez sur votre mobile.
  4. Bon débogage !!

* C'est maintenant "Appareils distants".

PseudoAj
la source
2
Je pense que des explications détaillées sont fournies dans le lien de documentation
PseudoAj
59
Est-ce possible de le faire sans ordinateur externe?
Eric Reed
59
La question demande l' ouverture de la console des outils de développement dans Chrome sur un téléphone Android? votre soultion nécessite une machine de débogage séparée. Dans votre réponse, le débogage n'est pas sur le téléphone lui
Fennekin
5
Il n'y a pas d'autre moyen que je connaisse @fennekin. N'hésitez pas à mettre à jour si vous pensez qu'il existe un meilleur moyen,
PseudoAj
5
En janvier 2019, je n'ai pas pu trouver les appareils Inspect sous Plus d'outils, je l'ai finalement trouvé sur chrome: // inspect, et vous devez autoriser le débogage USB depuis votre téléphone
Abhinav Singh
53

Lorsque vous n'avez pas de PC sous la main, vous pouvez utiliser Eruda, qui est devtools pour les navigateurs mobiles https://github.com/liriliri/eruda
Il est fourni sous forme de javascript intégrable et également d'un bookmarklet (coller un bookmarklet dans chrome supprime le javascript: préfixe, vous devez donc le saisir vous-même)

trogper
la source
1
Très bon compagnon d'outils comme Termux qui rendent réel le développement sur des appareils mobiles isolés! Je l' ai déjà intégrés eruda-webpack-plugindans un seul projet: npm i eruba-webpack-plugin --save-optional.
vintproykt
Le moyen le plus simple d'obtenir ce qui est dans la console
makwana.a
Solution géniale. Il est disponible sur CDN.
netishix
Cela ne semble pas fonctionner pour moi. Le coller dans la barre d'adresse (puis lire 'javascript:') ne semble rien faire.
BT
@BT certains sites Web se limitent au chargement de scripts à partir de domaines autorisés répertoriés. Essayez-le sur un autre site Web.
trogper
10

Si vous voulez seulement voir ce qui a été imprimé dans la console, vous pouvez simplement ajouter la partie "imprimée" quelque part dans votre HTML pour qu'elle apparaisse sur la page Web. Vous pouvez le faire vous-même, mais il existe un fichier javascript qui le fait pour vous. Vous pouvez lire à ce sujet ici:

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

Le code est disponible sur Github ; vous pouvez le télécharger et le coller dans un fichier javascipt et l'ajouter à votre HTML

John Balvin Arias
la source
FYI: Vous pourriez rencontrer une situation où la console n'apparaîtrait PAS. Sur la base d'une conversation à la fin de sa page d'accueil officielle , vous pouvez essayer de l'expliquer explicitement mobileConsole.init(). Cette astuce aide dans mon cas. YMMV.
RayLuo
1
ce lien fonctionne toujours, le chargement prend juste beaucoup de temps. Néanmoins, je peux résumer que ces conversations entre moi et ce propriétaire de la bibliothèque ont abouti à l'ajout des informations suivantes dans la section Notes de sa page principale: "Si mobileConsole ne démarre pas (la détection mobile échoue), vous pouvez soit annuler le démarrage automatique en définissant overrideAutorun sur true ou ajoutez le script suivant à votre page: if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
RayLuo
7

S'il vous plaît faites-vous une faveur et appuyez simplement sur le bouton facile:

téléchargez Web Inspector (Open Source) depuis le Play Store.

A CAVEAT: ATTOW, la sortie de la console n'accepte pas les paramètres de repos! C'est à dire si vous avez quelque chose comme ça:

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

tu ne verras que

une

connecté à la console. Vous devrez envelopper manuellement les paramètres dans un tableau et les joindre, comme ceci:

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

pour voir la sortie attendue.

Mais l'application est open source ! Un patch est peut-être imminent ! Le patcher pourrait même être vous!

Sensei James
la source
3

Le navigateur Kiwi est Chromium mobile et permet d'installer des extensions . Installez Kiwi puis installez l'extension Chrome "Mini JS console" (il suffit de rechercher dans Google et d'installer à partir du site Web des extensions Chrome, uBlock fonctionne également;). Il deviendra disponible dans le menu Kiwi en bas et affichera la sortie de la console pour la page actuelle.

Pawel
la source
-1

Vous pouvez probablement essayer le navigateur Gear, il peut inspecter les éléments et déboguer le site Web uniquement sur mobile.

https://gear4.app

Angolao
la source
5
L'application est uniquement pour les iPhones. La question spécifiait Android.
Pete le