Safari Entwicklerkonsole für Responsive Webdesign aktivieren

Ich wurde heute gefragt, wie man die Entwickler-Ansicht mit Safari aktiviert. Grundgedanke war die Prüfung von Websites in der Mobilen Ansicht. Um Responsive Webdesign zu betreiben, kann man heute in den verschiedensten Browsern die sogenannte Entwicklerkonsole nutzen. Das erspart einem auf jedem Endgerät manuell das Design zu prüfen.

Da Websites zum Teil auf verschiedenen Browsern anders ausschauen, sollten wir auch den Umgang mit der Entwicklerkonsole in Safari kennen.

Entwicklerkonsole auf dem Safari aktivieren

  • Gehe oben Links auf den Reiter Safari
  • Einstellungen
  • Erweitert
  • Haken bei „Menü Entwickler in der Menüleiste anzeigen“

Jetzt wird oben in der Menüleiste der Reiter Entwickler angezeigt. Dort findest Du den Punkt „in Modus Responsive Design wechseln“.

Videoerklärung

Hier noch ein Video zur besseren Veranschaulichung.

Entwicklerconsole in Firefox und Chrome

Vollständigkeitshalber: Bei Firefox und Chrome kommt man über die F12 Taste in die Entwicklerkonsole. Um zum Responsive Tab zu kommen, klickt man beim Chrome Links, beim Firefox Rechts auf die Schaltfläche „Bildschirmgrößen testen„.

Chrome Entwicklerkonsole
Chrome im linken Bereich
Firefox Entwicklerkonsole
Firefox im rechten Bereich

Hinterlasse eine Anmerkung

Datenschutz
Lightweb-media Burghardt, Besitzer: Joel Burghardt (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
Lightweb-media Burghardt, Besitzer: Joel Burghardt (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.