So zeigen Sie HTML-Code in Chrome an

Gerätelinks

• Android
• iPhone
• Chromebook
• Mac
• Windows
• Gerät fehlt?

Sind Sie neugierig, was eine Webseite ausmacht? Möchten Sie wissen, wie Sie die Schriftgröße oder -farbe auf Ihrer Website ändern können? Durch die Anzeige des HTML-Codes einer Webseite können Sie all diese Dinge und noch mehr tun.

In diesem Tutorial zeigen wir Ihnen, wie Sie den HTML-Code einer Webseite in Chrome anzeigen.

HTML-Code in Chrome anzeigen

Beim Schreiben in HTML besteht der Quellcode aus einer Reihe von Tags und Attributen, die zur Definition der Struktur und des Inhalts einer Webseite verwendet werden.

Der Quellcode wird von Webbrowsern gelesen und in die grafische Webseite übersetzt, die Sie auf dem Bildschirm sehen. Neben der Definition des Erscheinungsbilds einer Webseite kann der Quellcode auch zum Hinzufügen von Interaktivität wie Popup-Fenstern, Formularen und Dropdown-Menüs verwendet werden.

Während der durchschnittliche Internetnutzer den HTML-Quellcode einer Webseite möglicherweise nie sehen muss, gibt es mehrere Gründe, warum manche dies tun möchten.

Für Entwickler kann die Betrachtung des Quellcodes eine hilfreiche Möglichkeit sein, die Struktur einer Seite zu verstehen und festzustellen, welche Stil- und Skriptelemente verwendet werden. Für Designer kann es von Vorteil sein zu sehen, wie andere Designer HTML verwendet haben, um effektive Layouts zu erstellen.

In manchen Fällen möchten Benutzer möglicherweise auch den Quellcode anzeigen, um Fehler zu beheben oder mehr über die Funktionsweise einer bestimmten Website oder Webanwendung zu erfahren. Was auch immer der Grund sein mag, das Anzeigen des HTML-Quellcodes ist in Chrome ein relativ einfacher Vorgang.

So zeigen Sie den HTML-Code einer Webseite in Chrome auf einem Windows-PC an

Das Windows-Betriebssystem ist eines der kompatibelsten Systeme von Chrome. Chrome basiert auf dem Open-Source-Chromium-Projekt, an dem Microsoft maßgeblich beteiligt ist. Diese Kompatibilität erstreckt sich auch auf den HTML-Bereich, wo der beliebte Browser es Benutzern ermöglicht, den HTML-Code jeder Website anzuzeigen.

Sie können den HTML-Code auf zwei Arten anzeigen.

Verwenden von „Seitenquelle anzeigen“.

Diese Methode ist unkompliziert:

1. Öffnen Sie Chrome und navigieren Sie zu der Seite, auf der Sie den HTML-Quellcode anzeigen möchten.
   
2. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Seitenquelle anzeigen“ oder drücken Sie Strg + U auf Ihrer Tastatur, um den Quellcode in einem neuen Tab zu öffnen.
   

Der Quellcode wird im neuen Tab angezeigt und Sie können durch ihn scrollen, um das HTML-Markup für diese Seite anzuzeigen.

Verwenden von Entwicklertools

Führen Sie die folgenden Schritte aus, um den Quellcode einer Webseite mithilfe der Entwicklertools in Google Chrome zu überprüfen.

1. Öffnen Sie Google Chrome und navigieren Sie zu der Webseite, die Sie überprüfen möchten.
   
2. Drücken Sie Strg + Umschalt + I auf Ihrer Tastatur. Der Bereich „Entwicklertools“ wird in einem Dock neben der angezeigten Webseite geöffnet.
   
3. Klicken Sie oben im Bereich auf die Registerkarte „Elemente“. Dadurch wird der HTML-Quellcode für die Webseite angezeigt.
   
4. Sie können jetzt den Quellcode für die Seite überprüfen. Um ein Element auszublenden, klicken Sie auf das Dreieck neben seinem Tag-Namen. Um weitere Informationen zu einer Komponente anzuzeigen, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Inspizieren“.
   

Beachten Sie, dass diese Methode am besten für HTML-Seiten geeignet ist. Es ist möglich, den Quellcode anderer Arten von Webseiten anzuzeigen, die Formatierung ist jedoch möglicherweise schwieriger zu lesen.

So zeigen Sie den HTML-Code einer Webseite in Chrome auf einem Mac an

Wenn Sie ein Webentwickler sind, ist es wichtig, den HTML-Code einer Webseite anzeigen zu können. Auf diese Weise können Sie sehen, wie die Seite strukturiert ist, und eventuell auftretende Probleme beheben. Glücklicherweise ist dies in Chrome auf einem Mac einfach möglich. Befolgen Sie einfach diese Schritte:

1. Öffnen Sie Chrome und navigieren Sie zu der Webseite, auf der Sie den HTML-Code anzeigen möchten.
   
2. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Inspizieren“.
   
3. Am unteren Bildschirmrand öffnet sich ein neuer Bereich mit dem HTML-Code.
   
4. Sie können auch auf bestimmte Elemente im HTML-Code klicken, um zu sehen, wie sie auf der Seite gestaltet sind. Sie können beispielsweise sehen, welche CSS-Stile auf ein Element angewendet werden, indem Sie es auswählen und dann im sich öffnenden Bereich auf die Registerkarte „Stile“ klicken.
   
5. Um den Bereich zu schließen, klicken Sie auf das „X“ in der oberen rechten Ecke.
   

Alternativ können Sie die Chrome Developer Tools verwenden, um den Quellcode anzuzeigen.

1. Öffnen Sie Google Chrome und navigieren Sie zu der Webseite, die Sie überprüfen möchten.
   
2. Klicken Sie auf das Menüsymbol (drei Punkte) in der oberen rechten Ecke des Browsers und wählen Sie im Dropdown-Menü „Weitere Tools“ und „Entwicklertools“ aus.
   
3. Das Bedienfeld „Entwicklertools“ wird am unteren Bildschirmrand geöffnet. Wählen Sie oben im Bereich „Elemente“ aus.
   
4. Sie sehen nun den HTML-Code für die aktuelle Seite im Elementebedienfeld angezeigt. Sie können die verschiedenen Optionen im Bedienfeld verwenden, um den Code nach Bedarf zu überprüfen und zu debuggen.
   

Mit nur wenigen Klicks können Sie den HTML-Code für jede beliebige Webseite in Chrome auf einem Mac anzeigen. Dies kann hilfreich sein, wenn Sie versuchen, Probleme bei der Webentwicklung zu beheben oder sich den Aufbau einer bestimmten Website genauer ansehen möchten.

So zeigen Sie den HTML-Code einer Webseite in Chrome in der iPhone-App an

Wenn Sie ein iPhone verwenden, können Sie den HTML-Code jeder Seite in Chrome auf zwei Arten anzeigen:

Optimieren der URL

Sie können den HTML-Code jeder Seite ganz einfach anzeigen, indem Sie eine kleine Anpassung an der URL vornehmen:

1. Öffnen Sie Chrome und navigieren Sie zu der Webseite, deren HTML-Code Sie anzeigen möchten.
   
2. Tippen Sie einmal in die Adressleiste, um den Bearbeitungsmodus zu starten.
   
3. Bewegen Sie den Cursor an den Anfang der URL.
   
4. Geben Sie „Quelle anzeigen“ ein und klicken Sie dann auf die Schaltfläche „Los“. Der HTML-Code für die Webseite wird in Chrome angezeigt.
   

Verwenden von Entwicklertools

Chrome Developer Tools sind auch für iOS verfügbar, zum Starten sind jedoch andere Schritte erforderlich als auf PCs.

1. Tippen Sie auf die drei Punkte in der oberen rechten Ecke des Bildschirms und wählen Sie „Einstellungen“.
2. Scrollen Sie nach unten, tippen Sie auf „Erweitert“ und aktivieren Sie dann den Schalter neben „Entwicklertools“.
3. Tippen und halten Sie einen leeren Bereich der Seite und wählen Sie dann „Element prüfen“. Dadurch wird ein Seitenbereich mit dem HTML-Code für diese Seite geöffnet.

So zeigen Sie den HTML-Code einer Webseite in Chrome in der Android-App an

Wenn Sie die Chrome-App auf Ihrem Android-Telefon verwenden, möchten Sie möglicherweise den HTML-Code für eine Webseite anzeigen. Dies kann hilfreich sein, wenn Sie versuchen, ein Problem mit der Seite zu beheben oder sehen möchten, wie die Seite strukturiert ist. Gehen Sie folgendermaßen vor, um den HTML-Code für eine Webseite in Chrome auf Ihrem Android-Telefon anzuzeigen:

1. Öffnen Sie Chrome auf Ihrem Android.
   
2. Geben Sie „view-source:“ gefolgt von der URL der gewünschten Seite ein, auf der Sie den Quellcode anzeigen möchten. Wenn Sie beispielsweise den Quellcode für www.google.com anzeigen möchten, geben Sie „view-source:www.google.com“ in die Adressleiste von Chrome ein.
   

Dadurch wird der HTML-Code für diese Seite in der integrierten Entwicklertools-Oberfläche von Chrome geöffnet. Von dort aus können Sie den Code nach Bedarf anzeigen und bearbeiten. Beachten Sie, dass diese Methode nur funktioniert, wenn die Website, die Sie anzeigen möchten, Zugriff auf ihren Quellcode ermöglicht. Ist dies nicht der Fall, wird außer einer Fehlermeldung nichts angezeigt.

So zeigen Sie den HTML-Code einer Webseite in Chrome auf einem iPad an

Chrome auf der iPad-App erleichtert die Anzeige des HTML-Codes jeder Webseite. Befolgen Sie einfach diese Schritte:

1. Öffnen Sie Chrome und geben Sie „view-source:“ gefolgt von der URL der Seite ein, die Sie anzeigen möchten. Wenn Sie beispielsweise den Quellcode für www.alphr.com anzeigen möchten, müssen Sie „view-source:www.alphr.com“ in die Adressleiste von Chrome eingeben.
   
2. Klicken Sie auf die Schaltfläche „Los“.
   

Dadurch sollte der Quellcode der Seite in einem neuen Tab in Chrome geladen werden. Von dort aus können Sie den Code nach Bedarf speichern oder teilen.

Der Quellcode ist der Klebstoff, der die Seiten zusammenhält

HTML ist die Grundlage jeder Website. Es stellt die Struktur und den Inhalt bereit, die Besucher sehen, wenn sie eine Seite in ihrem Browser laden.

Während das endgültige Erscheinungsbild einer Seite möglicherweise durch CSS oder andere Stilsprachen bestimmt wird, bestimmt der HTML-Code die grundlegende Struktur und den Inhalt der Seite. Einige Änderungen können möglicherweise dazu führen, dass die Seite beschädigt wird. Aus diesem Grund ist es wichtig, über gute HTML-Kenntnisse zu verfügen, wenn Sie den Quellcode anzeigen oder Änderungen daran vornehmen.

Bedenken Sie außerdem, dass die Anzeige des HTML-Codes zwar in manchen Fällen hilfreich sein kann, am Code vorgenommene Änderungen jedoch nicht auf der Live-Webseite angezeigt werden. Nur vom Administrator der Website veröffentlichte Änderungen sind für Besucher sichtbar.

Haben Sie versucht, den HTML-Code einer Webseite mit einer der in diesem Tutorial beschriebenen Methoden anzuzeigen? Wie ist es gelaufen?

Lassen Sie es uns im Kommentarbereich wissen.