Die Webseite, die Sie gerade lesen, besteht unter anderem aus Quellcode. Das ist die Information, die Ihr Webbrowser herunterlädt und in das übersetzt, was Sie gerade lesen.
Die meisten Webbrowser bieten die Möglichkeit, den Quellcode einer Webseite ohne zusätzliche Software anzuzeigen, unabhängig davon, auf welchem Gerätetyp Sie sich gerade befinden.
Einige bieten sogar erweiterte Funktionen und Strukturen, sodass das Lesen von HTML- und anderem Programmcode auf der Seite vereinfacht wird.
Warum möchten Sie den Quellcode sehen?
Es gibt mehrere Gründe, warum Sie den Quellcode einer Seite sehen möchten. Wenn Sie ein Webentwickler sind, möchten Sie vielleicht einen Blick auf den speziellen Stil oder die Implementierung eines anderen Programmierers werfen. Möglicherweise befinden Sie sich in der Qualitätssicherung und versuchen herauszufinden, warum ein bestimmter Teil einer Webseite so gerendert wird, wie er ist.
Sie könnten auch ein Anfänger sein, der versucht, zu lernen, wie Sie Ihre eigenen Seiten codieren, und nach einigen Beispielen aus der realen Welt sucht. Natürlich ist es möglich, dass Sie nicht in eine dieser Kategorien fallen und die Quelle nur aus Neugier betrachten möchten.
Nachfolgend finden Sie Anweisungen zum Anzeigen von Quellcode in Ihrem Browser Ihrer Wahl.
Google Chrome
Läuft auf: Chrome OS, Linux, Mac OS, Windows
Die Desktopversion von Chrome bietet drei verschiedene Methoden zum Anzeigen des Quellcodes einer Seite. Die erste und einfachste Methode kann mit der folgenden Tastenkombination verwendet werden: STRG + U (BEFEHLSTASTE + WAHLTASTE + U auf macOS).
Wenn diese Verknüpfung gedrückt wird, wird eine neue Browser-Registerkarte mit HTML-Code und anderem Code für die aktive Seite geöffnet. Diese Quelle ist farbcodiert und so strukturiert, dass das Unterteilen und Finden der gewünschten Informationen vereinfacht wird. Sie können auch dorthin gelangen, indem Sie den folgenden Text in die Adressleiste von Chrome eingeben, der an die linke Seite der URL der Webseite angehängt wird, und die Option auswählen Eingeben Schlüssel: Quelltext anzeigen: (d. h. Ansichtsquelle: https: //www.Go-Travels.com).
Die dritte Methode ist über die Entwicklertools von Chrome, mit denen Sie tiefer in den Code der Seite eintauchen und ihn zu Test- und Entwicklungszwecken im Handumdrehen anpassen können. Die Benutzeroberfläche für Entwickler-Tools kann mit dieser Tastenkombination geöffnet und geschlossen werden: STRG + UMSCHALT + I (BEFEHLSTASTE + OPTION + I auf macOS). Sie können sie auch über den folgenden Pfad starten.
-
Wählen Sie die Hauptmenü-Schaltfläche von Chrome aus, die sich in der oberen rechten Ecke befindet und durch drei vertikal ausgerichtete Punkte dargestellt wird.
-
Wenn das Dropdown-Menü angezeigt wird, bewegen Sie den Mauszeiger über das Symbol Mehr Werkzeuge Möglichkeit.
-
Wenn das Untermenü angezeigt wird, wählen Sie Entwicklerwerkzeuge.
Android
Um den Quellcode einer Webseite in Chrome für Android anzuzeigen, müssen Sie einfach den folgenden Text vor der Adresse (oder URL) anhängen und absenden: Quelltext anzeigen:. Ein Beispiel dafür wäre Ansichtsquelle: https: //www.Go-Travels.com . HTML und anderer Code von der betreffenden Seite wird sofort im aktiven Fenster angezeigt.
iOS
Es gibt zwar keine systemeigenen Methoden zum Anzeigen von Quellcode mithilfe von Chrome auf Ihrem iPad, iPhone oder iPod touch. Die einfachste und effektivste Methode ist die Verwendung einer Drittanbieterlösung wie der View Source-App.
Im App Store für 0,99 US-Dollar verfügbar, fordert View Source Sie auf, die URL der Seite einzugeben (oder sie in die Adressleiste von Chrome zu kopieren / einzufügen, was manchmal der einfachste Weg ist). Neben dem Anzeigen von HTML und anderem Quellcode enthält die App Registerkarten, auf denen einzelne Seitenelemente, das Document Object Model (DOM) sowie die Seitengröße, Cookies und andere interessante Details angezeigt werden.
Microsoft Edge
Läuft auf: Windows
Mit dem Edge-Browser können Sie den Quellcode der aktuellen Seite über die Developer Tools-Benutzeroberfläche anzeigen, analysieren und sogar bearbeiten. Um auf dieses praktische Toolset zuzugreifen, können Sie eine der folgenden Tastenkombinationen verwenden: F12 oder STRG + U. Wenn Sie stattdessen die Maus bevorzugen, klicken Sie auf die Menüschaltfläche von Edge (drei Punkte in der oberen rechten Ecke) und wählen Sie die Option F12-Entwicklertools Option aus der Liste.
Nachdem die Entwicklungstools zum ersten Mal ausgeführt wurden, fügt Edge dem Kontextmenü des Browsers zwei zusätzliche Optionen hinzu (Zugriff durch Klicken mit der rechten Maustaste auf eine beliebige Stelle innerhalb einer Webseite): Element prüfen und Quelltext anzeigendas letztere öffnet die Debugger Teil der Dev Tools-Benutzeroberfläche mit Quellcode gefüllt.
Mozilla Firefox
Läuft auf: Linux, Mac OS, Windows
Um den Quellcode einer Seite in der Desktop-Version von Firefox anzuzeigen, können Sie drücken STRG + U (BEFEHLSTASTE + U auf macOS) auf Ihrer Tastatur, wodurch eine neue Registerkarte mit HTML-Code und anderem Code für die aktive Webseite geöffnet wird.
Wenn Sie den folgenden Text direkt in die Adressleiste von Firefox direkt links neben der URL der Seite eingeben, wird stattdessen dieselbe Quelle auf der aktuellen Registerkarte angezeigt: Quelltext anzeigen: ( d. h. Ansichtsquelle: https: //www.dotdash.com ).
Eine andere Möglichkeit, auf den Quellcode einer Seite zuzugreifen, sind die Entwickler-Tools von Firefox, auf die Sie folgendermaßen zugreifen können.
-
Wählen Sie die Hauptmenüschaltfläche aus, die sich in der oberen rechten Ecke Ihres Browserfensters befindet und durch drei horizontale Linien dargestellt wird.
-
Wenn das Popup-Menü angezeigt wird, klicken Sie auf Entwickler "Schraubenschlüssel-Symbol.
-
Das Web Developer-Kontextmenü sollte jetzt sichtbar sein. Wähle aus Seitenquelltext Möglichkeit.
Mit Firefox können Sie auch den Quellcode für einen bestimmten Teil einer Seite anzeigen und so Probleme leicht isolieren. Markieren Sie dazu zunächst mit der Maus den gewünschten Bereich. Klicken Sie dann mit der rechten Maustaste und wählen Sie Auswahlquelle anzeigen aus dem Kontextmenü des Browsers.
Android
Das Anzeigen des Quellcodes in der Android-Version von Firefox ist erreichbar, wenn der URL der Webseite der folgende Text vorangestellt wird: Quelltext anzeigen:. Um beispielsweise den HTML-Quelltext für Dotdash anzuzeigen, würden Sie den folgenden Text in die Adressleiste des Browsers senden: Ansichtsquelle: https: //www.dotdash.com .
iOS
Die empfohlene Methode zum Anzeigen des Quellcodes von Webseiten auf Ihrem iPad, iPhone oder iPod touch ist die View Source App, die im App Store für 0,99 $ erhältlich ist. Obwohl nicht direkt in Firefox integriert, können Sie eine URL einfach aus dem Browser in die App kopieren und einfügen, um den HTML-Code und den anderen Code der betreffenden Seite anzuzeigen.
Apple Safari
Läuft auf iOS und MacOS
iOS
Obwohl Safari für iOS standardmäßig nicht die Möglichkeit bietet, Seitenquellen anzuzeigen, lässt sich der Browser nahtlos in die View Source-App integrieren, die im App Store für 0,99 US-Dollar erhältlich ist.
Kehren Sie nach der Installation dieser App eines Drittanbieters zum Safari-Browser zurück und tippen Sie auf die Schaltfläche Teilen, die sich am unteren Bildschirmrand befindet und durch ein Quadrat und einen Aufwärtspfeil dargestellt wird. Das iOS-Freigabeblatt sollte nun sichtbar sein und die untere Hälfte Ihres Safari-Fensters überlagern. Blättern Sie nach rechts und wählen Sie die Option Quelltext anzeigen Taste.
Eine farbcodierte, strukturierte Darstellung des Quellcodes der aktiven Seite sollte jetzt zusammen mit anderen Registerkarten angezeigt werden, auf denen Sie Seitenassets, Skripts usw. anzeigen können.
Mac OS
Um den Quellcode einer Seite in der Desktop-Version von Safari anzuzeigen, müssen Sie zunächst dessen aktivieren Entwickeln Speisekarte. Die folgenden Schritte führen Sie durch das Aktivieren dieses verborgenen Menüs und das Anzeigen des HTML-Quellcodes einer Seite.
-
Wählen Safari im Browser-Menü oben auf dem Bildschirm.
-
Wenn das Dropdown-Menü angezeigt wird, wählen Sie die Option Einstellungen Möglichkeit.
-
Die Einstellungen von Safari sollten jetzt sichtbar sein. Klicke auf das Erweitert Symbol, das sich ganz rechts in der obersten Reihe befindet.
-
Am Ende des Erweitert-Abschnitts befindet sich eine Option Entwicklungsmenü in der Menüleiste anzeigen, begleitet von einem leeren Kontrollkästchen. Aktivieren Sie dieses Kontrollkästchen einmal, um ein Häkchen zu setzen, und schließen Sie das Fenster "Voreinstellungen", indem Sie auf das rote "x" in der oberen linken Ecke klicken.
-
Wähle aus Entwickeln Menü oben auf dem Bildschirm.
-
Wenn das Dropdown-Menü angezeigt wird, wählen Sie Seitenquelle anzeigen. Sie können stattdessen auch die folgende Tastenkombination verwenden: BEFEHLSTASTE + WAHLTASTE + U.
Oper
Läuft auf: Linux, Mac OS, Windows
Um den Quellcode von der aktiven Webseite im Opera-Browser anzuzeigen, verwenden Sie die folgende Tastenkombination: STRG + U (BEFEHLSTASTE + WAHLTASTE + U auf macOS). Wenn Sie die Quelle lieber in die aktuelle Registerkarte laden möchten, geben Sie den folgenden Text links neben der URL der Seite in die Adressleiste ein und klicken Sie auf Geben Sie Folgendes ein: view-source: ( d. h. Ansichtsquelle: https: //www.Go-Travels.com ).
Mit der Desktop-Version von Opera können Sie auch HTML-Quell-, CSS- und andere Elemente anzeigen, indem Sie die integrierten Entwicklertools verwenden. Um diese Benutzeroberfläche zu starten, die standardmäßig auf der rechten Seite Ihres Browser-Hauptfensters angezeigt wird, drücken Sie die folgende Tastenkombination: STRG + UMSCHALT + I (BEFEHLSTASTE + OPTION + I auf macOS).
Auf das Developer Toolset von Opera können Sie auch über die folgenden Schritte zugreifen.
-
Wählen Sie das Opera-Logo aus, das sich in der oberen linken Ecke Ihres Browserfensters befindet.
-
Wenn das Dropdown-Menü angezeigt wird, bewegen Sie den Mauszeiger über das Symbol Mehr Werkzeuge Möglichkeit.
-
Klicke auf Entwicklermenü anzeigen.
-
Wählen Sie das Opera-Logo erneut aus.
-
Bewegen Sie den Cursor über das Dropdown-Menü Entwickler.
-
Wenn das Untermenü angezeigt wird, wählen Sie Entwicklerwerkzeuge.
Vivaldi
Es gibt mehrere Möglichkeiten, die Seitenquelle im Vivaldi-Browser anzuzeigen. Am einfachsten geht es über die STRG + U Tastenkombination, die den Code von der aktiven Seite in einer neuen Registerkarte darstellt.
Sie können auch den folgenden Text vor der URL der Seite einfügen, wodurch der Quellcode auf der aktuellen Registerkarte angezeigt wird: Quelltext anzeigen:. Ein Beispiel dafür wäre Ansichtsquelle: http: //www.dotdash.com .
Eine andere Methode sind die integrierten Entwicklerwerkzeuge des Browsers, auf die Sie durch Drücken von zugreifen können STRG + UMSCHALT + I Kombination oder durch die Entwicklerwerkzeuge Option im Browser Werkzeuge Menü - durch Auswahl von gefunden V Logo in der oberen linken Ecke. Die Verwendung der Entwicklungswerkzeuge ermöglicht eine viel tiefgreifendere Analyse der Seitenquelle.
