Share
Das Erstellen und Debuggen von Websites und Webanwendungen für mobile Geräte kann problematisch sein. Auf dem Desktop stehen leistungsfähige Debugging-Tools zur Verfügung. Die meisten Browser verfügen über einen Web-Inspector. Aber für Geräte wie das iPhone und das iPad gibt es diese Tools nicht. Das heißt, bis jetzt!
Mit der neuen Version von Safari 6 und iOS 6 können Sie jetzt den Web-Inspector zum Erstellen und Debuggen von Websites auf dem Desktop und auf mobiler Safari verwenden. Am allerbesten? Es ist ein einfacher Vorgang zum Einrichten. Folgen Sie dieser Anleitung und Sie haben in kürzester Zeit einige leistungsstarke Debugging-Tools für mobile iDevices zur Hand.
Moderne Browserentwicklertools waren eine immense Hilfe beim Erstellen von Websites und Webanwendungen. Chrome verfügt über Entwicklerwerkzeuge. Feuerfuchs? Feuerbock Safari? Web Inspector. Alle äußerst leistungsfähigen Werkzeuge in der Webentwicklung.
Wie auch immer, das Debuggen von Websites und Webanwendungen auf mobilen Geräten war bisher sehr umständlich. Da sowohl Safari als auch Chrome auf der Webkit-Engine ausgeführt werden, gibt es viele Ähnlichkeiten in der Art und Weise, in der Desktop- und Mobil-Browser ein Weblayout rendern. Daher erstellen und optimieren die meisten Designer / Entwickler ihre Websites auf dem Desktop mit einem dieser Browser, vorausgesetzt, die Ähnlichkeiten, die sich aus der Webkit-Engine ergeben, machen die Seite auf einem mobilen Gerät gleich.
Mobile und Desktop-Plattformen unterscheiden sich jedoch deutlich voneinander. Sie verfügen über unterschiedliche Speicherkapazitäten, Leistungspotenziale, Eingabegeräte und Netzwerkkonnektivität. Daher ist es unumgänglich geworden, dass die Debugging-Tools eines Designers für mobile Geräte leistungsfähiger werden und denen ihrer Desktop-Kollegen entsprechen.
Apples neue Softwareversionen für iOS 6 und Safari 6 bieten viele Funktionen der Debugging-Tools für Desktop-Browser, die wir alle auf mobilen Geräten kennen und lieben. In diesem Lernprogramm erfahren Sie, wie Sie mit dem Web-Inspector von Safari das Debugging mobiler Websites auf einfache Weise einrichten.
Bevor wir beginnen, ein Hinweis zur Kompatibilität: Es gibt ein paar schlechte Nachrichten für diejenigen, die Windows verwenden. Sie können nur mit dem Remote-Web-Inspector auf einem Mac debuggen. Safari 6 für Windows ist nicht verfügbar. Safari 6 ist auch nur für Macs verfügbar, auf denen OSX Lion oder höher ausgeführt wird.
Es gibt zwei Methoden zur Verwendung des Web Inspectors in Mobile Safari:
Wir behandeln beide Methoden und lassen Sie auswählen, welche für Ihre Situation am besten geeignet ist.
Da das Debuggen von mobilen Geräten mit dem Web-Inspector eine neue Funktion ist, müssen Sie sicherstellen, dass Sie über die neueste Software verfügen.
Echtgerätmethode: Um den Web-Inspector zusammen mit einem echten iDevice zu verwenden, benötigen Sie Folgendes:
Methode für virtuelle Geräte: Um den Web-Inspector zusammen mit dem iOS-Simulator verwenden zu können, benötigen Sie Folgendes:
Prüfen der Softwareversionen: Um zu überprüfen, ob Sie iOS 6 auf Ihrem iDevice ausführen, gehen Sie auf Ihrem Gerät zu "Einstellungen> Allgemein> Info".
Um zu überprüfen, ob Sie Safari 6 ausführen, gehen Sie in die Menüleiste von Safari und klicken Sie auf "Safari> About Safari"..
Um sicherzustellen, dass Sie Lion ausführen, klicken Sie in der Menüleiste auf das Apple-Logo und wählen Sie "Über diesen Mac".
Um sicherzustellen, dass Sie die richtige Version von Xcode ausführen, öffnen Sie Xcode und wählen Sie "Xcode> Über Xcode".
Sie müssen die Entwicklertools und den Web-Inspector in den Desktop- und mobilen Versionen von Safari aktivieren.
Echtgerätmethode: Wenn Sie ein echtes Gerät verwenden, verbinden Sie es über USB mit Ihrem Mac.
Methode für virtuelle Geräte: Wenn Sie den iOS-Simulator verwenden möchten, öffnen Sie Xcode, klicken Sie mit der rechten Maustaste auf das Dock-Symbol und wählen Sie "Open Developer Tool> iOS Simulator"..
Mobile Safari: Auf Ihrem echten iDevice oder im iOS-Simulator gehen Sie zu "Einstellungen> Safari> Erweitert" und aktivieren Sie "Web Inspector"..
Desktop Safari: Wenn Sie dies noch nicht getan haben, stellen Sie sicher, dass die Entwicklertools in Safari aktiviert sind. Sie wissen, dass Sie sie aktiviert haben, wenn Sie in der Menüleiste "Entwickeln" sehen.
Wenn Sie in der Menüleiste "Entwickeln" nicht sehen können, klicken Sie auf "Safari> Einstellungen> Erweitert" und aktivieren Sie das Kontrollkästchen "Entwicklungsmenü in Menüleiste anzeigen".
Nachdem Sie entweder den iOS-Simulator geöffnet haben oder Ihr iDevice über USB (oder beides!) An Ihren Mac angeschlossen ist, können Sie den Web-Inspector auf Ihrer Website verwenden.
Öffnen Sie auf Ihrem Mac Safari und gehen Sie zu "Entwickeln". Sie sollten jetzt alle virtuellen oder realen iDevices sehen, die Sie mit Ihrem Mac verbunden haben und ausführen. In der Abbildung unten sehen Sie zwei Geräte im Menü: Eines ist der iOS-Simulator, das andere ist ein echtes iPhone, das mit meinem Mac verbunden ist.
Um mit der Untersuchung einer Website beginnen zu können, müssen Sie Mobile Safari auf dem Gerät starten und eine der Registerkarten für die Website öffnen. Wenn Sie keine mobile Safari geöffnet haben, wird eine Meldung mit dem Hinweis "Keine inspizierbaren Anwendungen" angezeigt..
Um mit der Prüfung zu beginnen, geben Sie einfach die URL der Seite ein, die Sie in Mobile Safari prüfen möchten, und wählen Sie dann diese Seite aus dem Menü "Entwickeln". Sie können mit dem Überprüfen von Websites auf Ihrem echten iDevice oder mit dem iOS-Simulator beginnen. Wenn Sie die Seite auswählen, wird auf der Seite eine blaue Überlagerung angezeigt, die angibt, welche Seite Sie ausgewählt haben.
Wenn Sie eine Website auswählen, wird der Webinspektor von Safari geöffnet, und Sie können mit der Inspektion Ihrer Website beginnen. Das ist es!
Da Sie jetzt den Web-Inspector von Safari zur Hand haben, haben Sie viel mehr Kontrolle beim Erstellen und Debuggen von Websites und Webanwendungen.
Hier ein Beispiel für einige Dinge, die Sie jetzt beim Debuggen von mobilen Websites tun können:
Sie haben die Werkzeuge, gehen Sie weiter und bauen Sie!
Accentsconagua