Unabhängig davon, ob Sie als Webdesigner den Quellcode Ihrer Website debuggen oder nur neugierig sind, wie der Code einer Website aussieht, können Sie die HTML-Quelle direkt in Google Chrome anzeigen. Es gibt zwei Möglichkeiten, die HTML-Quelle anzuzeigen: Quelle anzeigen und Inspizieren mit Entwicklertools.
Quelltext anzeigen Seitenquelle anzeigen
Starten Sie Chrome und springen Sie zu der Webseite, auf der Sie den HTML-Quellcode anzeigen möchten. Klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf "Seitenquelle anzeigen" oder drücken Sie Strg + U, um die Quelle der Seite in einer neuen Registerkarte anzuzeigen.
Eine neue Registerkarte wird zusammen mit dem gesamten HTML-Code für die Webseite geöffnet, vollständig erweitert und unformatiert.
Wenn Sie nach einem bestimmten Element oder Teil in der HTML-Quelle suchen, ist die Verwendung der Ansichtsquelle mühsam und umständlich, insbesondere wenn die Seite viel JavaScript und CSS verwendet.
Überprüfen Sie die Quelle mithilfe der Entwicklertools
Diese Methode verwendet den Bereich "Entwicklertools" in Chrome und ist ein viel übersichtlicherer Ansatz zum Anzeigen des Quellcodes. HTML ist hier dank der zusätzlichen Formatierung und der Möglichkeit, Elemente, die Sie nicht sehen möchten, zu reduzieren, einfacher zu lesen.
Öffnen Sie Chrome und gehen Sie zu der Seite, die Sie überprüfen möchten. Drücken Sie dann Strg + Umschalt + i. Neben der angezeigten Webseite wird ein angedockter Bereich geöffnet.
Klicken Sie auf den kleinen grauen Pfeil neben einem Element, um es noch weiter zu erweitern.
Wenn Sie nicht standardmäßig den Code der gesamten Seite anzeigen möchten, sondern stattdessen ein bestimmtes Element im HTML-Code überprüfen möchten, klicken Sie mit der rechten Maustaste auf diesen Bereich auf der Seite und klicken Sie dann auf "Überprüfen".
Wenn der Bereich dieses Mal geöffnet wird, geht er direkt zu dem Teil des Codes, der das Element enthält, auf das Sie geklickt haben.
Wenn Sie die Dockposition ändern möchten, können Sie sie nach unten, links, rechts verschieben oder sogar in einem separaten Fenster abdocken. Klicken Sie auf das Menüsymbol (drei Punkte) und wählen Sie entweder "In einem separaten Fenster abdocken", "Links andocken", "Unten andocken" oder "Rechts andocken".
Das ist alles dazu. Wenn Sie mit dem Anzeigen des Codes fertig sind, schließen Sie entweder die Registerkarte "Quelltext anzeigen" oder klicken Sie im Bereich "Entwicklertools" auf das "X", um zu Ihrer Webseite zurückzukehren.
