it-swarm.com.de

Wie debuggen Sie Websites auf mobilen Geräten?

Wie debuggen Menschen auf mobilen Geräten?

Ich möchte HTML und CSS auf ähnliche Weise wie den Inspector in einem Desktop-Browser bearbeiten und JavaScript debuggen können.

68
Crashalot

Dies ist die richtige Antwort, nicht sicher, warum Blaine es 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-Web-Inspector unter iOS Simulator UND iOS 6-Geräten verwenden.

  1. Aktivieren Sie zunächst 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. Gehen Sie auf Ihrem Computer zu Safari zurück, klicken Sie auf das Menü "Entwickler" und wählen Sie Ihr Gerät aus (z. B. iPhone Simulator, iPhone).

17
Meekohi

Mit Google Chrome für Android Beta können Sie jetzt Remote-Debugging mithilfe der in Google Chrome integrierten Entwickler-Tools auf Ihrem Desktop ausführen. Hier ist ein Video , das zeigt, wie das funktioniert.

18
dlannoye

Ich habe vor kurzem das gleiche Problem mit einer mobilen Website, die ich für die Arbeit entwickelte. Die beste Lösung, die ich gefunden habe, war die Verwendung von Safari UserAgent auf Iphone (stellen Sie sicher, dass die Entwicklertools von Safari aktiviert sind). Sie müssen feststellen, dass der Benutzer von einem mobilen Gerät kommt, und diese entweder auf Ihre mobile URL umleiten oder die für das mobile Gerät spezifischen Stylesheets laden, da diese Methode beim Festlegen des css-Medientyps nicht funktioniert. 

Firefox verfügt auch über diese Funktion, registriert jedoch keine Webkit-CSS-Stile (die, wie ich annehme, Sie für Mobile Safari und Android verwenden werden).

Sie werden auf einige Inkonsistenzen zwischen Ihrem Desktop-Browser und Ihrem aktuellen mobilen Browser stoßen, aber zum schnellen Erkennen von Stilen und Javascript-Debuggen hat es sich als reizvoll erwiesen.

Hoffe das hilft. 

18
davidnorman

In Chrome:

Einstellungen -> Extras -> Entwicklertools -> Einstellungen (rechte Seite unten) -> Benutzeragent (im Tab-Menü) -> "Benutzeragent überschreiben"

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

    iWebInspector screenshot

    Update: Seit ich diese Antwort gepostet habe, sind iOS und OS X aktualisiert worden. Jetzt kann Safari auf Ihrem Mac eine Verbindung zu Mobile Safari herstellen und ein Debugging durchführen.

  • Check out Firebug Lite .

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

7
Alan H.

Es gibt mehrere Möglichkeiten, das DOM und JS auf mobilen Geräten zu debuggen. Mit Adobe Shadow können Sie auch localStorage prüfen.

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

Es gibt ein Bookmarklet für eine Lite-Version von Firebug, das Sie auf dem Handy 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');

Sie können dieses zweite Bookmarklet verwenden, um ein Konsolenprotokoll unter Android anzuzeigen

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 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 mit Socket.IO erstelltes Remote-Debugging-Hilfsprogramm

  • jsConsole : Ein einfaches JavaScript-Befehlszeilentool. Es bietet jedoch auch die Möglichkeit, zu anderen Browserfenstern zu überbrücken, um dieses Fenster aus der Ferne zu steuern und zu debuggen - sei es in einem anderen Browser oder einem anderen Gerät.

3
davidcondrey

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

Es synchronisiert das mobile Webbrowsing mit dem Computer und ermöglicht die Webinspektion und DOM-Manipulation.

2
Anvaka

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

enter image description here

Funktioniert wie Firebug

2
seantomburke

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

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

1
Stuart Young

Ich weiß, dass diese Frage schon vor langer Zeit gestellt wurde, aber ich hoffe trotzdem, dass meine Antwort hilft. 

Sie können NetBeans IDE zum Debuggen mit einem echten Android- oder IOS - Gerät verwenden. Stellen Sie einfach sicher, dass Sie ein Android-SDK installiert haben (für Android-Geräte), öffnen Sie Ihr Projekt in NetBeans und wählen Sie als Browser ein Android-Gerät aus. 

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

1
Ivan of uganda

Ich verwende den Simulator mit meinem osx-System-Proxy-Set, um Anfragen an Fiddler zu senden, der auf einem Windows-Computer ausgeführt wird - das hilft nicht bei Javascript/internem Material für die mobile Safari, aber es zeigt mir zumindest, was wirklich über die Leitung geht lasst mich abfangen/protokollieren/analysieren/Dinge schnell abändern, um herauszufinden, was funktioniert und was nicht.

1
ddedward

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

Es ist eine Plattform, die Sie mit einem Klick in mehreren mobilen Geräten debuggen können.

Durch Ausführen einer Aktion in einem Browser können Sie sich für die Weitergabe an andere Geräte entscheiden, die mit einer privaten IP-Adresse verbunden sind (und diese Geräte sollten sich mit demselben Netzwerk verbinden und die IP-Adresse verwenden).

Sie sehen eine Chrome-Entwickleroberfläche, aber dort können Sie CSS-Anpassungen vornehmen (die Änderungen werden bei allen verbundenen Geräten vorgenommen) und das Javascript-Debuggen.

0
Snake Eyes

Sie können ein iPhone oder ein iPad an einen Mac-Computer 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. Check http://farjs.com

0
BlueStory

Verwenden Sie PHP, um den Benutzeragenten zu entscheiden?

wenn ja, benutze ich .. Fennec und füge dann den Fennec-Benutzeragenten zur Ausnahmeliste für Ihre mobilen Geräte hinzu 

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

Added: Bei css swaps für mobile verwende ich dieses script und füge die obige Ausnahme für fennec hinzu.

0
Tim Joyce