Comment déboguer des sites Web sur des appareils mobiles?
Comment les gens déboguent-ils des sites Web sur des appareils mobiles?
J'aimerais pouvoir manipuler le HTML et le CSS de la même manière que l'inspecteur dans un navigateur de bureau et déboguer JavaScript.
C'est la bonne réponse, je ne sais pas pourquoi Blaine l'a laissé comme commentaire!
À partir de iOS 6, le débogage à distance est disponible: https://stackoverflow.com/a/12762449/72428
Sous OS X, vous pouvez utiliser l'inspecteur Web Safari sur les appareils iOS Simulator ET iOS 6.
- Activez d’abord le menu Développeur dans Safari sur votre bureau.
Activez ensuite le débogage à distance sur votre appareil iOS (ou votre simulateur).
Paramètres> Safari> Avancé> Web Inspector (ON)
Retournez à Safari sur votre ordinateur, cliquez sur le menu Développeur, puis sélectionnez votre appareil (par exemple, iPhone Simulator, iPhone).
Avec Google Chrome pour Android Beta vous pouvez maintenant effectuer le débogage distant en utilisant les outils de développement intégrés à Google Chrome sur votre bureau. Voici une vidéo démontrant comment cela fonctionne.
J'ai récemment rencontré le même problème avec un site mobile que je développais pour le travail. La meilleure solution que j'ai trouvée consistait à utiliser le UserAgent de Safari configuré sur Iphone (assurez-vous que les outils de développement de Safari sont activés). Vous devrez détecter que l'utilisateur provient d'un appareil mobile et les rediriger vers l'URL de votre mobile ou charger les feuilles de style spécifiques au mobile, car cette méthode ne fonctionne pas en définissant le type de média css.
Firefox possède également cette fonctionnalité, mais n'enregistre pas les styles css webkit (que je suppose que vous allez utiliser car ils fonctionnent à la fois pour Safari mobile et pour Android).
Vous rencontrerez quelques incohérences entre le navigateur de votre ordinateur de bureau et votre navigateur mobile actuel, mais pour identifier rapidement les styles et le débogage javascript, cela fonctionnait à merveille.
J'espère que cela t'aides.
En Chrome:
Paramètres -> Outils -> Outils de développement -> Paramètres (en bas à droite du site) -> Agent utilisateur (dans le menu Onglet) -> "Remplacer l'agent utilisateur"
iWebInspector pour iOS est vraiment incroyable pour le débogage de pages Web dans iOS.
![iWebInspector screenshot]()
Mise à jour: depuis que j'ai posté cette réponse, iOS et OS X ont été mis à jour et maintenant Safari sur votre Mac peut se connecter à déboguer Safari mobile.
Découvrez Firebug Lite .
pour Chrome sous Android, Débogage à distance n’est pas mauvais!
Il existe plusieurs façons de déboguer le DOM et le JS sur des appareils mobiles. Avec Adobe Shadow, vous pouvez également inspecter localStorage.
- weinre
- Adobe Shadow
- Pour Mac et iPhone: iWebInspector
Il existe un bookmarklet pour une version allégée de Firebug que vous pouvez utiliser sur mobile.
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/Sprite.png','https://getfirebug.com/','#startOpened');
Vous pouvez utiliser ce deuxième bookmarklet pour afficher un journal de la console sous Android.
javascript:(function(){if((/Android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i<arguments.length;i++){arr.Push(arguments[i]);}this._log.Push(arr.join(",%20"));},"trace":function(){var%20stack;try{throw%20new%20Error();}catch(ex){stack=ex.stack;}console.log("console.trace()\n"+stack.split("\n").slice(2).join("%20%20\n"));},"dir":function(obj){console.log("Content%20of%20"+obj);for(var%20key%20in%20obj){var%20value=typeof%20obj[key]==="function"?"function":obj[key];console.log("%20-\""+key+"\"%20->%20\""+value+"\"");}},"show":function(){alert(this._log.join("\n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20\""+msg+"\"%20at%20\""+"\",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();
Il y a aussi celui de farjs.com (semblable à jsConsole)
javascript:(function(){ base_url = 'farjs.com'; base_path = ''; var _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://farjs.com/bookmarklets/injector_v1.js'; document.getElementsByTagName('head')[0].appendChild(_my_script);})()
En plus de weinre (Web Inspector Remote) . Il y a aussi..
MIHTool iOS App : un wrapper pour weinre. Version gratuite et version payante disponible.
SocketBug : un utilitaire de débogage distant construit à l'aide de Socket.IO
jsConsole : un outil simple en ligne de commande JavaScript. Cependant, il offre également la possibilité de passer d'une fenêtre de navigateur à une autre pour contrôler et déboguer cette fenêtre à distance, que ce soit dans un autre navigateur ou dans un autre périphérique.
Adobe vient de publier un nouvel outil, un nouvel outil d'inspection et de prévisualisation: Adobe Shadow . La page avec les instructions est ici .
Il synchronise la navigation Web mobile avec l'ordinateur et permet d'effectuer une inspection Web et une manipulation DOM.
Ouvrez le simulateur iOS fourni avec Xcode, puis ouvrez Safari et vous devriez voir cette option dans le menu "Développement".
Fonctionne comme Firebug
Ce bookmarklet vous permet d’utiliser Firebug sur Safari iOS. Vous devez copier le bookmarklet sur un bureau et l'envoyer par e-mail sur votre appareil iOS, mais sinon, cela fonctionne:
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
Je sais que cette question a été posée il y a longtemps, mais j'espère toujours que ma réponse aidera.
Vous pouvez utiliser NetBeans IDE pour déboguer à l'aide d'un véritable appareil Android ou IOS. Assurez-vous simplement que vous disposez du SDK Android (pour les appareils Android), ouvrez votre projet dans NetBeans et, lorsque vous exécutez, choisissez un appareil Android comme navigateur.
Je trouve cela très utile car vous pouvez voir le résultat des différents navigateurs installés sur votre appareil.
Vous pouvez utiliser ce lien pour plus de détails
J'utilise le simulateur avec mon ensemble de proxy système osx pour envoyer des requêtes à Fiddler s'exécutant sur une machine Windows - cela n'aide pas beaucoup avec les éléments javascript/internal du safari mobile, mais il me montre au moins ce qui se passe réellement sur le réseau et laisse-moi intercepter/enregistrer/analyser/ajuster les choses à la volée pour déterminer ce qui fonctionne et ce qui ne fonctionne pas.
Je suggère d'utiliser: https://www.vanamco.com/ghostlab/
C'est une plate-forme que vous pouvez déboguer avec plusieurs appareils mobiles en un seul clic.
Effectuer une action dans un navigateur peut permettre de se propager à d'autres périphériques connectés à une adresse IP privée (et ces périphériques doivent se connecter au même réseau et utiliser une adresse IP).
Vous verrez une interface de développeur Chrome, mais vous pourrez y effectuer des ajustements CSS (les modifications seront apportées à tous les appareils connectés) et le débogage Javsascript.
Vous pouvez connecter un iPhone ou un iPad à un ordinateur Mac et utiliser les outils de développement de Safari. https://developer.Apple.com/safari/tools/ Sinon, certains outils en ligne pourraient faire de même. Vérifier http://farjs.com
Utilisez-vous php pour choisir l'agent utilisateur?
si oui, j'utilise .. Fennec puis j'ajoute l'agent d'utilisateur fennec à la liste des exceptions pour vos appareils mobiles qui seraient
if ($_SERVER['HTTP_USER_AGENT'] == '4.0b5') {
return = true;
}
Ajouté: Lorsque je fais juste des échanges css pour mobile, j'utilise ce script et j'y ajoute l'exception ci-dessus pour fennec.