Inhalt
- Greifen Sie im Apple-Webbrowser auf Entwicklertools zu
- So aktivieren Sie den Responsive Design-Modus in Safari
- Safari-Entwicklertools
Greifen Sie im Apple-Webbrowser auf Entwicklertools zu
Es ist eine wesentliche Aufgabe für Webentwickler, sicherzustellen, dass Websites und Web-Apps eine Vielzahl von Geräten und Plattformen unterstützen. Der Safari-Webbrowser von Apple enthält einen Responsive Design-Modus, mit dem Sie eine Vorschau der Darstellung Ihrer Website bei verschiedenen Bildschirmauflösungen und auf verschiedenen iPad-, iPhone- und iPod touch-Versionen anzeigen können.
Die Anweisungen in diesem Artikel gelten für Safari 13 für macOS. Der Responsive Design-Modus ist in der Windows-Version nicht verfügbar.
So aktivieren Sie den Responsive Design-Modus in Safari
So aktivieren Sie die Entwicklertools von Safari und den Responsive Design-Modus:
-
Wählen Safari > Einstellungen in der Safari-Symbolleiste.
Sie können auch die Tastenkombination verwenden Befehl+Komma (,) um auf das Menü Einstellungen zuzugreifen.
-
Wählen Sie im Menü Einstellungen die Option Fortgeschrittene Tab und aktivieren Sie das Kontrollkästchen neben Menü "Entwickeln" in der Menüleiste anzeigen. Eine neue Option sollte jetzt in der Safari-Symbolleiste oben auf dem Bildschirm verfügbar sein.
-
Wählen Sich entwickeln > Aktivieren Sie den Responsive Design-Modus in der Safari-Symbolleiste.
Sie können auch die Tastenkombination verwenden Möglichkeit+Befehl+R. um in den Responsive Design-Modus zu wechseln.
-
Die aktive Webseite sollte jetzt im Responsive Design-Modus angezeigt werden. Wählen Sie oben auf der Seite ein iOS-Gerät oder eine Bildschirmauflösung aus, um zu sehen, wie die Seite gerendert wird.
Sie können Safari auch anweisen, verschiedene Benutzeragenten über das Dropdown-Menü direkt über den Auflösungssymbolen zu simulieren.
Safari-Entwicklertools
Neben dem Responsive Design-Modus bietet das Safari-Menü "Entwickeln" viele weitere nützliche Optionen, darunter:
- Seite öffnen mit: Öffnen Sie die aktive Webseite in einem anderen Browser, der derzeit auf Ihrem Mac installiert ist.
- User-Agent: Das Ändern des Benutzeragenten führt dazu, dass Webserver Ihren Browser als etwas anderes als Safari identifizieren.
- Verbinden Sie den Web Inspector: Zeigt alle Ressourcen einer Webseite an, einschließlich CSS-Informationen und DOM-Metriken.
- Fehlerkonsole anzeigen: Zeigen Sie JavaScript-, HTML- und XML-Fehler und -Warnungen an.
- Seitenquelle anzeigen: Anzeigen und Durchsuchen des Quellcodes der aktiven Webseite.
- Seitenressourcen anzeigen: Zeigen Sie Dokumente, Skripte, CSS und andere Ressourcen auf der aktuellen Seite an.
- Snippet-Editor anzeigen: Bearbeiten und Ausführen von Codefragmenten. Diese Funktion ist aus Testsicht sehr nützlich.
- Show Extension Builder: Erstellen Sie Ihre eigenen Safari-Erweiterungen, indem Sie Ihren Code entsprechend verpacken und Metadaten anhängen.
- Starten Sie die Timeline-Aufzeichnung: Zeichnen Sie Netzwerkanforderungen, JavaScript-Ausführung, Seitenrendering und andere Ereignisse im WebKit Inspector auf.
- Leere Caches: Löschen Sie alle in Safari gespeicherten Caches, nicht nur die Standard-Website-Cache-Dateien.
- Caches deaktivieren: Wenn das Caching deaktiviert ist, werden Ressourcen jedes Mal von einer Website heruntergeladen, wenn eine Zugriffsanforderung gestellt wird, anstatt den lokalen Cache zu verwenden.
- JavaScript aus dem intelligenten Suchfeld zulassen: Aus Sicherheitsgründen standardmäßig deaktiviert. Mit dieser Funktion können Sie URLs mit JavaScript in die Adressleiste von Safari eingeben.
- Behandeln Sie SHA-1-Zertifikate als unsicher: Kurz für Secure Hash Algorithm, die SHA-1-Hash-Funktion hat sich als weniger sicher erwiesen als ursprünglich angenommen, daher wurde diese Option in Safari hinzugefügt.
