Connect with us

Wie man

So zeigen Sie die HTML-Quelle in Google Chrome an

So zeigen Sie die HTML-Quelle in Google Chrome an

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.

Klicken Sie mit der rechten Maustaste auf eine Seite und dann auf Seitenquelle anzeigen

Eine neue Registerkarte wird zusammen mit dem gesamten HTML für die Webseite geöffnet, vollständig erweitert und unformatiert.

Die Quelle wird in einem neuen Tab geöffnet

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.

Entwicklertools wird als angedockter Bereich in Chrome geöffnet

Klicken Sie auf den kleinen grauen Pfeil neben einem Element, um es noch weiter zu erweitern.

Elemente ausblenden, wenn Sie auf den grauen Pfeil klicken

Wenn Sie standardmäßig nicht den gesamten Code der Seite 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“.

Springen Sie zu einem bestimmten Element, wenn Sie mit der rechten Maustaste darauf klicken, und klicken Sie dann auf Inspect

Wenn der Bereich dieses Mal geöffnet wird, geht er direkt zu dem Codeabschnitt, der das Element enthält, auf das Sie geklickt haben.

Das Tool geht direkt zu diesem Element

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.

Continue Reading
Click to comment

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Tendencia