web-dev-qa-db-fra.com

Existe-t-il une sorte de débogage Firebug ou JavaScript pour Android?

Je développe un site web pour mobile. Cela fonctionne sur le bureau de Firefox. Cela fonctionne sur iPhone, mais lorsque j'appuie sur un bouton sur Android 2.x (et peut-être moins)), mon code JavaScript se bloque ou quoi encore ...

Puis-je accéder à l'enregistreur ou à la console JavaScript pour ces appareils?

Le mieux devrait être une sorte d'application Firebug.

javascriptandroidhtml5mobileandroid-browser
67
Christophe Debove

Une option est weinre . Il fournit l'édition DOM & Style avec la console. Si vous ne souhaitez pas le configurer vous-même, il existe une instance hébergée à l'adresse http://debug.phonegap.com

L'autre option est JSHybugger . C'est certainement l'environnement de débogage le plus complet disponible pour le Android). C'est un produit payant, mais qui en vaut probablement la peine.

45
Paul Beusterien

Chrome dispose d'une fonctionnalité très agréable appelée "débogage Web USB" qui permet de voir la console de débogage du périphérique mobile sur votre PC lorsqu'elle est connectée via USB.

Voir ici pour plus de détails.

EDIT: Il semble que la BAD ne soit pas prise en charge sur Windows 8, mais ce lien semble offrir une solution:

http://mikemurko.com/general/chrome-remote-debugging-nexus-7-on-windows-8/

34
seeg

Vous pouvez taper about:debug dans certains navigateurs mobiles pour afficher une console JavaScript.

12
NSjonas

J'imprime parfois des sorties de débogage dans la fenêtre du navigateur. En utilisant jQuery , vous pouvez envoyer des messages de sortie à une zone d’affichage de votre page:

<div id='display'></div>

$('#display').text('array length: ' + myArray.length);

Ou si vous souhaitez visionner des variables JavaScript sans ajouter de zone d'affichage à votre page:

function debug(txt) {
    $('body').append("<div style='width:300px;background:orange;padding:3px;font-size:13px'>" + txt + "</div>");
}
7
mbokil

J'ai eu le même problème , utilisez simplement console.log(...) (comme firebug), et installez une application de visionneuse de journal, cela vous permettra d'afficher tous les journaux de votre navigateur.

3
Rory

Nous suivons les étapes ci-dessous de notre projet de débogage d’un site Web sur mobile.

  1. Installez le logiciel mobogenie sur le mobile et le bureau (les deux ont la même version).
  2. Ouvrez votre site dans le mobile Google Chrome.
  3. Ouvrez Google Chrome sur le bureau. Allez à Option -> Autres options -> Inspecter le périphérique.
  4. Vous trouverez ici une liste de sites ouverts sur mobile, cliquez sur Inspecter et vous obtenez la console JavaScript de votre choix.
2
chirag

Si vous utilisez Cordova version 3.3 ou supérieure et que votre appareil est sous tension Android = 4.4 ou supérieur , vous pouvez utiliser 'Débogage à distance sur Android avec Chrome'. Les instructions complètes se trouvent ici:

https://developer.chrome.com/devtools/docs/remote-debugging

En résumé:

  • Branchez le périphérique sur votre ordinateur de bureau à l'aide d'un câble USB
  • Activer le débogage USB sur votre appareil (sur mon appareil, cela se trouve sous Paramètres> Plus> Options pour les développeurs> Débogage USB)

Ou, si vous utilisez Cordova 3.3+ et que vous n'avez pas de périphérique physique avec la version 4.4, vous pouvez utilisez un émulateur qui utilise Android 4.4+) pour exécuter l'application via l'émulateur, sur votre ordinateur de bureau.

  • Exécutez votre application Cordova sur le périphérique ou l'émulateur.
  • Dans Chrome sur votre ordinateur de bureau, entrez chrome: // inspect/# devices dans la barre d'adresse.
  • Votre périphérique/émulateur sera affiché avec tous les autres périphériques reconnus connectés à votre ordinateur. Sous votre périphérique figureront des détails sur Cordova 'WebView' (essentiellement votre application Cordova), qui s'exécute sur le périphérique/émulateur ( Cordova fonctionne de manière à créer une fenêtre "navigateur" sur votre périphérique/émulateur, dans laquelle se trouve une "WebView" qui est votre application HTML/JavaScript en cours d'exécution).
  • Cliquez sur le lien "inspecter" sous la section "WebView" où vous voyez votre périphérique/émulateur répertorié. Cela ouvre les Chrome qui vous permettent maintenant de déboguer votre application.
  • Sélectionnez l'onglet "sources" de Chrome pour afficher le code JavaScript que votre application Cordova sur l'appareil/l'émulateur est en cours d'exécution. Vous pouvez ajouter des points d'arrêt dans le code JavaScript qui vous permettent de déboguer votre code. .
  • En outre, vous pouvez utiliser l'onglet "console" pour afficher les erreurs éventuelles (qui seront affichées en rouge) ou, au bas de la console, un message ">" s'affiche. Vous pouvez saisir ici toutes les variables ou objets (objets DOM, par exemple) dont vous souhaitez inspecter la valeur actuelle et cette valeur sera affichée.
1
Chris Halcrow

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

  • Journal de bord 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

Le "débogage Web USB" est une option

"l’imprimer sur l’écran" un autre.

Mais je préfère le débogage à distance via ' Adobe Edge inspect ', officiellement appelé Adobe shadow . Il utilise weinre en interne (= WEb INspect Remote)

Vous venez de l'installer + un petit plugin dans le navigateur (Chrome) et une application gratuite que vous pouvez télécharger sur le play-store. Ensuite, vous avez tous les outils comme les Chrome Outils de développement.

Il a également un support pour iOS et Kindle Fire

Mettre à jour

Comme Chris l'a remarqué, vous devez payer un abonnement pour utiliser Edge inspect. Une alternative peu coûteuse consiste à utiliser weinre directement, c'est la base de Edge inspect. Voici un article sur la façon de le configurer.

1
VDP

J'ai installé le module complémentaire de la console firefox ( https://addons.mozilla.org/en-US/Android/addon/console/ ) sur mon navigateur firefox sur Android et cela a très bien fonctionné m'a aidé à déboguer mon application angular2.

1
Sacky San

J'ai également cherché un remplacement de console simple, juste pour dump du texte. Donc ce que j'ai fait était cette fonction:

function remoteLog (arg) {
    var file = '/files/remoteLog.php';
    $.post(file, {text: arg});
}

Le fichier distant PHP a enregistré toute la sortie dans une base de données sous arg. Il m'a fallu 5 minutes (OK, côté serveur, j'ai utilisé une simple bibliothèque de journalisation qui enregistre et affiche messages texte, mais quand même ...).

0
Moshe Shaham

Si le fait de transférer via un serveur tiers ne vous dérange pas, JSConsole est un débogueur distant plutôt utile pour JavaScript.

0
merv

Le 13/12/2013 Google a lancé Chrome DevTools for Mobile , qui permet aux développeurs de déboguer à distance applications Web mobiles via émulation et projection d'écran avec Configuration zéro .

Pour toutes les fonctionnalités, passez à la caisse conférence de Paul Irish sur YouTube .

0
Farm

J'ai récemment écrit un outil permettant d'afficher les journaux de la console dans une "fenêtre" amovible/redimensionnable (en fait un div). Il fournit une fonctionnalité similaire à la console de Firebug mais vous pouvez le voir sur votre page sur une tablette. Console de débogage Tablet/Smartphone/Phablet

0
Gus T Butt

Essayez js-mobile-console

MobileConsole peut être intégré dans n'importe quelle page pour le débogage. Il détectera les erreurs et se comportera exactement comme la console JavaScript native dans le navigateur. Il affiche également tous les journaux que vous avez écrits via une API de window.console.

0
stevemao