How To

So greifen Sie in Google Chrome auf den Quellcode zu: 4 einfache Methoden

Februar 14, 2026 4 Minuten Lesezeit Updated: Februar 14, 2026

Den Quellcode einer HTML-Seite zu analysieren, ist ein echter Vorteil, besonders wenn man sich mit Webentwicklung beschäftigt oder einfach nur verstehen möchte, wie eine Website funktioniert. Manchmal laden Websites Skripte oder Stylesheets dynamisch, sodass der sichtbare Code nicht die ganze Wahrheit ist. Hier erweist sich die Quellcodeanalyse als nützlich – insbesondere, wenn man Daten extrahieren oder einfach nur lernen möchte, wie etwas aufgebaut ist. Chrome macht es zwar recht einfach, aber ehrlich gesagt kann es etwas verwirrend sein, wenn man die Tools oder die Fachbegriffe nicht gewohnt ist.

Google Chrome bietet zwei einfache Möglichkeiten, einen Blick hinter die Kulissen zu werfen. Zum einen können Sie den HTML-Quelltext direkt vom Server öffnen, zum anderen interaktive Tools verwenden, die Ihnen den Code anzeigen, nachdem JavaScript und CSS der Website ausgeführt wurden. Das Tool „Untersuchen“ wird von Entwicklern häufig genutzt, um im Code zu navigieren. Es ist äußerst hilfreich beim Debuggen oder um komplexe Layouts zu verstehen. Beachten Sie jedoch: Manchmal entspricht der angezeigte Quelltext nicht exakt dem ursprünglich ausgelieferten Code, beispielsweise aufgrund von DOM-Manipulationen oder anderen Skripten. Es mag seltsam erscheinen, aber auf manchen Systemen kann es etwas dauern, bis „Untersuchen“ oder die Quelltextansicht geladen ist. In diesem Fall kann es helfen, die Seite neu zu laden, den Cache zu leeren oder Chrome zu schließen und neu zu starten.

So greifen Sie in Chrome auf den Seitenquelltext und die Entwicklertools zu.

Tastenkombinationen verwenden

Der schnellste Weg? Klicken Sie einfach Ctrl + Uauf Windows oder ⌘-Option-UMac. Dadurch öffnet sich sofort ein neuer Tab mit dem reinen HTML-Code. Auf manchen Websites ist dies der einfachste Weg, insbesondere wenn Sie den Code nur kurz überfliegen möchten. Beachten Sie jedoch, dass hier der Code so angezeigt wird, wie er vom Server gesendet wird, nicht so, wie er nach der Bearbeitung durch JavaScript oder Stylesheets aussieht. Für eine detailliertere Analyse ist das „Untersuchen“-Panel besser geeignet.

Verwendung des Kontextmenüs

Klicken Sie mit der rechten Maustaste irgendwo auf die Seite – wirklich überall – und Sie sehen Optionen wie „ Seitenquelltext anzeigen“ oder „Untersuchen“. Wählen Sie „ Seitenquelltext anzeigen“, um den unformatierten HTML-Code zu sehen, der sich beim Neuladen der Seite aktualisiert. Wenn Sie „Untersuchen“ wählen , öffnet sich das Chrome-Entwicklertools-Panel direkt an dem angeklickten Element. So können Sie den aktuellen Zustand dieses Elements nach dem Anwenden von Skripten oder Stilen sehen. Dies ist hilfreich bei der Fehlersuche in Bezug auf Layout oder dynamische Inhalte. Manchmal lädt dieses Panel nicht sofort. Warten Sie daher einen Moment oder laden Sie die Seite gegebenenfalls neu – Chrome reagiert hier manchmal etwas verzögert.

URL bearbeiten, um den Quelltext anzuzeigen

Für echte Technikbegeisterte und mobile Nutzer: Ihr könnt die URL selbst manipulieren. Klickt einfach auf die Adressleiste und fügt dann view-source:vor der Webseiten-URL `view-source:https://www.example.com` ein. Beispiel: Wenn die URL `https : //www.example.com` lautet, ändert ihr sie in `view-source:https://www.example.com` und drückt Enter. Dadurch wird der Quelltext sofort geladen. Ich weiß nicht genau, warum das funktioniert, aber es ist auf Mobilgeräten extrem nützlich, wenn die Browseroberfläche die Entwicklertools verdeckt. Ein etwas ungewöhnlicher Trick, aber er kann einem manchmal wirklich weiterhelfen.

Zugriff über das Chrome-Menü

Falls ein Rechtsklick nicht funktioniert, bietet das Chrome-Menü eine Alternative. Klicken Sie auf das Symbol mit den drei Punkten, navigieren Sie dann zu „Weitere Tools“ und wählen Sie „Entwicklertools“. Dadurch öffnet sich das Entwicklertools-Panel mit zahlreichen Funktionen wie „Elemente“, „Konsole“, „Netzwerk“ usw. Im Tab „Elemente“ werden Sie wahrscheinlich die meiste Zeit verbringen, um Live-DOMs zu untersuchen oder Stile anzupassen. Es mag anfangs etwas einschüchternd wirken, aber das Ausprobieren hier kann Ihnen viel über die Funktionsweise von Websites beibringen. Bonus: Sie können die Geräteemulation aktivieren und mobile Layouts direkt hier testen.

Sich mit den Grundlagen des Quellcodes vertraut machen

Sobald Sie den Code vor sich haben, hilft es enorm, die Grundlagen zu verstehen. HTML basiert auf Tags – wie <p> <p>für Absätze, <div><container> für Container oder <a><link> für Links. Diese Tags teilen dem Browser mit, um welchen Inhalt es sich handelt. Attribute innerhalb von Tags, wie <h1> classoder <h2>, liefern zusätzliche Informationen, beispielsweise zur Formatierung oder zur Identifizierung bestimmter Elemente.Die Webseite von MDN zu HTML-Elementenid ist beispielsweise eine gute Ressource, falls Sie nicht weiterwissen.

Denken Sie daran: Manchmal ist der Quellcode nicht vollständig. Skripte verändern DOM-Elemente nach dem Laden der Seite, daher kann die Seite in Echtzeit anders aussehen. Hier hilft die Ansicht „Untersuchen“, denn sie zeigt den *tatsächlichen* Code an, mit dem Sie interagieren, und nicht nur das ursprüngliche HTML.

Ganz ehrlich? Manchmal ist es etwas kompliziert – Skripte werden asynchron geladen, das DOM ändert sich ständig. Aber wenn man die Grundlagen versteht, wird das Debuggen und Lernen deutlich einfacher. Denn natürlich muss Chrome es einem etwas kompliziert machen.