So zeigen Sie HTML-Code in Chrome an

Gerätelinks

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.

So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  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.
    So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  2. Drücken Sie Strg + Umschalt + I auf Ihrer Tastatur. Der Bereich „Entwicklertools“ wird in einem Dock neben der angezeigten Webseite geöffnet.
    So zeigen Sie HTML-Code in Chrome an
  3. Klicken Sie oben im Bereich auf die Registerkarte „Elemente“. Dadurch wird der HTML-Quellcode für die Webseite angezeigt.
    So zeigen Sie HTML-Code in Chrome an
  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“.
    So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  2. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Inspizieren“.
    So zeigen Sie HTML-Code in Chrome an
  3. Am unteren Bildschirmrand öffnet sich ein neuer Bereich mit dem HTML-Code.
    So zeigen Sie HTML-Code in Chrome an
  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.
    So zeigen Sie HTML-Code in Chrome an
  5. Um den Bereich zu schließen, klicken Sie auf das „X“ in der oberen rechten Ecke.
    So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  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.
    So zeigen Sie HTML-Code in Chrome an
  3. Das Bedienfeld „Entwicklertools“ wird am unteren Bildschirmrand geöffnet. Wählen Sie oben im Bereich „Elemente“ aus.
    So zeigen Sie HTML-Code in Chrome an
  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.
    So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  2. Tippen Sie einmal in die Adressleiste, um den Bearbeitungsmodus zu starten.
    So zeigen Sie HTML-Code in Chrome an
  3. Bewegen Sie den Cursor an den Anfang der URL.
    So zeigen Sie HTML-Code in Chrome an
  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.
    So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  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.
    So zeigen Sie HTML-Code in Chrome an

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.
    So zeigen Sie HTML-Code in Chrome an
  2. Klicken Sie auf die Schaltfläche „Los“.
    So zeigen Sie HTML-Code in Chrome an

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.

Sign up and earn $1000 a day ⋙

So beheben Sie den Fehler, dass Software unter Windows nicht installiert werden kann

So beheben Sie den Fehler, dass Software unter Windows nicht installiert werden kann

So beheben Sie den Fehler, dass Software unter Windows nicht installiert werden kann. Warum können Sie unter Windows 10/11 keine Apps oder Software installieren? Hier finden Sie alles, was Sie zur Behebung wissen müssen

Anleitung zum Löschen oder Ändern der PIN unter Windows 11

Anleitung zum Löschen oder Ändern der PIN unter Windows 11

Anleitung zum Löschen oder Ändern des PIN-Codes unter Windows 11. In Windows 11 ist der PIN-Code ein sehr nützliches und praktisches Sicherheitstool für Benutzer. Allerdings einige Leute

So beheben Sie den Fehler „Es sind derzeit keine Energieoptionen verfügbar“ in Windows 10

So beheben Sie den Fehler „Es sind derzeit keine Energieoptionen verfügbar“ in Windows 10

So beheben Sie den Fehler „Es sind derzeit keine Energieoptionen verfügbar“ in Windows 10. Der Energiemodus kann in Windows 10 nicht ausgewählt werden. Was soll ich tun? So beheben Sie den Fehler

Der einfachste Weg, Fehler in der Fotoanwendung unter Windows 10 zu beheben

Der einfachste Weg, Fehler in der Fotoanwendung unter Windows 10 zu beheben

Der einfachste Weg, Fehler in der Foto-App unter Windows 10 zu beheben: Was soll ich tun, wenn Microsoft Fotos nicht funktioniert? Machen Sie sich keine Gedanken darüber, wie Sie Fehler in der Fotos-App unter Windows beheben können

Anweisungen zum Installieren von Tastaturkürzeln zum Wechseln der Eingabesprachen unter Windows 11

Anweisungen zum Installieren von Tastaturkürzeln zum Wechseln der Eingabesprachen unter Windows 11

Anweisungen zum Installieren von Verknüpfungen zum Wechseln der Eingabesprachen unter Windows 11. Während der Verwendung von Windows müssen Benutzer häufig zwischen Methoden wechseln.

So überprüfen Sie den unterstützten Energiestatus unter Windows 11

So überprüfen Sie den unterstützten Energiestatus unter Windows 11

Die Überprüfung des Energiestatus wird unter Windows 11 unterstützt. Windows 11 kann viele verschiedene Energiezustände verarbeiten. So überprüfen Sie den Stromstatus

So wechseln Sie in Windows 10 von 2,4 GHz auf 5 GHz

So wechseln Sie in Windows 10 von 2,4 GHz auf 5 GHz

So wechseln Sie in Windows 10 von 2,4 GHz auf 5 GHz. Wenn Sie eine schnelle und einfache Möglichkeit finden möchten, das Internet zu beschleunigen, kann es hilfreich sein, das WLAN-Band von 2,4 GHz auf 5 GHz zu ändern.

So beheben Sie den Fehler „Nicht genügend Speicher zum Ausführen von Microsoft Excel“ unter Windows

So beheben Sie den Fehler „Nicht genügend Speicher zum Ausführen von Microsoft Excel“ unter Windows

So beheben Sie den Fehler „Nicht genügend Speicher zum Ausführen von Microsoft Excel“ unter Windows. Haben Sie den Fehler, dass nicht genügend Speicher zum Ausführen von Microsoft Excel vorhanden ist? So beheben Sie den Fehler „Nicht genügend Speicher“.

Möglichkeiten, alle Videodateien unter Windows zu finden

Möglichkeiten, alle Videodateien unter Windows zu finden

Möglichkeiten, alle Videodateien unter Windows zu finden. Aufgenommene und gespeicherte Videos können auf dem PC nicht gefunden werden. Im Folgenden finden Sie Möglichkeiten, wie Sie alle Clips unter Windows finden können.

So beheben Sie den Fehler 0xa00f4288 in der Kamera-App unter Windows 10 und 11

So beheben Sie den Fehler 0xa00f4288 in der Kamera-App unter Windows 10 und 11

So beheben Sie den Fehler 0xa00f4288 in der Kamera-App unter Windows 10 und 11. Die Standard-Kamera-App von Windows ist das Hauptwerkzeug zum Aufnehmen von Fotos. Dies gilt auch für Win 10- und 11-Kameras

So öffnen Sie mehrere Programme mit einer Verknüpfung unter Windows 10

So öffnen Sie mehrere Programme mit einer Verknüpfung unter Windows 10

So öffnen Sie mehrere Programme mit einer Verknüpfung unter Windows 10: Sie können tatsächlich mehrere Programme gleichzeitig mit einer einzigen Taste öffnen. Hier erfahren Sie, wie Sie eines verwenden

So löschen Sie alte Startmenüoptionen unter Windows

So löschen Sie alte Startmenüoptionen unter Windows

So entfernen Sie alte Startmenüoptionen unter Windows. Windows 10 Dual Boot ist nützlich, kann jedoch überflüssige Startoptionen im Menü hinterlassen. So entfernen Sie das Menü

Anweisungen zum Beheben von Snipping Tool-Fehlern unter Windows 11

Anweisungen zum Beheben von Snipping Tool-Fehlern unter Windows 11

Anleitung zur Behebung von Snipping-Tool-Fehlern unter Windows 11. Windows 11 ist offiziell schon seit einiger Zeit freigegeben, bei der Nutzung kommt es aber immer noch zu vielen Fehlern

Anleitung zur Texteingabe per Sprache unter Windows 11

Anleitung zur Texteingabe per Sprache unter Windows 11

Anleitung zur Spracheingabe von Text unter Windows 11, Die Spracheingabe von Text unter Windows 11 hilft Ihnen, Ihre Arbeitseffizienz deutlich zu verbessern. Hier ist wie

So aktivieren/deaktivieren Sie Sticky Key unter Windows 11

So aktivieren/deaktivieren Sie Sticky Key unter Windows 11

So aktivieren/deaktivieren Sie Sticky Key unter Windows 11. Sticky Key erleichtert die Verwendung der PC-Tastatur. So aktivieren und deaktivieren Sie Sticky Key unter Windows 11.

Was ist der Windows Modules Installer?

Was ist der Windows Modules Installer?

Was ist der Windows Modules Installer? Der Windows Modules Installer beansprucht manchmal viele Systemressourcen. Ist der Windows Modules Installer wichtig oder nicht?

So erhöhen Sie die Lautstärke in Windows 10

So erhöhen Sie die Lautstärke in Windows 10

Wie erhöht man die Lautstärke in Windows 10? Wie erhöht man die Lautstärke des Computers auf die maximale Lautstärke? Erfahren Sie mit WebTech360, wie Sie die Lautstärke Ihres Windows 10-Computers erhöhen können

So verwenden Sie den Windows 11-Installationsassistenten zur Installation von Windows 11

So verwenden Sie den Windows 11-Installationsassistenten zur Installation von Windows 11

So verwenden Sie den Windows 11-Installationsassistenten zur Installation von Windows 11. Der Windows 11-Installationsassistent ist eine der besten Möglichkeiten, Ihren Computer auf Windows 11 zu aktualisieren.

So schalten Sie den Startsound in Windows 11 aus

So schalten Sie den Startsound in Windows 11 aus

So schalten Sie den Startton in Windows 11 aus. Stört Sie der Startton des PCs? Dann lesen Sie bitte weiter unten, wie Sie den Startsound für PCs mit Windows 11 ausschalten

Anweisungen zum Ändern des Zeitlimits für die Bildschirmsperre unter Windows 11

Anweisungen zum Ändern des Zeitlimits für die Bildschirmsperre unter Windows 11

Anweisungen zum Ändern des Zeitlimits für die Bildschirmsperre unter Windows 11. Bei der Verwendung von Windows 11 kann es vorkommen, dass Benutzer den Computer für eine gewisse Zeit verlassen müssen.