Was man wissen sollte
- Zur Aktivierung: Einstellungen > Erweitert Registerkarte > auswählen Entwicklungsmenü in der Menüleiste anzeigenein.
- Zur Verwendung: Wählen Sie Entwickeln > Enter Responsive Design Mode in der Safari-Symbolleiste.
Dieser Artikel erklärt, wie man den Responsive Design Mode in Safari 9 bis Safari 13, in OS X El Capitan bis macOS Catalina aktiviert.
So aktivieren Sie den Responsive Design-Modus in Safari
So aktivieren Sie den Safari Responsive Design Mode zusammen mit anderen Safari-Entwicklertools:
-
Gehen Sie zum Menü Safari und wählen Sie Einstellungen.
Drücken Sie die Tastenkombination Command+ , (Komma), um schnell auf die Einstellungen zuzugreifen.
-
Wählen Sie im Dialogfeld Einstellungen die Registerkarte Erweitert aus.
Image -
Aktivieren Sie unten im Dialogfeld das Kontrollkästchen Entwicklungsmenü in der Menüleiste anzeigen Kontrollkästchen.
Image -
Du siehst jetzt Develop in der oberen Menüleiste von Safari.
Image -
Wählen Sie Entwickeln > Aktivieren Sie den Responsive Design-Modus in der Safari-Symbolleiste.
Drücken Sie die Tastenkombination Option+ Befehl+ R, um schnell in den Responsive-Design-Modus zu wechseln.
Image -
Die aktive Webseite wird im Responsive Design-Modus angezeigt. Wählen Sie oben auf der Seite ein iOS-Gerät oder eine Bildschirmauflösung aus, um zu sehen, wie die Seite gerendert wird.
Image -
Alternativ können Sie sehen, wie Ihre Webseite auf verschiedenen Plattformen dargestellt wird, indem Sie das Dropdown-Menü über den Auflösungssymbolen verwenden.
Image
Safari-Entwicklertools
Zusätzlich zum Responsive Design-Modus bietet das Safari-Menü "Entwickeln" weitere nützliche Optionen.
Seite öffnen mit
Öffnet die aktive Webseite in jedem derzeit auf dem Mac installierten Browser.
Benutzeragent
Wenn Sie den User Agent ändern, können Sie einer Website vorgaukeln, dass Sie einen anderen Browser verwenden.
Webinspektor anzeigen
Zeigt alle Ressourcen einer Webseite an, einschließlich CSS-Informationen und DOM-Metriken.
Fehlerkonsole anzeigen
Zeigt JavaScript-, HTML- und XML-Fehler und -Warnungen an.
Seitenquelle anzeigen
Lässt Sie den Quellcode für die aktive Webseite anzeigen und den Seiteninh alt durchsuchen.
Seitenressourcen anzeigen
Zeigt Dokumente, Skripte, CSS und andere Ressourcen der aktuellen Seite an.
Snippet-Editor anzeigen
Lässt Sie Codefragmente bearbeiten und ausführen. Diese Funktion ist aus Testsicht nützlich.
Extension Builder anzeigen
Hilft Ihnen beim Erstellen von Safari-Erweiterungen, indem Sie Ihren Code entsprechend packen und Metadaten anhängen.
Timeline-Aufzeichnung starten
Ermöglicht die Aufzeichnung von Netzwerkanfragen, JavaScript-Ausführung, Seitenwiedergabe und anderen Ereignissen im WebKit Inspector.
Leere Caches
Löscht alle gespeicherten Caches in Safari, nicht nur die Standard-Website-Cache-Dateien.
Caches deaktivieren
Bei deaktiviertem Caching werden Ressourcen bei jeder Zugriffsanfrage von einer Website heruntergeladen, anstatt den lokalen Cache zu verwenden.
JavaScript im intelligenten Suchfeld zulassen
Aus Sicherheitsgründen standardmäßig deaktiviert, erlaubt Ihnen diese Funktion, URLs mit JavaScript in die Safari-Adressleiste einzugeben.
