Sind Sie neugierig, was eine Website 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 handelt es sich beim Quellcode um eine Reihe von Tags und Attributen, die zur Definition der Struktur und des Inhalts einer Webseite verwendet werden.
Webbrowser lesen den Quellcode und übersetzen ihn in die grafische Webseite, die Sie auf dem Bildschirm sehen. Quellcode kann nicht nur das Erscheinungsbild einer Webseite definieren, sondern auch zum Hinzufügen von Interaktivität wie Pop-ups, Formularen und Dropdown-Menüs verwendet werden.
Während der durchschnittliche Internetnutzer möglicherweise nie den HTML-Quellcode einer Webseite anzeigen muss, gibt es mehrere Gründe, warum manche dies tun möchten.
Für Entwickler kann die Betrachtung des Quellcodes eine nützliche Möglichkeit sein, die Struktur einer Seite zu verstehen und festzustellen, welche Stilelemente und Skripte verwendet werden. Für Designer kann es von Vorteil sein zu sehen, wie andere Designer HTML verwendet haben, um wirkungsvolle Designs 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 am meisten unterstützten Systeme für Chrome. Chrome basiert auf dem Open-Source-Chromium-Projekt, an dem Microsoft maßgeblich beteiligt ist. Diese Unterstützung 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 einfach:
- Öffnen Sie Chrome und navigieren Sie zu der Seite, auf der Sie den HTML-Quellcode anzeigen möchten.
- 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.
Einsatz von Entwicklungstools
Führen Sie die folgenden Schritte aus, um den Quellcode einer Webseite mithilfe der Entwicklertools in Google Chrome zu überprüfen.
- Öffnen Sie Google Chrome und navigieren Sie zu der Webseite, die Sie überprüfen möchten.
- Drücken Sie Strg + Umschalt + I auf Ihrer Tastatur. Das Fenster „Entwicklertools“ wird in einem Fenster neben der angezeigten Webseite geöffnet.
- Klicken Sie oben im Bedienfeld auf die Registerkarte „Elemente“. Dadurch wird der HTML-Quellcode der Webseite angezeigt.
- Sie können jetzt den Quellcode der 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 sehen 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 ganz einfach. Befolgen Sie einfach diese Schritte:
- Öffnen Sie Chrome und navigieren Sie zu der Webseite, auf der Sie den HTML-Code anzeigen möchten.
- Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Inspizieren“.
- Am unteren Bildschirmrand öffnet sich ein neues Panel mit dem HTML-Code.
- Sie können auch auf bestimmte Elemente im HTML-Code klicken, um zu sehen, wie sie auf der Seite angeordnet sind. Sie können beispielsweise sehen, welche CSS-Stile auf ein Element angewendet werden, indem Sie es auswählen und dann im sich öffnenden Bedienfeld auf die Registerkarte „Stile“ klicken.
- Um das Panel zu schließen, klicken Sie auf das „X“ in der oberen rechten Ecke.
Alternativ können Sie die Entwicklertools von Chrome verwenden, um den Quellcode anzuzeigen.
- Öffnen Sie Google Chrome und navigieren Sie zu der Webseite, die Sie überprüfen möchten.
- 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.
- Das Bedienfeld „Entwicklertools“ wird am unteren Bildschirmrand geöffnet. Wählen Sie oben im Bedienfeld „Elemente“ aus.
- Sie sehen nun den HTML-Code der aktuellen 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 ganz einfach den HTML-Code jeder Webseite in Chrome auf einem Mac anzeigen. Dies kann nützlich sein, wenn Sie versuchen, Probleme bei der Webentwicklung zu beheben oder wenn Sie sich die Funktionsweise einer bestimmten Seite genauer ansehen möchten Website ist erstellt.
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:
Anpassen der URL
Sie können den HTML-Code jeder Seite ganz einfach anzeigen, indem Sie eine kleine Anpassung an der URL vornehmen:
- Öffnen Sie Chrome und navigieren Sie zu der Webseite, deren HTML-Code Sie anzeigen möchten.
- Tippen Sie einmal auf die Adressleiste, um den Bearbeitungsmodus zu starten.
- Bewegen Sie den Cursor an den Anfang der URL.
- Geben Sie „Quelle anzeigen“ ein und klicken Sie dann auf die Schaltfläche „Los“. Der HTML-Code der Webseite wird in Chrome angezeigt.
Einsatz von Entwicklungstools
Chrome Developer Tools ist auch für iOS verfügbar, zum Starten sind jedoch andere Schritte erforderlich als auf PCs.
- Tippen Sie auf die drei Punkte in der oberen rechten Ecke des Bildschirms und wählen Sie „Einstellungen“.
- Scrollen Sie nach unten, tippen Sie auf „Erweitert“ und aktivieren Sie dann den Schalter neben „Entwicklertools“.
- 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 einer Webseite anzeigen. Dies kann nützlich 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 einer Webseite in Chrome auf Ihrem Android-Telefon anzuzeigen:
- Öffnen Sie Chrome auf Ihrem Android.
- Geben Sie „view-source:“ gefolgt von der URL der Seite ein, die Sie anzeigen möchten, 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 Ihren Wünschen anzeigen und bearbeiten. Bitte beachten Sie, dass diese Methode nur funktioniert, wenn die Website, die Sie anzeigen möchten, Zugriff auf ihren Quellcode ermöglicht. Wenn nicht, 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:
- Öffnen Sie Chrome und geben Sie „Quelle anzeigen:“ 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, geben Sie „view-source:www.alphr.com“ in die Adressleiste von Chrome ein.
- Drücken Sie die „Los“-Taste.
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 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 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.
Beachten 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 aktiven Webseite angezeigt werden. Nur vom Site-Administrator 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.
