Ob Sie nun als Webentwickler den Quellcode einer Webseite analysieren oder einfach nur aus Neugierde den Aufbau einer Seite erkunden möchten, der HTML-Quellcode ist in Google Chrome leicht zugänglich. Es gibt zwei Hauptmethoden, um diesen Quelltext zu betrachten: die direkte Ansicht über „Seitenquelltext anzeigen“ und die detaillierte Untersuchung mithilfe der Entwicklertools.
Direkte Quellcodeansicht nutzen
Starten Sie zunächst Google Chrome und navigieren Sie zu der Webseite, deren HTML-Code Sie einsehen möchten. Klicken Sie dann mit der rechten Maustaste auf eine beliebige Stelle der Seite und wählen Sie im Kontextmenü „Seitenquelltext anzeigen“. Alternativ können Sie auch die Tastenkombination Strg + U verwenden, um den Quellcode in einem neuen Tab zu öffnen.
Ein neuer Tab wird geladen, der den gesamten, unformatierten HTML-Code der Webseite enthält. Diese Ansicht zeigt die vollständige Struktur der Seite, ist aber aufgrund der fehlenden Formatierung und Darstellung aller Elemente, einschließlich JavaScript und CSS, nicht immer leicht zu überblicken.
Die Suche nach bestimmten Elementen oder Codeabschnitten kann in dieser ungeordneten Darstellung mühsam sein, besonders bei komplexen Seiten.
Quellcode über die Entwicklertools inspizieren
Die Entwicklertools von Chrome bieten eine strukturiertere und übersichtlichere Methode zur Analyse des Quellcodes. Durch die zusätzliche Formatierung und die Möglichkeit, bestimmte Elemente auszublenden, wird der Code wesentlich lesbarer und leichter zu verstehen.
Öffnen Sie Chrome und navigieren Sie zur gewünschten Webseite. Drücken Sie dann die Tastenkombination Strg + Umschalttaste + i. Ein Bereich, die Entwicklertools, wird nun am Rand des Browserfensters angezeigt.
Sie können die einzelnen HTML-Elemente aufklappen, indem Sie auf den kleinen, grauen Pfeil klicken. So lassen sich einzelne Bereiche des Quellcodes gezielt untersuchen.
Wenn Sie nicht den kompletten Quellcode, sondern nur einen bestimmten Bereich untersuchen möchten, klicken Sie mit der rechten Maustaste direkt auf das entsprechende Element auf der Webseite und wählen Sie „Untersuchen“ im Kontextmenü.
Die Entwicklertools werden nun geöffnet und springen direkt zu dem Codeabschnitt, der das von Ihnen ausgewählte Element repräsentiert.
Die Position der Entwicklertools ist flexibel anpassbar. Sie können den Bereich nach unten, links, rechts verschieben oder auch in einem separaten Fenster abdocken. Dazu klicken Sie auf das Menüsymbol (die drei Punkte) und wählen die gewünschte Andockoption.
Das war’s. Sobald Sie die Codeansicht nicht mehr benötigen, schließen Sie entweder den „Quelltext anzeigen“-Tab oder klicken im Bereich „Entwicklertools“ auf das „X“, um zur Webseite zurückzukehren.