Existe-t-il une sorte de Firebug ou de débogueur de console JavaScript pour Android? [fermé]
je développe un site web pour mobile. Il fonctionne sur le Bureau de Firefox. Il fonctionne sur iPhone, mais quand j'appuie sur un bouton sur Android 2.x (et peut-être moins). mon code JavaScript s'écrase ou quoi d'autre...
puis-je avoir accès à l'enregistreur ou à la console JavaScript pour ces appareils?
le mieux devrait être une sorte d'application coupe-feu.
15 réponses
une option est weinre . Il fournit DOM & style édition avec la console. Si vous ne voulez pas le configurer vous-même, il y a une instance hébergée à http://debug.phonegap.com
l'autre option est JSHybugger . C'est certainement l'environnement de débogage le plus complet disponible pour android browser. C'est un produit payant, mais probablement la peine.
Chrome dispose d'une fonctionnalité très agréable appelée "débogage web USB" qui permet de voir la console de débogage de l'appareil mobile sur votre PC lorsqu'il est connecté via USB.
Voir ici pour plus de détails.
EDIT: il semble que L'ADB n'est pas supporté sur Windows 8, mais ce lien semble fournir une solution:
http://mikemurko.com/general/chrome-remote-debugging-nexus-7-on-windows-8 /
vous pouvez taper about:debug
dans certains navigateurs mobiles pour obtenir une console JavaScript.
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 sur votre page:
<div id='display'></div>
$('#display').text('array length: ' + myArray.length);
ou si vous voulez regarder les variables JavaScript sans ajouter d'espace d'affichage à votre page:
function debug(txt) {
$('body').append("<div style='width:300px;background:orange;padding:3px;font-size:13px'>" + txt + "</div>");
}
j'avais le même problème , il suffit d'utiliser console.log(...)
(comme firebug), et l'installation d'une application de visionneuse de journaux, cela vous permettra de voir tous les journaux pour votre navigateur.
nous suivons les étapes ci-dessous dans notre projet de débogage d'un site web sur mobile.
- installez le logiciel mobogenie sur le mobile et le bureau (les deux ont la même version).
- ouvrir votre site dans navigateur Google Chrome mobile.
- ouvrez Google Chrome sur le bureau. Aller à Option --> Plus d'Options --> Inspecter l'Appareil .
- ici, vous trouvez une liste de sites qui sont ouverts sur mobile et cliquez sur Inspecter et vous obtenez la console JavaScript que vous voulez.
"débogage web USB" est une option
impression "sur l'écran" de l'autre.
mais je préfère le débogage à distance par ' Adobe edge inspect "officiellement connu sous le nom de adobe shadow . Il utilise des weinre en interne (=WEb Inspecter à Distance)
Vous venez de l'installer + un petit plugin dans le navigateur (Chrome) et une application gratuite que vous pouvez télécharger dans le play store. Ensuite, vous avez tous les outils comme les outils de développement Chrome.
Il a aussi un support pour iOS et Kindle Fire
mise à Jour
comme Chris l'a remarqué, vous devez payer un abonnement pour utiliser edge inspect. Une alternative bon marché est d'utiliser weinre directement, c'est la base de bord inspecter. voici un article sur la façon de le configurer.
si vous êtes en utilisant Cordova 3.3 ou plus et que votre appareil est sous Android 4.4 ou plus , vous pouvez utiliser "Remote Debugging on Android with Chrome". Les instructions complètes sont ici:
https://developer.chrome.com/devtools/docs/remote-debugging
en résumé:
- branchez le dispositif dans votre ordinateur de bureau à l'aide D'un câble USB
- activer le débogage USB sur votre périphérique (sur mon périphérique, C'est sous Paramètres > Plus > Options du développeur > Débogage USB)
ou , si vous utilisez Cordova 3.3+ et n'avez pas d'appareil physique avec 4.4, vous pouvez utiliser un émulateur qui utilise Android 4.4+ pour exécuter l'application à travers l'émulateur, sur votre ordinateur de bureau.
- Exécuter votre Cordova application sur le dispositif ou l'émulateur
- dans Chrome sur votre ordinateur de bureau, entrez chrome:/ / inspecter / #dispositifs dans la barre d'adresse
- votre appareil / émulateur sera affiché avec tous les autres appareils reconnus qui sont connectés à votre ordinateur, et sous votre appareil il y aura des détails de la Cordova 'WebView' (essentiellement votre application Cordova), qui fonctionne sur l'appareil / émulateur (la façon dont fonctionne Cordova est qu'il crée essentiellement un fenêtre' browser ' sur votre périphérique / émulateur, dans laquelle il y a un 'WebView' qui est votre application HTML/JavaScript)
- cliquez sur le lien "inspecter" dans la section "WebView" où vous voyez votre périphérique/émulateur listé. Cela amène les outils de développement Chrome qui permet de déboguer votre application.
- sélectionnez l'onglet "sources" des outils de développement Chrome pour visualiser JavaScript que votre application Cordova sur le périphérique / émulateur est actuellement exécuter. Vous pouvez ajouter des points de rupture dans le JavaScript qui vous permettent de déboguer votre code.
- de plus, vous pouvez utiliser l'onglet "console" pour afficher les erreurs (qui s'afficheront en rouge), ou en bas de la console vous verrez une invite'>'. Ici, vous pouvez taper n'importe quelles variables ou objets (par exemple des objets DOM) que vous voulez inspecter la valeur actuelle de, et la valeur sera affichée.
vous pouvez essayer YConsole une console js embarquée. Il est léger et simple à utiliser.
- registres des captures et erreurs.
- éditeur D'objets.
comment utiliser:
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
j'ai installé une console supplémentaire du firefox ( https://addons.mozilla.org/en-US/android/addon/console / ) sur mon navigateur firefox sur android et cela a très bien fonctionné. Il m'a aidé à déboguer mon application angular2.
j'ai récemment écrit un outil pour afficher les logs de la console dans une" fenêtre " mobile/redimensionnable (en fait un div). Il offre des fonctionnalités similaires à la console de Firebug mais vous pouvez le voir sur votre page sur une tablette. Tablette/Smartphone/Phablet Console De Débogage
j'ai aussi cherché un simple remplacement de console, juste pour décharger 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 PHP éloigné a enregistré toute la sortie à une base de données dans arg
. Cela m'a pris 5 minutes (OK, du côté du serveur j'ai utilisé une bibliothèque de journalisation simple qui enregistre et affiche des messages texte, mais quand même...).
on 2013-12-03 Google a lancé Chrome DevTools for Mobile , qui permet aux développeurs débogage à distance applications Web mobile via émulation et screen-casting avec Configuration zéro .
Pour toutes les fonctionnalités, caisse Paul Irish parler sur YouTube .
MobileConsole peut être intégré dans n'importe quelle page pour le débogage. Il va attraper des erreurs et se comporter exactement comme la console JavaScript native dans le navigateur. Il affiche également tous les journaux que vous avez écrits via une API de fenêtre.console.