Anzeigen von HTML-Code in Chrome
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 Anzeigen des HTML-Codes einer Webseite können Sie all diese Dinge und mehr tun.
In diesem Tutorial zeigen wir Ihnen, wie Sie den HTML-Code einer Webseite in Chrome anzeigen.
Anzeigen von HTML-Code in Chrome
Beim Schreiben in HTML ist der Quellcode eine Reihe von Tags und Attributen, die verwendet werden, um die Struktur und den Inhalt von zu definieren eine Webseite.
Der Quellcode wird von Webbrowsern gelesen und in die grafische Webseite übersetzt, die Sie auf dem Bildschirm sehen. Zusätzlich zum Definieren des Erscheinungsbilds einer Webseite kann der Quellcode auch verwendet werden, um Interaktivität hinzuzufügen, wie z. B. Popup-Fenster, Formulare und Dropdown-Menüs.
Während das durchschnittliche Internet Benutzer müssen möglicherweise nie den HTML-Quellcode einer Webseite anzeigen, es gibt mehrere Gründe, warum einige dies tun möchten.
Für Entwickler kann das Anzeigen des Quellcodes eine hilfreiche Methode sein, um zu verstehen, wie eine Seite strukturiert ist und bestimmen Sie, welche Styling-und Scripting-Elemente verwendet werden. Für Designer kann es von Vorteil sein zu sehen, wie andere Designer HTML verwendet haben, um effektive Layouts zu erstellen.
In einigen Fällen möchten Benutzer möglicherweise auch den Quellcode anzeigen, um Fehler zu beheben oder mehr darüber zu erfahren, wie ein bestimmter Website oder Webanwendung funktioniert. 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 baut auf dem Open-Source-Chromium-Projekt auf, 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.
Verwendung der Ansichtsseite Quelle
Diese Methode ist unkompliziert:
Ö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 Seitenquelltext anzeigen oder drücken Sie Strg + U auf Ihrer Tastatur, um den Quellcode in einem neuen Tab zu öffnen.
Der Quellcode wird in der neuen Registerkarte angezeigt, und Sie können durch ihn blättern, um das HTML-Markup für diese Seite anzuzeigen.
Verwenden der Entwicklertools
Um den Quellcode einer Webseite mit Developer Tools in Google Chrome, folgen Sie t Er geht wie folgt vor.
Öffnen Sie Google Chrome und navigieren Sie zu der Webseite, die Sie untersuchen möchten.Drücken Sie Strg + Umschalt + I auf Ihrer Tastatur. Der Bereich”Entwicklertools”wird in einem Dock neben der angezeigten Webseite geöffnet.
Klicken Sie oben im Bereich auf die Registerkarte „Elemente“. Dadurch wird der HTML-Quellcode für die 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“ aus.
Beachten Sie, dass diese Methode am besten für HTML-Seiten geeignet ist; Es ist möglich, den Quellcode anderer Arten von Webseiten anzuzeigen, aber die Formatierung kann schwieriger zu lesen sein.
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. 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”aus.”
Am unteren Rand des Bildschirms wird ein neues Fenster mit dem HTML-Code geöffnet.
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 darauf klicken Ö Klicken Sie im sich öffnenden Bereich auf die Registerkarte „Stile“.
Um das Fenster zu schließen, klicken Sie oben rechts auf das „X“.
Alternativ können Sie die Chrome Developer Tools 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 Weitere Tools und Entwicklertools aus das Dropdown-Menü.
Das Bedienfeld „Entwicklertools“ wird unten auf dem Bildschirm geöffnet. Wählen Sie die „Elemente“ oben im Bereich aus.
Sie werden es jetzt tun Sehen Sie sich den HTML-Code für die aktuelle Seite an, der im Bedienfeld „Elemente“ angezeigt wird. Sie können die verschiedenen Optionen im Bedienfeld verwenden, um den Code nach Bedarf zu untersuchen und zu debuggen.
Mit nur wenigen Klicks können Sie ganz einfach den HTML-Code für jede Webseite in Chrome auf einem Mac anzeigen. Dies kann hilfreich sein, wenn Sie versuchen, Probleme bei der Webentwicklung zu beheben oder sich genauer ansehen möchten, wie eine bestimmte Website aufgebaut ist.
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 Chro anzeigen mich auf zwei Arten:
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 die Webseite, deren HTML-Code Sie anzeigen möchten.
Tippen Sie einmal hinein die Adressleiste, um den Bearbeitungsmodus zu starten.
Verschieben Sie die Cursor an den Anfang der URL.
Geben Sie „View-source “ und klicken Sie dann auf die Schaltfläche „Los“. Der HTML-Code für die Webseite wird in Chrome angezeigt.
Entwicklertools verwenden
Chrome-Entwicklertools sind auch für iOS verfügbar, aber zum Starten sind andere Schritte erforderlich als für PCs.
Tippen Sie oben rechts auf die drei Punkte Ecke des Bildschirms und wählen Sie „Einstellungen“. Scrollen Sie nach unten und tippen Sie auf „Erweitert“, aktivieren Sie dann den Umschalter 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, Vielleicht möchten Sie 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. Führen Sie die folgenden Schritte aus, um den HTML-Code für eine Webseite in Chrome auf Ihrem Android-Telefon anzuzeigen:
Öffnen Sie Chrome auf Ihrem Android.
Geben Sie „view-source:“ gefolgt von der URL der gewünschten Seite ein, auf der Sie den Quellcode anzeigen möchten. Wenn Sie beispielsweise die Quellcode für www.google.com würden Sie”view-source:www.google.com”in die Adressleiste von Chrome eingeben.
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 wie gewünscht anzeigen und bearbeiten. Denken Sie daran, dass diese Methode nur funktioniert, wenn die Website, die Sie anzeigen möchten, Zugriff auf ihren Quellcode erlaubt. Wenn dies nicht der Fall ist, können Sie nichts anderes als eine Fehlermeldung sehen.
So zeigen Sie den HTML-Code einer Webseite in Chrome auf einem iPad an
Chrome in der iPad-App macht es einfach, den HTML-Code jeder Webseite anzuzeigen. Befolgen Sie einfach diese Schritte:
Ö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 müssen Sie „view-source:www.alphr.com“ in die Adressleiste von Chrome eingeben.
Klicken Sie auf die Schaltfläche „Los“.
Dies sollte die Seiten laden Quellcode in einem neuen Tab in Chrome. 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 durch CSS oder andere Gestaltungssprachen bestimmt werden kann, bestimmt der HTML-Code die Pa Grundstruktur und Inhalt von ge. Einige Änderungen können möglicherweise die Seite beschädigen. Aus diesem Grund ist es wichtig, ein gutes HTML-Verständnis zu haben, wenn Sie den Quellcode anzeigen oder Änderungen daran vornehmen.
Beachten Sie außerdem, dass beim Anzeigen des HTML-Codes in einigen Fällen Änderungen hilfreich sein können am Code vorgenommene Änderungen werden nicht auf der Live-Webseite wiedergegeben. Nur vom Administrator der Website veröffentlichte Änderungen sind für Besucher sichtbar.
Haben Sie versucht, den HTML-Code einer beliebigen Webseite mit einer der in diesem Tutorial beschriebenen Methoden anzuzeigen? Wie ist es gelaufen?
Lassen Sie es uns im Kommentarbereich wissen.
Haftungsausschluss: Einige Seiten dieser Website können einen Affiliate-Link enthalten. Dies wirkt sich in keiner Weise auf unsere Redaktion aus.