Wie debugge ich Websites auf Mobilgeräten?

75

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.

Crashalot
quelle
4
Ab iOS 6 ist Remote-Debugging verfügbar: stackoverflow.com/a/12762449/72428
Blaine
1
mögliches Duplikat von Mobile Website Debugging
Givanse
1
Die Antworten hier sind sehr veraltet. Mit Android , iOS und Windows Phone können Sie Ihr Telefon jetzt über Kabel mit einem Computer verbinden und die Entwicklertools auf Ihrem Computer verwenden, um die Seite Ihres Telefons zu überprüfen und zu ändern. Ich werde versuchen, die Zeit zu finden, um eine Antwort hinzuzufügen.
Mark Amery

Antworten:

22

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).

Meekohi
quelle
18

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.

Davidnorman
quelle
1
Wie stellen Sie Safari's UserAgent auf iPhone ein?
moleculezz
1
Klicken Sie in der Symbolleiste auf Entwickeln -> Benutzeragent. Sie können eine Vielzahl verschiedener UAs auswählen.
Davidnorman
Ich denke das ist nur auf dem Mac? da ich diese Option nirgendwo in der Windows-Version habe.
moleculezz
@moleculezz Sie müssen zu Einstellungen> Erweitert gehen und das Kontrollkästchen "Entwickler in Menüleiste anzeigen" (oder ähnlichen Text) aktivieren. Wenn die Menüleiste selbst ausgeblendet ist (für mich standardmäßig), drücken Sie Alt.
Jinglesthula
Bitte verwenden Sie nicht nur -wekkit- Präfixe - es gibt auch Nicht-WebKit-Browser für Android, und andere Plattformen könnten entstehen. Die bevorzugte Methode besteht vielmehr darin, Ihrem CSS beim Erstellen automatisch ein Präfix voranzustellen.
Vincent
9

In Chrome:

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

Chris Conway
quelle
1
Ich bin auf diese Option gestoßen, da Safari und Chrome WebKit verwenden und diese Option stattdessen auch in Chrome verfügbar ist. Das muss sichtbarer sein! +1
Xiankai
7
  • iWebInspector für iOS ist wirklich erstaunlich für das Debuggen von Webseiten in iOS.

    iWebInspector-Screenshot

    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!

Alan H.
quelle
6

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
Jörg Vanderhoeven
quelle
3

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.

Davidcondrey
quelle
2

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.

Anvaka
quelle
2

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

Geben Sie hier die Bildbeschreibung ein

Funktioniert genau wie Firebug

seantomburke
quelle
1

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.

ddedward
quelle
1

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

Iwan von Uganda
quelle
1

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.

Ein Screenshot von Erudas Benutzeroberfläche.  Oben wird eine Registerkartenleiste angezeigt, die auf "Konsole", "Elemente", "Netzwerk", "Ressourcen", "Quellen", "Informationen", "Snippets" und "Einstellungen" verweist.  "Konsole" ist hervorgehoben.  Darunter befinden sich Schaltflächen zum Filtern der Nachrichten.  Eine einzelne Nachricht wird angezeigt: "Hallo, das ist Eruda."

Jan.
quelle
0

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.

Tim Joyce
quelle
0

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.

Schlangenaugen
quelle