In der heutigen Welt ein Web-Entwickler zu sein, bedeutet, eine Vielzahl von Geräten und Plattformen zu unterstützen, was sich manchmal als eine schwierige Aufgabe erweisen kann. Selbst wenn der am besten konzipierte Code den neuesten Webstandards entspricht, können Sie dennoch feststellen, dass Teile Ihrer Website auf bestimmten Geräten oder Auflösungen möglicherweise nicht so aussehen oder handeln, wie Sie es möchten. Wenn Sie sich der Herausforderung stellen müssen, ein derart breites Spektrum an Szenarien zu unterstützen, kann es von unschätzbarem Wert sein, die richtigen Simulationswerkzeuge zur Verfügung zu haben.
Wenn Sie zu den vielen Programmierern gehören, die einen Mac verwenden, hat sich das Entwickler-Toolset von Safari immer als nützlich erwiesen. Mit der Veröffentlichung von Safari 9 wurde die Funktionsbreite dieser Funktion erheblich erweitert, hauptsächlich aufgrund des Responsive Design-Modus, der es Ihnen ermöglicht, eine Vorschau der Darstellung Ihrer Website bei verschiedenen Bildschirmauflösungen sowie auf verschiedenen iPad-, iPhone- und iPod touch-Builds zu erhalten.
In diesem Lernprogramm wird beschrieben, wie Sie den Responsive Design-Modus aktivieren und ihn für Ihre Entwicklungsanforderungen einsetzen können.
Safari-Einstellungen
Öffnen Sie zunächst Ihren Safari-Browser.
Klicke auf Safari im Browser-Menü oben auf dem Bildschirm. Wenn das Dropdown-Menü angezeigt wird, wählen Sie die Option Einstellungen Option im eingekreisten Beispiel eingekreist.
Hinweis: Anstelle des oben genannten Menüpunkts können Sie die folgende Tastenkombination verwenden: BEFEHL + COMMA (,)
02 von 05Entwicklungsmenü anzeigen
Das Dialogfeld "Einstellungen" von Safari sollte jetzt angezeigt werden und Ihr Browserfenster überlagern. Klicken Sie zuerst auf die Erweitert Symbol wird durch ein Zahnrad dargestellt und befindet sich in der oberen rechten Ecke des Fensters.
Die erweiterten Einstellungen des Browsers sollten jetzt sichtbar sein. Am unteren Rand befindet sich eine Option, die mit einem Kontrollkästchen versehen ist Entwicklungsmenü in der Menüleiste anzeigen und im obigen Beispiel eingekreist. Klicken Sie einmal auf das Kontrollkästchen, um dieses Menü zu aktivieren.
03 von 05Rufen Sie den Responsive Design-Modus auf
Jetzt sollte eine neue Option in Ihrem Safari-Menü verfügbar sein, die sich oben auf dem Bildschirm befindet und mit der Beschriftung versehen ist Entwickeln. Klicken Sie auf diese Option.
Wenn das Dropdown-Menü angezeigt wird, wählen Sie Rufen Sie den Responsive Design-Modus aufim gezeigten Beispiel eingekreist.
Hinweis: Anstelle des oben genannten Menüpunkts können Sie die folgende Tastenkombination verwenden:OPTION + BEFEHLSTASTE + R
04 von 05Responsive Design-Modus
Die aktive Webseite sollte jetzt im Responsive Design-Modus angezeigt werden, wie im obigen Beispiel gezeigt. Wenn Sie eines der aufgelisteten iOS-Geräte wie das iPhone 6 oder eine der angegebenen Bildschirmauflösungen wie 800 x 600 auswählen, können Sie sofort sehen, wie die Seite auf diesem Gerät oder in dieser Anzeigeauflösung dargestellt wird.
Zusätzlich zu den angezeigten Geräten und Auflösungen können Sie Safari auch anweisen, einen anderen Benutzeragenten (z. B. einen anderen Browser) zu simulieren, indem Sie auf das Dropdown-Menü direkt über den Auflösungssymbolen klicken.
05 von 05Entwicklungsmenü: Weitere Optionen
Neben dem Responsive Design-Modus bietet das Entwicklungsmenü von Safari 9 viele weitere nützliche Optionen, von denen einige nachfolgend aufgeführt sind.
- Seite öffnen mit: Ermöglicht das Öffnen der aktiven Webseite in einem anderen Browser, der derzeit auf Ihrem Mac installiert ist.
- User-Agent: Das Ändern des Benutzeragenten bewirkt, dass Webserver Ihren Browser als etwas anderes als Safari 9 identifizieren.
- Connect Web Inspector: Der Web Inspector von Safari 9 zeigt alle Ressourcen einer Webseite an und bietet die Möglichkeit, CSS-Informationen, DOM-Metriken und -Struktur sowie den zugehörigen Quellcode zu lesen.
- Fehlerkonsole anzeigen: Diese Konsole ist eine der am häufigsten verwendeten Optionen im Menü "Entwickeln" und zeigt JavaScript-, HTML- und XML-Fehler und -Warnungen an.
- Seitenquelle anzeigen: Ermöglicht das Anzeigen und Durchsuchen des Quellcodes der aktiven Webseite.
- Seitenressourcen anzeigen: Wenn Sie diese Option auswählen, werden Dokumente, Skripts, CSS und andere Ressourcen von der aktuellen Seite angezeigt.
- Snippet-Editor anzeigen: Ermöglicht die Bearbeitung und Ausführung von Codefragmenten im Gegensatz zu einer vollständigen Seite. Diese Funktion ist aus Testperspektive sehr nützlich.
- Extension Builder anzeigen: Ermöglicht das Erstellen eigener Safari-Erweiterungen, indem der Code entsprechend gepackt und Metadaten angefügt werden.
- Timeline-Aufnahme starten: Zeichnet eine Reihe von Elementen auf, einschließlich Netzwerkanforderungen, JavaScript-Ausführung, Seiten-Rendering und andere Ereignisse für einen benutzerdefinierten Zeitraum, die alle im WebKit-Inspector angezeigt werden können.
- Leere Caches: Durch Klicken auf diese Option werden alle in Safari gespeicherten Caches gelöscht, nicht nur die standardmäßigen Website-Cachedateien.
- Caches deaktivieren: Wenn die Zwischenspeicherung deaktiviert ist, werden Ressourcen jedes Mal, wenn eine Zugriffsanforderung gestellt wird, von einer Website heruntergeladen, anstatt den lokalen Zwischenspeicher zu verwenden.
- Erlaube JavaScript aus dem intelligenten Suchfeld: Diese Funktion ist aus Sicherheitsgründen standardmäßig deaktiviert. Sie können URLs mit JavaScript in die Adressleiste von Safari eingeben.
- SHA-1-Zertifikate als unsicher behandeln: Abkürzung für Secure Hash Algorithm, die SHA-1-Hash-Funktion erwies sich als weniger sicher als ursprünglich angenommen. Daher wurde diese Option in Safari 9 hinzugefügt.
