Comment déboguer javascript sur Android?


281

Je travaille sur un projet impliquant Raphaeljs. Il s'avère que cela ne fonctionne pas sur Android. C'est le cas sur l'iPhone.

Comment diable pour déboguer quelque chose sur le navigateur Android? C'est WebKit, donc si je connais la version, le débogage sur cette version complète de WebKit produira-t-il les mêmes résultats?


2
Hors sujet, mais pensez à vérifier Snap.svg. C'est le remake de RaphaelJS de la même personne. Il est recréé sans le support des anciens navigateurs, il est donc plus rapide, le code est plus propre, etc.
Lajos Meszaros

Remarque pour la réponse acceptée: dans Samsung Experience> = 9, si vous n'avez pas trouvé votre appareil, basculez le type USB sur le connecteur audio.
BOZ

Réponses:


245

Mise à jour: débogage à distance

Auparavant, la journalisation de la console était la meilleure option pour déboguer JavaScript sur Android. De nos jours, avec le débogage à distance de Chrome pour Android, nous sommes en mesure de tirer parti de toutes les qualités des outils de développement Chrome for Desktop sur Android. Consultez https://developers.google.com/chrome-developer-tools/docs/remote-debugging pour plus d'informations.


Mise à jour: console JavaScript

Vous pouvez également accéder à about: debug dans la barre d'URL pour activer le menu de débogage et la console d'erreur JavaScript avec les appareils Android récents. Vous devriez voir SHOW JAVASCRIPT CONSOLE en haut du navigateur.

Actuellement dans Android 4.0.3 (Ice Cream Sandwich), le logcat sort sur le canal du navigateur. Vous pouvez donc filtrer en utilisant adb logcat browser:* *:S.


Réponse originale

Vous pouvez utiliser l' consoleobjet JavaScript intégré pour imprimer des messages de journal avec lesquels vous pouvez consulter adb logcat.

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

Produit cette sortie:

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://...

Déterminer la version de WebKit

Si vous tapez javascript:alert(navigator.userAgent)dans la barre d'emplacement, vous verrez la version WebKit répertoriée, par exemple

Dans 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

Sur 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

Les versions de WebKit qui ne font pas partie d'une version de Safari ont un + après le numéro de version, et leur numéro de version est généralement supérieur à la dernière version publiée de WebKit. Ainsi, par exemple, 528+ est une version non officielle de WebKit qui est plus récente que la version 525.x fournie avec Safari 3.1.2.


12
quand oh quand pourrai-je déboguer localement sur Android lorsque je ne pourrai pas le faire à distance?
Michael

Pas certain. Cela n'aurait pas beaucoup de sens sur un petit appareil comme un téléphone, car l'espace de l'écran serait si limité pour un inspecteur Web complet. Sur les tablettes, cela pourrait avoir plus de sens, mais ils devraient repenser l'inspecteur Web pour une interface tactile, ce qui représente un effort considérable. Peut-être qu'ils y travaillent mais qui sait.
Pierre-Antoine LaFayette

1
Je soupçonne qu'une première coupe sans adaptations significatives serait un bon début, c'est-à-dire permettre une quantité importante de fonctionnalités à utiliser. Certaines tablettes ont même un stylet pour que les événements de souris fonctionnent de la même manière.
Michael

Qu'est-ce que c'était qu'un petit appareil comme un téléphone!?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…
Michael Dillon

Remarque à partir du lien de débogage à distance de Chrome pour Android: "Vous devez être connecté à Chrome avec l'un de vos comptes Google. Le débogage à distance ne fonctionne pas en mode navigation privée ou en mode invité." Wow pourquoi?
sdbbs

135

Essayer:

  1. ouvrez la page que vous souhaitez déboguer
  2. sur cette page, dans la barre d'adresse d'un navigateur Android standard, tapez:

    about:debug 

    (Notez que rien ne se passe, mais de nouvelles options ont été activées.)

Fonctionne sur les appareils que j'ai essayés. En savoir plus sur le navigateur Android à propos de: débogage, que font ces paramètres?

Edit: Ce qui aide également à récupérer plus d'informations comme le numéro de ligne, c'est d'ajouter ce code à votre script:

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

23
Je viens d'essayer, mais l'astuce about: debug n'a pas fonctionné sur mon Nexus S avec ICS 4.0.3.
derflocki

6
Vous devez essayer de naviguer about:debugdans le même onglet que celui où vous avez ouvert votre page actuelle. Au lieu de naviguer, il affichera "SHOW JAVASCRIPT CONSOLE" en haut. Si vous essayez d'accéder à about:debugpartir d'un nouvel onglet, cela ne fonctionnera pas.
Denilson Sá Maia

10
Ceci est le navigateur de stock uniquement, non? Je l'essaye dans une version bêta de Chrome pour Android sur KitKat sans aucune chance. (semble KitKat n'a plus le navigateur de stock)
James

7
Cela nécessite un navigateur de stock Android, et cela ne fonctionne pas sur Chrome :)
giorgio79

6
Le navigateur de stock Kitkat, si votre fabricant l'utilise, est Chrome. about:debugvraiment vers l'avant chrome://debugqui dit "introuvable" mais affiche une Debugoption dans les paramètres. Certaines options n'entrent en vigueur qu'après l'ouverture d'un nouvel onglet.
cde


21

J'utilise Weinre , qui fait partie d' Apache Cordova .

Avec Weinre, j'obtiens la console de débogage de Google Chrome dans mon navigateur de bureau, et je peux connecter Android à cette console de débogage, et déboguer HTML et CSS. Je peux exécuter des commandes Javascript dans la console, et elles affectent la page Web dans le navigateur Android. Les messages de journal d'Android apparaissent dans la console de débogage du bureau.

Cependant, je pense qu'il n'est pas possible de visualiser ou de parcourir le code Javascript réel. Je combine donc Weinre avec des messages de journal.

(Je ne sais pas grand chose sur JConsole mais il me semble que l'inspection HTML et CSS n'est pas possible avec JConsole, seulement les commandes Javascript et la journalisation (?).)


Ajout d'un guide étape par étape pour weinr sur OS X à stackoverflow.com/questions/13330221/…
leymannx

J'ai déjà essayé Weinre et je n'étais pas très satisfait de l'outil. Le journal n'est pas vraiment fiable. Certaines erreurs ne sont pas affichées. Même s'ils sont affichés, Weinre n'affiche que le message d'erreur, sans la trace de la pile. Cela m'a complètement énervé.
Lewis

J'ai déjà essayé Weinre et je n'étais pas très satisfait de l'outil. Le journal n'est pas vraiment fiable. Certaines erreurs ne sont pas affichées. Même s'ils sont affichés, Weinre n'affiche que le message d'erreur, sans la trace de la pile. Cela m'a complètement énervé.
Lewis

17

Jetez un oeil à jsHybugger . Il vous permettra de déboguer à distance votre code js pour:

  • Applications hybrides Android (Webview, PhoneGap, Worklight)
  • Pages Web qui s'exécutent dans le navigateur Android par défaut (pas Chrome, il prend en charge l'extension ADB sans cet outil)

Comment cela fonctionne (plus de détails et d'alternatives sur le site des projets, c'est ce que j'ai trouvé le meilleur moyen).

  1. Installez le jsHybugger APK sur votre appareil
  2. Activez le débogage USB sur votre appareil.
  3. Branchez l'appareil Android sur votre ordinateur de bureau via USB
  4. Exécutez l'application sur l'appareil Android ('jsHybugger')
  5. Saisissez l'URL et la page cibles dans l'application. Appuyez sur Démarrer le service et enfin ouvrez le navigateur
    • Une liste des navigateurs installés vous sera présentée, choisissez-en un.
    • Le navigateur se lance.
  6. De retour sur votre ordinateur de bureau, ouvrez Chrome to chrome: // inspect /
  7. Une fenêtre d'inspecteurs apparaîtra avec les outils de débogage de chrome liés à la page sur l'appareil Android.
  8. déboguer!

Encore une fois, avec Chrome sur Android, utilisez l'extension ADB sans jsHybugger. Je pense que cela a déjà été décrit dans la réponse acceptée à cette question.


Pourquoi cela a-t-il été rejeté? C'est l'un des seuls outils qui prend en charge le débogage à distance des vues Web à l'intérieur des applications natives.
Alfie Hanssen

Parce qu'il ne dit pas comment le faire, sauf qu'il vous pointe vers un lien de projet entier, vous devez donc le creuser vous-même beaucoup avant de réussir
Adaptabi

2
Cet outil est en fait assez bon et a résolu mon problème. Dommage que je doive fouiller pour googler au lieu de voir cette réponse car quelqu'un a décidé de l'enterrer. (Je me suis retrouvé ici en premier) Je vais ajouter quelques détails pour améliorer cette réponse, voir comment tout cela fonctionne SO?
Aardvark

jsHybugger APK n'est plus disponible sur Google Play ni en téléchargement. Le projet est stocké ici: github.com/dcendents/jsHybugger ; mais semble ne pas inclure le code pour générer l'APK.
Adrian Herscu

14

Pour info, la raison pour laquelle RaphaelJS ne fonctionne pas sur Android est que le webkit Android (contrairement au webkit iPhone) ne prend pas en charge SVG pour le moment. Google n'est arrivé que récemment à la conclusion que le support SVG d'un Android est une bonne idée, il ne sera donc pas encore disponible avant un certain temps.


Merci Ludvig, j'ai compris cela peu de temps après le message d'origine, mais bon suivi.
jvenema

Ce n'est pas une réponse à la question principale, veuillez en faire un commentaire (ou une question distincte) et supprimez-le.
PJ Brunet

12

Débogage à distance complet de Chrome du navigateur natif Android sur un Galaxy S6 sur Android 5.1.1:

  1. Activer le débogage USB sur le téléphone (Paramètres, à propos, appuyez rapidement sur le numéro de build, paramètres du développeur, débogage USB)
  2. Ouvrez "Internet"
  3. Accédez à 'about: debug' (vous verrez une erreur)
  4. Menu PLUS> Paramètres> Débogage> Débogage à distance
  5. Connectez le téléphone à l'ordinateur avec un câble USB
  6. Sur le téléphone, dans le navigateur Web Internet, ouvrez le site que vous souhaitez déboguer
  7. Ouvrez Chrome sur l'ordinateur
  8. Accédez à «chrome: // inspecter»
  9. Cliquez sur inspecter dans l'onglet du navigateur que vous souhaitez inspecter

Les appareils Galaxy S5 s'affichent dans Chrome, mais les onglets s'affichent uniquement après le redémarrage. Après le redémarrage et la tentative de connexion, le navigateur mobile se bloque.


5

Raphael n'est pas pris en charge sur les navigateurs Android antérieurs à la version 3.0, c'est votre problème. Ils ne prennent pas en charge les graphiques SVG. Il prend cependant en charge le canevas. Si vous n'avez pas besoin de l'animer, vous pouvez rendre les graphiques avec canvg:

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

C'est ainsi que nous avons résolu ce problème pour le rendu des icônes SVG dans le navigateur Android par défaut.


5

Le about:debug(ouchrome:\\debug deux disent que la page est introuvable, mais activez le menu Déboguer dans les paramètres) lorsque vous essayez sur Chrome ou Opera sur Android KitKat 4.4.2 sur un onglet Samsung

Si vous avez des autorisations ROOT sur votre appareil, vous pouvez afficher les messages de la console directement sur l'appareil. Utilisez une application comme CatLog pour afficher la sortie du journal - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en Cela vous permettra de visualiser toutes les activités de logcat.

Dans Android KitKat / 4.4.2, la console du navigateur est sortie sur le canal Chromium. Vous pouvez filtrer par "Chromium" pour obtenir toutes les activités du navigateur (y compris l'activité interne du navigateur), ou simplement filtrer par "Console" pour ne voir que le journal de la console du navigateur.

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

5

Mettre en ligne d'adresse chrome://about. Vous verrez des liens vers toutes les pages de développement possibles.


6
Oui, mais il n'y a rien pour la console
Nico

3

Vous pouvez essayer YConsole une console intégrée js. Il est léger et simple à utiliser.

  • Capturez les journaux et les erreurs.
  • Éditeur d'objets.

Comment utiliser :

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

C'est idéal pour déboguer le javascript sur les appareils mobiles. Merci
ako

3

Lorsque vous exécutez l'émulateur Android, ouvrez votre navigateur Google Chrome et dans le «champ d'adresse», entrez:

chrome://inspect/#devices

Vous verrez une liste de vos cibles distantes. Trouvez votre cible et cliquez sur le lien «inspecter».


Je ne sais pas pourquoi cette réponse n'a pas obtenu plus de reconnaissance. C'était incroyablement simple et cela fonctionne pour l'émulateur et le périphérique physique
Frank

3

Chrome a une fonctionnalité merveilleuse qui prend simplement le contenu réel d'Android Chrome (y compris l'inspection, etc.) sur l'écran du PC ...

  • Activez le débogage USB sur l'appareil, vous devrez peut-être également vous connecter une fois via adb devices pour déclencher le dialogue "autoriser la communication avec ..." sur l'appareil mobile,
  • connectez l'appareil Android au PC,
  • démarrer Chrome sur les deux, et
  • puis accédez à chrome://inspect/#devicessur le PC.
  • Ici, les onglets du téléphone mobile Chrome sont répertoriés et peuvent être inspectés.

Il y a aussi un manuel détaillé sur le net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(a constaté qu'après adb logcatn'a rien montré du navigateur)


1

Ma solution est (pour le navigateur de stock):

  • Navigateur de stock
  • "consolo.log" dans le code source JS
  • Débogage USB activé
  • SDK Android
  • Depuis le SDK Android: monitor.bat
  • Filtre du moniteur comme image jointeentrez la description de l'image ici


0

Si vous recherchez des options non distantes:

Sur les versions antérieures et non enracinées de Jellybean, une visionneuse logcat peut être utilisée si android.permission.READL_LOGS est accordé via adb une fois.

Sur firefox, il y a un addon de console qui lit et affiche tous les journaux d'application et il y a aussi firebug lite .


0

Vous pouvez essayer «javascript-compiler-deva» à partir de la bibliothèque npm en exécutant la commande «npm install javascript-compiler-deva» puis en exécutant compiler.is à l'aide de «node compiler.js».

Il crée un serveur au port 8888. Vous pouvez ensuite appuyer sur " http: // localhost: 8888 " et saisir votre code JavaScript et voir le résultat de tout code JavaScript, y compris "console.log" dans le navigateur du téléphone lui-même.

Il est également hébergé dans " https://javascript-compiler-deva.herokuapp.com/ "


0

Les options de débogage local / about: config ... ne semblent plus fonctionner dans les navigateurs 2020+ chrome / ff / ...

Un autre navigateur avec une console js non distante est DevBrowser

ou WebInspector (le sélecteur de fichiers ne fonctionne pas)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.