Safari Quelltext anzeigen – Lösung

Einführung

Das Anzeigen des Quelltexts einer Webseite ist eine wichtige Funktion für Webentwickler und Interessierte, die verstehen möchten, wie eine Webseite aufgebaut ist. Safari, der Standard-Webbrowser auf Apple-Geräten, bietet mehrere Möglichkeiten, den Quelltext zu betrachten. Dabei unterscheidet sich die Vorgehensweise leicht zwischen macOS und iOS. In dieser Erklärung zeigen wir, wie man den Quelltext in Safari auf verschiedenen Plattformen anzeigen kann. Außerdem erhalten Sie Informationen über die Entwicklertools und damit verbundene Einstellungen.

Quelltext auf macOS anzeigen

Auf einem Mac ist das Anzeigen des Quelltexts in Safari sehr einfach. Zunächst muss sichergestellt werden, dass die Entwickleroptionen aktiviert sind. Diese befinden sich im Menü Safari > Einstellungen > Erweitert. Dort gibt es einen Schalter namens Menü Entwickler in der Menüleiste anzeigen, den Sie aktivieren sollten. Anschließend erscheint im oberen Menü eine neue Kategorie namens Entwickler.

Nachdem diese Option aktiviert ist, kann der Quelltext auf verschiedene Weise angezeigt werden. Eine Möglichkeit ist es, mit der rechten Maustaste (bzw. mit zwei Fingern auf dem Trackpad) auf die Webseite zu klicken und die Option Seitenquelltext anzeigen auszuwählen. Alternativ kann man das Menü Entwickler anklicken und dort Seitenquelltext anzeigen wählen. Auch die Tastenkombination Option + Command + U öffnet den Quelltext schnell.

Das Quelltextfenster öffnet sich in einem neuen Tab mit dem reinen HTML-Code der aktuellen Seite. Hier kann man den Code lesen, speichern oder kopieren. Es handelt sich dabei allerdings um eine statische Ansicht des ursprünglichen HTML-Codes.

Entwicklertools in Safari

Safari bietet ein umfassendes Entwicklermenü, das nicht nur den Quelltext anzeigt, sondern auch umfangreiche Werkzeuge zur Analyse und Bearbeitung von Webseiten bereithält. Innerhalb des Entwicklermenüs finden Sie Optionen wie Element untersuchen, welches eine Live-Ansicht des DOM der Webseite zeigt, sowie Werkzeuge zum Debuggen von JavaScript, zur Performance-Analyse und zum Testen von Responsivität.

Das Entwicklermenü ist besonders wichtig für Webentwickler, die dynamische Änderungen am HTML oder CSS einer Seite vornehmen möchten, da der reine Quelltext nur den ursprünglichen Zustand darstellt. Über Element untersuchen können Sie direkt die Struktur der Seite inspizieren und verändern.

Quelltext auf iOS-Geräten anzeigen

Auf iPhones oder iPads ist das Anzeigen des Quelltexts in Safari nicht direkt in der App integriert, da Apple die Entwicklertools auf iOS stark eingeschränkt hat. Es gibt verschiedene Workarounds:

Man kann eine Webseite mit einem speziellen Bookmarklet öffnen, das den Quelltext der aktuell geladenen Seite anzeigt. Alternativ können jene, die Zugriff auf einen Mac haben, Safari auf dem Mac mit dem verbundenen iOS-Gerät verwenden, um über das Entwicklermenü am Mac den Quelltext der Seite auf dem mobilen Gerät zu inspizieren.

Zusätzlich bieten manche Apps von Drittanbietern an, den Quelltext von Webseiten anzuzeigen, oder man kann Webseiten durch Online-Dienste laufen lassen, die den Quelltext darstellen.

Fazit

Das Anzeigen des Quelltexts in Safari ist auf dem Mac relativ unkompliziert und mit wenigen Schritten möglich. Dazu muss man im Safari-Einstellungsmenü das Entwicklermenü aktivieren und kann dann den Quelltext über das Kontextmenü oder Tastenkombinationen einsehen. Die Entwicklertools von Safari bieten darüber hinaus umfangreiche Funktionen zur Analyse und Modifikation.

Auf iOS-Geräten ist das Anzeigen des Quelltexts eingeschränkt, doch mit Hilfsmitteln wie Bookmarklets, Drittanbieter-Apps oder der Verbindung zu einem Mac lassen sich auch dort Lösungen finden. Das Wissen darum, wie man den Quelltext betrachtet, eröffnet tiefe Einblicke in die Funktionsweise von Webseiten und stärkt das Verständnis für Webtechnologien.