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.
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.
Antworten:
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.
Aktivieren Sie als Nächstes das Remote-Debugging auf Ihrem iOS-Gerät (oder Simulator).
Einstellungen> Safari> Erweitert> Web Inspector (ON)
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).
quelle
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.
quelle
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.
quelle
In Chrome:
Einstellungen -> Tools -> Entwicklertools -> Einstellungen (rechts unten) -> Benutzeragent (im Menü "Registerkarte") -> "Benutzeragent überschreiben"
quelle
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!
quelle
Es gibt verschiedene Möglichkeiten, um DOM und JS auf Mobilgeräten zu debuggen. Mit Adobe Shadow können Sie auch localStorage überprüfen.
quelle
Es gibt ein Lesezeichen für eine Lite-Version von Firebug, die Sie auf Mobilgeräten verwenden können.
Mit diesem zweiten Lesezeichen können Sie ein Konsolenprotokoll unter Android anzeigen
Es gibt auch diesen von farjs.com (ähnlich wie jsConsole)
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.
quelle
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.
quelle
Öffnen Sie den mit Xcode gelieferten iOS-Simulator und anschließend Safari. Diese Option sollte im Menü "Entwickeln" angezeigt werden
Funktioniert genau wie Firebug
quelle
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.
quelle
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
quelle
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
quelle
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.
quelle
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
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.
quelle
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
quelle
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.
quelle