Egal, ob Sie ein Webdesigner sind, der den Quellcode Ihrer Website debuggt oder einfach nur neugierig ist, wie der Code einer Website aussieht, Sie können den HTML-Quellcode direkt in Google Chrome anzeigen. Es gibt zwei Möglichkeiten, den HTML-Quellcode anzuzeigen: Quelltext anzeigen und mit den Entwicklertools prüfen.
Quelle anzeigen mit 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 einem neuen Tab anzuzeigen.
Eine neue Registerkarte wird zusammen mit dem gesamten HTML für die Webseite geöffnet, vollständig erweitert und unformatiert.
Wenn Sie in der HTML-Quelle nach einem bestimmten Element oder Teil suchen, ist die Verwendung von View Source mühsam und umständlich, insbesondere wenn die Seite viel JavaScript und CSS verwendet.
Untersuchen der Quelle mit den Entwicklertools
Diese Methode verwendet den Bereich Entwicklertools in Chrome und ist ein viel saubererer Ansatz zum Anzeigen des Quellcodes. HTML ist hier dank der zusätzlichen Formatierung und der Möglichkeit, Elemente, die Sie nicht interessieren, auszublenden, 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. Ein angedockter Bereich wird neben der angezeigten Webseite geöffnet.
Klicken Sie auf den kleinen grauen Pfeil neben einem Element, um es noch weiter zu erweitern.
Wenn Sie standardmäßig nicht den vollständigen Seitencode anzeigen möchten, sondern stattdessen ein bestimmtes Element im HTML-Code überprüfen möchten, klicken Sie mit der rechten Maustaste auf diese Stelle auf der Seite und klicken Sie dann auf „Untersuchen“.
Wenn der Bereich dieses Mal geöffnet wird, geht er direkt zu dem Codeabschnitt, der das Element enthält, auf das Sie geklickt haben.
Wenn Sie die Andockposition ä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 dann entweder in einem separaten Fenster abdocken, links andocken, unten andocken oder rechts andocken.
Das ist alles dazu. Wenn Sie mit dem Betrachten des Codes fertig sind, schließen Sie entweder die Registerkarte „Quelle anzeigen“ oder klicken Sie im Bereich „Entwicklertools“ auf das „X“, um zu Ihrer Webseite zurückzukehren.