Comment déboguer javascript sur Android?

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?

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.

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;
}

Le http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) fournit une manière agréable que vous pouvez utiliser pour accéder au contenu de votre page Web.

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

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.

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.

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.

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.

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)

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

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>

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

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)

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 jointe

Le studio Android fournit tout ce dont vous avez besoin pour voir console.log et autres. Dans logcat il suffit de filtrer sur "/ Console Web" et vous verrez vos journaux js ...

Si vous rencontrez un problème, vous pouvez ajouter ce plugin: https://github.com/apache/cordova-plugin-console

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 .

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

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)