Wie debugge ich Websites auf Mobilgeräten?

Wie debuggen Menschen Websites auf Mobilgeräten?

Ich möchte in der Lage sein, HTML und CSS ähnlich wie bei der Verwendung des Inspektors in einem Desktop-Browser zu bearbeiten und JavaScript zu debuggen.

Dies ist die richtige Antwort, nicht sicher, warum Blaine sie nur als Kommentar hinterlassen hat!

Ab iOS 6 ist Remote-Debugging verfügbar: https://stackoverflow.com/a/12762449/72428

Unter OS X können Sie den Safari-Webinspektor auf den Geräten iOS Simulator UND iOS 6 verwenden.

1. Aktivieren Sie zuerst das Entwicklermenü in Safari auf Ihrem Desktop.

2. Aktivieren Sie als Nächstes das Remote-Debugging auf Ihrem iOS-Gerät (oder Simulator).

   Einstellungen> Safari> Erweitert> Web Inspector (ON)

3. Kehren Sie auf Ihrem Computer zu Safari zurück, klicken Sie auf das Entwicklermenü und wählen Sie Ihr Gerät aus (z. B. iPhone Simulator, iPhone).

Mit Google Chrome für Android Beta können Sie jetzt Remote-Debugging mit den in Google Chrome integrierten Entwicklertools auf Ihrem Desktop durchführen. Hier ist ein Video, das zeigt, wie das funktioniert.

Ich bin kürzlich auf dasselbe Problem mit einer mobilen Website gestoßen, die ich für die Arbeit entwickelt habe. Die beste Lösung, die ich gefunden habe, war die Verwendung von Safaris UserAgent auf Iphone (stellen Sie sicher, dass die Entwicklertools von Safari aktiviert sind). Sie müssen erkennen, dass der Benutzer von einem mobilen Gerät kommt, und diese entweder auf Ihre mobile URL umleiten oder die für Mobilgeräte spezifischen Stylesheets laden, da diese Methode beim Festlegen des CSS-Medientyps nicht funktioniert.

Firefox verfügt ebenfalls über diese Funktion, registriert jedoch keine CSS-Stile für Webkits (von denen ich annehme, dass Sie sie verwenden werden, da sie sowohl für Mobile Safari als auch für Android funktionieren).

Sie werden auf einige Inkonsistenzen zwischen Ihrem Desktop-Browser und Ihrem tatsächlichen mobilen Browser stoßen, aber um Stile und Javascript-Debugging schnell zu identifizieren, hat es wie ein Zauber funktioniert.

Hoffe das hilft.

In Chrome:

Einstellungen -> Tools -> Entwicklertools -> Einstellungen (rechts unten) -> Benutzeragent (im Menü "Registerkarte") -> "Benutzeragent überschreiben"

• iWebInspector für iOS ist wirklich erstaunlich für das Debuggen von Webseiten in iOS.

  

  Update: Seit ich diese Antwort gepostet habe, wurden iOS und OS X aktualisiert, und jetzt kann Safari auf Ihrem Mac eine Verbindung zu Mobile Safari herstellen und dieses debuggen.

• Schauen Sie sich Firebug Lite an .

• Für Chrome unter Android ist Remote-Debugging nicht schlecht!

Es gibt verschiedene Möglichkeiten, um DOM und JS auf Mobilgeräten zu debuggen. Mit Adobe Shadow können Sie auch localStorage überprüfen.

• weinre
• Adobe Shadow
• Für Mac und iPhone: iWebInspector

Es gibt ein Lesezeichen für eine Lite-Version von Firebug, die Sie auf Mobilgeräten verwenden können.

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');

Mit diesem zweiten Lesezeichen können Sie ein Konsolenprotokoll unter Android anzeigen

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

Es gibt auch diesen von farjs.com (ähnlich wie 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);})()

Neben weinre (Web Inspector Remote) . Es gibt auch..

• MIHTool iOS App : ein Wrapper für weinre. Kostenlose Version und kostenpflichtige Version verfügbar.

• SocketBug : Ein Remote-Debugging-Dienstprogramm, das mit Socket.IO erstellt wurde

• jsConsole : Ein einfaches JavaScript-Befehlszeilentool. Es bietet jedoch auch die Möglichkeit, eine Brücke zu anderen Browserfenstern zu schlagen, um dieses Fenster fernzusteuern und zu debuggen - sei es in einem anderen Browser oder auf einem anderen Gerät insgesamt.

Adobe hat gerade ein neues Tool veröffentlicht, ein neues Inspektions- und Vorschau-Tool: Adobe Shadow . Die Seite mit den Anweisungen ist hier .

Es synchronisiert das mobile Surfen im Internet mit dem Computer und ermöglicht die Durchführung von Webinspektionen und DOM-Manipulationen.

Öffnen Sie den mit Xcode gelieferten iOS-Simulator und anschließend Safari. Diese Option sollte im Menü "Entwickeln" angezeigt werden

Funktioniert genau wie Firebug

Ich verwende den Simulator mit meinem OSX-System-Proxy-Set, um Anfragen an Fiddler zu senden, die auf einem Windows-Computer ausgeführt werden Lassen Sie mich Dinge im laufenden Betrieb abfangen / protokollieren / analysieren / optimieren, um herauszufinden, was funktioniert und was nicht.

Es gibt dieses Lesezeichen, mit dem Sie Firebug unter Safari iOS verwenden können. Sie müssen das Lesezeichen auf einen Desktop kopieren und per E-Mail an Ihr iOS-Gerät senden. Andernfalls funktioniert es:

http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

Ich weiß, dass diese Frage vor langer Zeit gestellt wurde, hoffe aber immer noch, dass meine Antwort hilft.

Sie können NetBeans IDE verwenden, um mit einem echten Android- oder IOS-Gerät zu debuggen. Stellen Sie einfach sicher, dass Sie Android SDK installiert haben (für Android-Geräte), öffnen Sie Ihr Projekt in NetBeans und wählen Sie beim Ausführen Android-Gerät als Ihren Browser.

Ich finde das sehr hilfreich, da Sie das Ergebnis der verschiedenen auf Ihrem Gerät installierten Browser sehen können.

Sie können diesen Link für weitere Details verwenden

http://wiki.netbeans.org/MobileBrowsers

Seit Firebug Lite nicht mehr funktioniert, bin ich zu Eruda gewechselt , das eine Konsole, einen DOM-Explorer und einige weitere Funktionen bietet. Sie können es mit dem Lesezeichen in jede Seite einfügen.

Verwenden Sie PHP, um den Benutzeragenten zu bestimmen?

Wenn ja, verwende ich .. Fennec und füge dann den Fennec-Benutzeragenten zur Ausnahmeliste für Ihre Mobilgeräte hinzu

if ($_SERVER['HTTP_USER_AGENT'] == '4.0b5') {
    return = true;
}

Hinzugefügt: Wenn ich nur CSS-Swaps für Handys mache, verwende ich dieses Skript und füge die obige Ausnahme für Fennec hinzu.

Sie können das iPhone oder iPad an einen Mac anschließen und die Entwicklungstools von Safari verwenden. https://developer.apple.com/safari/tools/ Alternativ gibt es einige Online-Tools, die dasselbe tun könnten. Überprüfen Sie http://farjs.com

Ich würde vorschlagen, Folgendes zu verwenden: https://www.vanamco.com/ghostlab/

Es ist eine Plattform, die Sie mit einem Klick auf mehreren Mobilgeräten debuggen können.

Wenn Sie eine Aktion in einem Browser ausführen, können Sie festlegen, dass sie an andere Geräte weitergegeben werden soll, die mit einer privaten IP verbunden sind (und diese Geräte sollten eine Verbindung zu demselben Netzwerk herstellen und die IP-Adresse verwenden).

Sie sehen eine Chrome-Entwickleroberfläche, aber dort können Sie CSS-Anpassungen (die Änderungen werden für alle angeschlossenen Geräte vorgenommen) und Javsascript-Debugging vornehmen.