Quellcode einer Website in Google Chrome anzeigen – Eine Schritt-für-Schritt-Anleitung

Hier ist ein umfassendes Tutorial, wie du den Quellcode einer Website im Google Chrome Browser anzeigen kannst.

Der Blick in den Quellcode (HTML) einer Website ist für Entwickler, Designer und SEO-Experten ein unverzichtbares Werkzeug. Google Chrome bietet dafür verschiedene einfache Möglichkeiten.

Methode 1: Per Rechtsklick (Die einfachste Methode)

Diese Methode eignet sich am besten, wenn du schnell den gesamten HTML-Code der Seite in einem neuen Tab sehen möchtest.

1. Öffne Google Chrome und besuche die gewünschte Website.
2. Mache einen Rechtsklick auf eine beliebige, leere Stelle der Seite (klicke nicht auf Bilder oder Links).
3. Wähle im Kontextmenü den Punkt „Seitenquelltext anzeigen“.
4. Es öffnet sich ein neuer Tab mit dem vollständigen, unformatierten HTML-Code der Seite.

Methode 2: Tastenkombination (Der schnellste Weg)

Wenn du Zeit sparen möchtest, kannst du den Quellcode direkt über ein Tastenkürzel aufrufen:

• Windows / Linux: Drücke Strg + U
• macOS: Drücke Command (⌘) + Option (⌥) + U

Methode 3: Über die Adresszeile (Der URL-Trick)

Du kannst Chrome anweisen, den Quellcode anzuzeigen, indem du einen speziellen Befehl direkt in die Adresszeile eingibst:

1. Klicke in die Adresszeile (oben, wo die URL steht).
2. Schreibe direkt vor die Adresse das Präfix view-source:.
   • Beispiel: view-source:https://www.google.com
3. Drücke Enter.

Methode 4: Das Hauptmenü von Chrome

Falls du keine Tastenkombinationen nutzen möchtest, kannst du auch das Menü verwenden:

1. Klicke auf die drei vertikalen Punkte in der oberen rechten Ecke des Browsers.
2. Bewege die Maus auf den Punkt „Weitere Tools“.
3. Wähle im Untermenü „Seitenquelltext anzeigen“.

Profi-Tipp: „Untersuchen“ vs. „Seitenquelltext“

Es gibt einen wichtigen Unterschied zwischen dem Seitenquelltext und dem Tool Untersuchen (DevTools):

• Seitenquelltext anzeigen (Strg + U): Zeigt dir den reinen HTML-Code so an, wie er vom Server an deinen Browser gesendet wurde. Er ist statisch.
• Untersuchen (F12 oder Rechtsklick -> Untersuchen): Öffnet die Entwicklertools. Hier siehst du das "Live-DOM", also den Code, wie er aktuell vom Browser interpretiert wird (inklusive Änderungen durch JavaScript). Dies ist ideal, um gezielt einzelne Elemente (wie Buttons oder Bilder) zu analysieren.

Zusammenfassung der Shortcuts