web-dev-qa-db-fra.com

Comment puis-je déboguer javascript sur Android?

Je travaille sur un projet qui implique Raphaeljs. Il s'avère que cela ne fonctionne pas sur Android. C'est fait sur l'iPhone.

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

androiddebuggingwebkit
247
jvenema

Update: Débogage à distance

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

Mise à jour: console JavaScript

Vous pouvez également naviguer vers 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 (Sandwich à la crème glacée), le logcat est envoyé au canal du navigateur. Donc, vous pouvez filtrer en utilisant adb logcat browser:* *:S.

Réponse originale

Vous pouvez utiliser l'objet JavaScript console intégré pour imprimer les messages de journal que vous pouvez consulter avec 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étermination de la version de WebKit

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

Sous 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 l'émulateur Android 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

N.B.

Les versions de WebKit ne faisant 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 à celui de la dernière version publiée de WebKit. Ainsi, par exemple, 528+ est une version non officielle de WebKit, plus récente que la version 525.x fournie avec Safari 3.1.2.

224
Pierre-Antoine LaFayette

Essayer: 

  1. ouvrez la page que vous voulez déboguer

  2. alors que 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, à quoi servent ces paramètres?

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

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

Le http://jsconsole.com (/ http://jsconsole.com/remote-debugging.html ) offre un moyen agréable d'utiliser le contenu de votre page Web.

52
tortexy

J'utilise Weinre , une partie de Apache Cordova .

Avec Weinre, je reçois la console de débogage de Google Chrome dans le navigateur de mon ordinateur de bureau, 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, qui ont une incidence sur la page Web du 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 d'afficher ou de parcourir le code Javascript réel. Donc, je combine Weinre avec des messages de journal.

(Je ne sais pas grand chose à propos de JConsole mais il me semble que l'inspection HTML et CSS n'est pas possible avec JConsole, uniquement des commandes Javascript et la journalisation (?).)

21
KajMagnus

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

  • Applications hybrides Android (WebView, Phonegap, Worklight)
  • Pages Web exécutées 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é être la meilleure solution). 

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

Encore une fois, avec Chrome sous 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.

18
cyberflohr

Pour info, la raison pour laquelle RaphaelJS ne fonctionne pas sur Android est qu’Android Webkit (contrairement à iPhone Webkit) ne prend pas en charge le format SVG pour le moment. Ce n'est que récemment que Google est parvenu à la conclusion que la prise en charge SVG par Android était une bonne idée et qu'elle ne serait donc pas disponible avant un certain temps.

13
Ludvig Svenonius

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

  1. Activer le débogage USB sur le téléphone (paramètres, à propos de, numéro de version rapidement appuyé, paramètres de développeur, débogage USB)
  2. Ouvrir "Internet"
  3. Accédez à 'about: debug' (vous verrez une erreur)
  4. Menu MORE> Paramètres> Debug> Débogage à distance
  5. Connecter 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. Naviguez jusqu'à 'chrome: // inspect'
  9. Cliquez sur inspecter dans l'onglet du navigateur que vous souhaitez inspecter.

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

12
Charlie

Raphael n’est pas pris en charge sur les navigateurs Android antérieurs à la version 3.0, c’est votre problème. Ils ne supportent pas les graphiques SVG. Il a cependant un support pour la toile. 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 en rendant les icônes SVG dans le navigateur Android par défaut.

5
user3905

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

Si vous disposez d'autorisations ROOT sur votre appareil, vous pouvez afficher les messages de la console directement sur l'appareil. Utilisez une application telle que CatLog pour afficher la sortie du journal - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=fr Ceci vous permettra d'afficher toute l'activité de logcat.

Dans Android KitKat/4.4.2, la console du navigateur est émise vers le canal Chromium. Vous pouvez filtrer par "Chrome" pour obtenir toutes les activités du navigateur (y compris l'activité interne du navigateur) ou simplement par "Console" pour afficher uniquement 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)
4
user3663132

Mettez dans la ligne d'adresse chrome://about. Vous verrez des liens vers toutes les pages de dev possibles.

4
honzajde

Ma solution est (pour le navigateur stock):

  • Navigateur d'actions
  • "consolo.log" dans le code source de JS
  • Debug USB activé
  • SDK Android
  • À partir du SDK Android: monitor.bat
  • Filtre de surveillance en tant qu'image attachéeenter image description here
1
Antonio Petricca

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

  • Journaux de capture et erreurs.
  • Éditeur d'objet.

Comment utiliser :

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

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

1
Gregory R.

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 sur le port 8888. Vous pouvez ensuite cliquer sur " http: // localhost: 8888 " pour entrer votre code JavaScript et voir le résultat de tout code JavaScript, y compris "console.log" dans le navigateur même du téléphone.

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

0
Devashish Priyadarshi

Si vous recherchez des options non distantes:

Sur les versions précédentes et non rootées de Jellybean, un visualiseur logcat peut être utilisé si Android.permission.READL_LOGS est accordé via adb une fois.

Sur firefox, il existe un module console qui lit et affiche tous les journaux des applications, ainsi que firebug lite .

0
Christian Læirbag

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

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

0
Reign.85

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

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

Un manuel détaillé est également disponible sur le net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-Android-und-chrome

(constaté qu'après adb logcat, rien dans le navigateur)

0
BurninLeo