Jeder gängige Internetbrowser ermöglicht es Benutzern, den HTML-Quellcode jeder besuchten Webseite anzuzeigen. Die folgenden Abschnitte enthalten Informationen zu den verschiedenen Möglichkeiten, den Quellcode in jedem der gängigen Browser anzuzeigen. Um fortzufahren, wählen Sie einen Eintrag aus der Liste unten und folgen Sie den Anweisungen.
Einführende Informationen
Beim Anzeigen des Quellcodes einer Webseite werden die vom Server verarbeiteten Informationen und der Code nicht angezeigt. Beispielsweise verarbeitet eine Suchmaschine Informationen auf einem Server und zeigt die Ergebnisse dann auf einer Webseite an. Mit anderen Worten, Sie können den Code anzeigen, aus dem die Ergebnisseite besteht, aber Sie können den Quellcode der Suchmaschine nicht anzeigen.
Diese Regel gilt für alle serverseitigen Skripts, SSI und Programmiercode. Daher können Sie den Quellcode eines Skripts, der in Suchmaschinen, Foren, Umfragen, Chats usw. verwendet wird, nicht anzeigen. Außerdem kann das Kopieren der Informationen aus dem Quellcode Fehler verursachen oder Sie zu der Seite zurückleiten, von der Sie die Informationen kopiert haben.
Google Chrome
Um den Quellcode einer Webseite in Google Chrome anzuzeigen, verwenden Sie eine der folgenden Methoden.
Nur Quellcode anzeigen
Methode eins
Um nur den Quellcode anzuzeigen, drücken Sie die Tastenkombination Strg+U auf der Tastatur Ihres Computers.
Methode zwei
Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Webseite und wählen Sie im angezeigten Popup-Menü Seitenquelle anzeigen aus.
Seitenquelle mit Elementen anzeigen
- Öffnen Sie Chrome und navigieren Sie zu der Webseite, deren Quellcode Sie anzeigen möchten.
- Klicken Sie auf Google Chrome anpassen und steuern
Symbol in der oberen rechten Ecke des Browserfensters. - Wählen Sie im angezeigten Dropdown-Menü Weitere Tools und dann Entwicklertools aus.
- Klicken Sie auf die Registerkarte Elemente in der oberen linken Ecke des neuen Abschnitts, der unten auf dem Bildschirm angezeigt wird.
Wenn Sie in Chrome F12 oder Strg+Umschalt+I drücken, wird auch das interaktive Entwicklertool aufgerufen. Dieses Tool bietet viel mehr Interaktion mit dem Quellcode und den CSS-Einstellungen, sodass Benutzer sofort sehen können, wie sich Änderungen im Code auf die Webseite auswirken.
Mozilla-Firefox
Um den Quellcode einer Webseite in Mozilla Firefox anzuzeigen, verwenden Sie eine der folgenden Methoden.
Nur Quellcode anzeigen
Methode eins
Um nur den Quellcode anzuzeigen, drücken Sie Strg+U auf der Tastatur Ihres Computers.
Methode zwei
Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Webseite und wählen Sie im angezeigten Popup-Menü Seitenquelltext anzeigen aus.
Seitenquelle mit Elementen anzeigen
- Öffnen Sie Firefox und navigieren Sie zu der Webseite, deren Quellcode Sie anzeigen möchten.
- Klicken Sie auf das Menü
Symbol in der oberen rechten Ecke des Bildschirms. - Wählen Sie im Dropdown-Menü Webentwickler und dann im erweiterten Menü Toggle Tools aus.
- Klicken Sie auf die Registerkarte Inspektor in der oberen linken Ecke des Abschnitts, der unten auf dem Bildschirm angezeigt wird.
In Firefox wird durch Drücken von F12 oder Strg+Umschalt+I auch das interaktive Entwicklertool aufgerufen. Dieses Tool ermöglicht die Interaktion mit dem Quellcode und den CSS-Einstellungen, sodass Benutzer in Echtzeit sehen können, wie sich Änderungen im Code auf die Webseite auswirken.
Zeigen Sie einen Abschnitt des Quellcodes der Seite an
-
Markieren Sie den Teil einer Webseite, für den Sie den Quellcode anzeigen möchten.
-
Klicken Sie mit der rechten Maustaste auf den hervorgehobenen Abschnitt und wählen Sie Auswahlquelle anzeigen.
Sie können das Firebug-Add-On verwenden, um den Quellcode einer Seite anzuzeigen und zu bearbeiten und die Änderungen live über den Browser anzuzeigen.
Microsoft Edge
Verwenden Sie eine der folgenden Methoden, um den Quellcode einer Webseite in Microsoft Edge anzuzeigen.
Nur Quellcode anzeigen
Methode eins
Um nur den Quellcode anzuzeigen, drücken Sie Strg+U auf der Tastatur Ihres Computers.
Methode zwei
Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Webseite und wählen Sie im angezeigten Popup-Menü Seitenquelle anzeigen aus.
Seitenquelle mit Elementen anzeigen
- Öffnen Sie Microsoft Edge und navigieren Sie zu der Webseite, deren Quellcode Sie anzeigen möchten.
- Klicken Sie auf Einstellungen und mehr
Symbol in der oberen rechten Ecke des Bildschirms. - Bewegen Sie Ihre Maus im Dropdown-Menü über Weitere Tools und wählen Sie im erweiterten Menü Entwicklertools aus.
- Klicken Sie oben im Fenster, das auf der rechten Seite des Bildschirms erscheint, auf die Registerkarte Elemente.
In Microsoft Edge wird durch Drücken von F12 oder Strg+Umschalt+I auch das interaktive Entwicklertool aufgerufen. Dieses Tool ermöglicht die Interaktion mit dem Quellcode und den CSS-Einstellungen, sodass Benutzer in Echtzeit sehen können, wie sich Änderungen im Code auf die Webseite auswirken.
Microsoft Internet Explorer
Um den Quellcode einer Webseite in Microsoft Internet Explorer anzuzeigen, verwenden Sie eine der folgenden Methoden.
Nur Quellcode anzeigen
Methode eins
Um nur den Quellcode anzuzeigen, drücken Sie Strg+U auf der Tastatur Ihres Computers.
Methode zwei
Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Webseite und wählen Sie im angezeigten Popup-Menü Quelle anzeigen aus.
Seitenquelle mit Elementen anzeigen
- Öffnen Sie den Internet Explorer und navigieren Sie zu der Webseite, deren Quellcode Sie anzeigen möchten.
- Klicken Sie auf Extras
in der oberen rechten Ecke. - Wählen Sie F12-Entwicklertools aus dem Dropdown-Menü aus.
- Klicken Sie auf die Registerkarte DOM Explorer in der oberen linken Ecke des Entwicklertools-Menüs.
Wenn Sie im Internet Explorer F12 drücken, wird das DOM-Tool aufgerufen. Dieses Tool ermöglicht die Interaktion mit dem Quellcode und den CSS-Einstellungen, sodass Benutzer sofort sehen können, wie sich Änderungen im Code auf die Webseite auswirken.
Safari
In Safari müssen Sie zum Anzeigen des Quellcodes einer Webseite die Entwickleroptionen aktivieren. Die folgenden Abschnitte zeigen Ihnen, wie Sie diese Funktion aktivieren und dann den Quellcode einer Webseite anzeigen.
Zugriff auf Entwickleroptionen in Safari
- Öffnen Sie den Safari-Browser.
- Auswählen
aus der Menüleiste in der oberen linken Ecke des Bildschirms. - Wählen Sie im angezeigten Dropdown-Menü Einstellungen aus.
- Klicken Sie auf die Registerkarte Erweitert und aktivieren Sie das Kontrollkästchen neben Entwicklungsmenü in der Menüleiste anzeigen.
- Sie sollten jetzt die Entwicklerauswahl in der Apple-Menüleiste oben auf dem Bildschirm sehen.
Anzeigen des Quellcodes
Sie müssen die Entwickleroptionen aktiviert haben, damit die folgenden Schritte funktionieren.
Methode eins
- Öffnen Sie Safari und navigieren Sie zu der Webseite, deren Quellcode Sie anzeigen möchten.
- Klicken Sie in der Apple-Menüleiste oben auf dem Bildschirm auf die Entwicklungsauswahl und wählen Sie im Dropdown-Menü die Option Seitenquelltext anzeigen aus.
- Klicken Sie in der Mitte des Bildschirms oben im Abschnitt „Entwicklertools“ auf die Registerkarte „Elemente“.
Methode 2
Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Webseite und wählen Sie im angezeigten Popup-Menü Seitenquelle anzeigen aus.
Sobald die Entwickleroptionen aktiviert sind, können Sie auch drücken Befehl+Option+U, um den Quellcode einer Seite anzuzeigen.
Oper
Um den Quellcode einer Webseite in Opera anzuzeigen, verwenden Sie eine der folgenden Methoden.
Nur Quellcode anzeigen
Methode eins
Um nur den Quellcode anzuzeigen, drücken Sie Strg+U auf der Tastatur Ihres Computers.
Methode zwei
Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Webseite und wählen Sie Seitenquelle aus dem angezeigten Popup-Menü.
Seitenquelle mit Elementen anzeigen
- Öffnen Sie Opera und navigieren Sie zu der Webseite, deren Quellcode Sie anzeigen möchten.
- Klicken Sie auf die Oper
Symbol in der oberen linken Ecke des Browserfensters. - Bewegen Sie Ihre Maus im Dropdown-Menü über Entwickler und wählen Sie im erweiterten Menü Entwicklertools aus.
- Klicken Sie oben im Fenster, das auf der rechten Seite des Bildschirms erscheint, auf die Registerkarte Elemente.
Wenn Sie das Entwickler-Untermenü nicht sehen, wählen Sie Weitere Tools → Entwicklermenü anzeigen. Klicken Sie dann auf die Menüschaltfläche wieder. Sie sollten jetzt den Entwicklereintrag aufgelistet sehen.
Wenn Sie in Opera F12 oder Strg+Umschalt+I drücken, wird auch das interaktive Entwicklertool aufgerufen. Dieses Tool ermöglicht die Interaktion mit dem Quellcode und den CSS-Einstellungen, sodass Benutzer in Echtzeit sehen können, wie sich Änderungen im Code auf die Webseite auswirken.
Android-Smartphone oder -Tablet mit Chrome
- Öffnen Sie den Google Chrome-Browser auf Ihrem Android-Telefon oder -Tablet.
- Öffnen Sie die Webseite, deren Quellcode Sie anzeigen möchten.
-
Tippen Sie einmal in die Adressleiste und bewegen Sie den Cursor an den Anfang der URL.
- Geben Sie view-source: ein und tippen Sie auf Enter oder Go.
Um beispielsweise den Code für unsere Homepage anzuzeigen, würden Sie view-source:https://www.computerhope.com eingeben
Wenn die obigen Schritte auf Ihrem Android-Telefon nicht funktionieren, verwenden Sie die Methode im Abschnitt iPhone oder iPad mit Safari. Derselbe Code funktioniert auf Android-Telefonen, die einzigen Unterschiede sind die Verwendung von Chrome anstelle von Safari und der Prozess zum Erstellen und Bearbeiten eines Lesezeichens.
Wenn Sie Schwierigkeiten haben, mit der oben beschriebenen Methode durch den Quellcode auf Ihrem Mobilgerät zu navigieren, sollten Sie auch ein Online-Tool in Betracht ziehen.
iPhone oder iPad mit Safari
Das Anzeigen des Quellcodes einer Webseite auf einem iPhone oder iPad erfordert etwas mehr Arbeit, ist aber möglich. Der Prozess erfordert, dass Sie ein Lesezeichen erstellen, ihm JavaScript-Code zuweisen und das Lesezeichen auf einer Webseite verwenden, um den Quellcode anzuzeigen.
Wenn Sie lieber eine App verwenden möchten, um den Quellcode einer Webseite anzuzeigen, können Sie die kostenlose View Source-App aus dem iOS App Store herunterladen.
Erstellen Sie ein Lesezeichen, um den Quellcode anzuzeigen
- Öffnen Sie den Safari-Browser auf Ihrem iPhone oder iPad.
- Greifen Sie auf eine beliebige Webseite zu, z. B. www.computerhope.com.
- Tippen Sie unten auf dem Bildschirm auf das Mehr-Symbol.
Sie können auch das Lesezeichensymbol unten auf dem Bildschirm gedrückt halten, bis ein Menü angezeigt wird.
- Tippen Sie im sich öffnenden Menü auf die Option Lesezeichen hinzufügen.
- Tippen Sie in das Lesezeichen-Namensfeld, tippen Sie auf das x auf der rechten Seite, um den aktuellen Namen zu löschen, und geben Sie als neuen Namen „Webseiten-Quellcode anzeigen“ ein.
- Tippen Sie oben rechts auf Speichern, um das Lesezeichen zu speichern.
- Kopieren Sie das gesamte JavaScript-Code-Snippet unten.
javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace="pre-wrap";b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
- Greifen Sie in Safari auf die Lesezeichen zu, indem Sie auf das Lesezeichensymbol unten auf dem Bildschirm tippen.
- Suchen Sie das Lesezeichen, das Sie oben erstellt haben, und halten Sie dann Ihren Finger auf das Lesezeichen, bis sich unten auf dem Bildschirm ein Menü öffnet.
- Tippen Sie im Menü auf die Option Bearbeiten.
- Tippen Sie auf dem Bildschirm Lesezeichen bearbeiten auf die URL und dann auf das x, um die URL zu löschen, und fügen Sie dann den JavaScript-Code aus Schritt 7 in das URL-Feld ein.
- Tippen Sie unten rechts auf dem Bildschirm auf Fertig, um die Lesezeichenänderungen zu speichern.
Verwenden Sie ein Lesezeichen, um den Quellcode anzuzeigen
Nachdem Sie das Lesezeichen oben erstellt haben, können Sie nun den Quellcode für eine Webseite anzeigen.
- Greifen Sie in Safari auf die Webseite zu, auf der Sie den Quellcode anzeigen möchten.
- Tippen Sie unten auf dem Bildschirm auf das Lesezeichen-Symbol.
- Tippen Sie auf das von Ihnen erstellte Lesezeichen Quellcode der Webseite anzeigen.
Ein neuer Safari-Browsing-Tab wird geöffnet und zeigt den Quellcode für die Webseite an.
Wenn Sie mit der obigen Methode Schwierigkeiten haben, auf Ihrem Mobilgerät durch den Quellcode zu navigieren, sollten Sie auch die Verwendung eines Online-Tools in Betracht ziehen.
So schließen Sie die Quellcodeseite oder das Tool
Wenn Sie sich den Quellcode auf einer Webseite angesehen haben, möchten Sie sie vielleicht verlassen oder schließen. Das Schließen des Quellcodes hängt von der Methode ab, mit der Sie ihn geöffnet haben.
- Wenn Sie die Strg+U-Methode (außer Edge) oder die Rechtsklick-Methode verwendet haben, schließen Sie den neuen Tab, der oben in Ihrem Browserfenster geöffnet wurde.
- Wenn Sie die Entwicklermethode verwendet haben (mit F12 oder Strg+Umschalt+I), drücken Sie dieselben Tasten erneut oder klicken Sie auf die
Symbol in der oberen rechten Ecke des Werkzeugfensters.
Verwenden Sie ein Online-Tool, um den Quellcode anzuzeigen
Neben der Verwendung eines Browsers gibt es mehrere Online-Tools, mit denen Sie den Quellcode einer beliebigen Webseite anzeigen können. Diese Tools können hilfreich sein, da die meisten den Code formatieren, stilisieren und hervorheben können, um ihn leichter lesbar zu machen. Nachfolgend finden Sie eine kurze Liste einiger dieser Tools:
- Seitenquelle anzeigen
- Code Beautify-Quellcode-Viewer
- HTML-Viewer
