So zeigen Sie den HTML-Code einer beliebigen Website in jedem Browser an

Eine Webseite ist nichts anderes als das Produkt eines Webentwicklers und -designers, mit dem sie versuchen, die Aufmerksamkeit der Benutzer auf sich zu ziehen, obwohl wir sie auch als eine Reihe von korrekt angeordneten HTML-Elementen definieren können. Wenn Sie sehen möchten, dass die Webseiten, die Sie besuchen, unter der Haube funktionieren, sei es aus Neugier oder einfach nur, um Ihre Selbstlernbedürfnisse zu befriedigen, können Sie das tun Zugriff auf den HTML-Code jeder Webseite von jedem Browser sehr einfach.

Nach Angaben von Satcounter im Juni 2022 der meistgenutzte Browser weltweit auf Computern ist Google Chrome, mit einem Anteil von 66 %. An zweiter Stelle und in kontinuierlichem Wachstum ist Microsoft Edge Chrom mit knapp über 10 % Marktanteil. An dritter und vierter Stelle stehen Safari (worüber wir in diesem Artikel nicht sprechen werden, da es nicht verfügbar ist Windows) und Firefox mit einem Marktanteil von 9.1 bzw. 7.6 %.

Zeigen Sie den HTML-Code jeder Website in jedem Browser an

Die Klassifizierung der 5 meistgenutzten Browser der Welt auf Desktop-Plattformen schließt (auf mobilen Geräten ändert sich daran nicht viel) mit ab Opera, ein Unternehmen, das jetzt mit einem Anteil von 2.6 % hinter einem Konglomerat chinesischer Unternehmen steht. Unter Berücksichtigung der am häufigsten verwendeten Browser zeigen wir Ihnen unten, wie Sie mit verschiedenen Browsern auf den HTML-Code einer beliebigen Website zugreifen können.

Was ist der HTML-Code einer Website und wozu dient er?

Alle Browser enthalten eine Funktion namens Tools für Entwickler, Web-Inspektor, Element-Inspektor … deren Hauptzweck es ist, dem Benutzer dies zu ermöglichen um auf den HTML-Code des Webs zuzugreifen , der Quellcode des Webs, das wir besuchen, um die Funktionsweise der verschiedenen Elemente zu analysieren, aus denen es besteht, Fehler zu erkennen und an einer Lösung zu arbeiten. Es ist auch besonders nützlich für Benutzer, die ihre ersten Schritte im Webdesign machen.

Jeder Browser verwendet einen anderen Inspektor, der im Basisbrowser implementiert ist. Bei Chrome, Edge und Opera, die auf Chromium basieren, ist der verwendete Inspektor genau derselbe. Das einzige, was sich geringfügig ändert, sind das Layout und die Browsing-Optionen.

Beim Zugriff auf den HTML-Code werden alle Informationen eingeordnet verschiedene Registerkarten so dass es viel einfacher ist, auf alle darin enthaltenen Abschnitte zuzugreifen. Wenn unser Wissen sehr hoch ist, haben wir durch den Zugriff auf die Registerkarte Elemente mehr als genug.

Über die Registerkarte Elemente können wir auf den gesamten HTML-Code des Webs zugreifen. Wenn wir die Maus über die verschiedenen Codezeilen im Inspektor bewegen, sehen wir, wie der Inhalt, auf den er sich im Web bezieht, hervorgehoben wird, um anzuzeigen, auf welchen Abschnitt des Webs er sich bezieht.

Mit Google Chrome

Die in Google Chrome verfügbaren Entwicklertools sind die Funktion, mit der wir auf den HTML-Code aller von uns besuchten Websites zugreifen können. Der Browser von Google bietet uns drei verschiedene Methoden, um auf dieses Tool zuzugreifen, Methoden, die von einer Tastenkombination bis zu einer Funktionstaste über das Chrome-Konfigurationsmenü reichen.

Code HTML Chrome

  • Taste F12. Dies ist die schnellste Methode, um auf die Google Chrome Developer Tools zuzugreifen, solange wir keine eingeschränkte Tastatur haben und die Funktionstaste (Fn) verwenden müssen. Wenn wir diese Schaltfläche zum ersten Mal verwenden, ermöglicht uns der Browser, die Betätigung dieser Taste dieser Funktion zuzuordnen.
  • Strg + Umschalt + i . Wenn Sie in Ihrem täglichen Leben Tastenkombinationen eingeführt haben, um Ihre Produktivität zu steigern und Ihre Abhängigkeit von der Maus zu verringern, können Sie diese Tastenkombination verwenden, um auf Chrome-Code zuzugreifen.
  • Durch das Menü . Über das Konfigurationsmenü von Google Chrome können wir auch auf das Menü Extras zugreifen, um den Code zu überprüfen, indem wir auf die drei vertikalen Punkte in der oberen rechten Ecke klicken. Als nächstes gehen wir zu Weitere Tools und klicken schließlich auf die letzte Option: Entwicklertools.
  • Mit der rechte Maustaste , können wir sowohl auf den Quellcode des Webs als auch auf die Tools für Entwickler zugreifen.

Über Microsoft Edge

Wenn wir mit Microsoft Edge auf den HTML-Code der Seite zugreifen möchten, auf der wir uns befinden, bietet uns der Microsoft-Browser drei verschiedene Methoden an. Es sollte nicht überraschen, dass alle drei Methoden die gleichen sind wie in Google Chrome, da beide auf Chromium basieren und dieselbe Browserbasis verwenden.

Code HTML Edge

Im Gegensatz zu Google nennt Microsoft dieses Tool Development Tools, ein Tool, auf das wir mit einer der verschiedenen Methoden zugreifen können, die wir Ihnen unten zeigen:

  • Die Funktionstaste F12. Wie bei Chrome ist dies die schnellste und einfachste Methode. Wenn wir diese Schaltfläche zum ersten Mal verwenden, ermöglicht uns der Browser, die Betätigung dieser Taste dieser Funktion zuzuordnen.
  • Mit der Abkürzung Strg + Umschalt + i . Wenn Sie sich bereits daran gewöhnt haben, eine weitere Abkürzung in Ihr Leben zu bringen, ist dies kein Problem.
  • Aus dem Menü . Klicken Sie auf die drei horizontalen Punkte, die sich in der oberen rechten Ecke befinden. Klicken Sie anschließend auf Weitere Tools und schließlich auf die letzte Option: Entwicklungstools.
  • Um auf den Quellcode der Website zuzugreifen, auf der wir uns befinden, drücken Sie die rechte Maustaste und wählen Sie die Option Seitenquellcode anzeigen. Wenn wir die Option Inspect auswählen, wird das Edge Developer Tool angezeigt.

Wenn wir zum ersten Mal auf die Entwicklertools zugreifen, werden wir vom Browser gefragt, ob wir die Microsoft Edge-Entwicklertools öffnen möchten.

Von Firefox

Firefox von der Mozilla Foundation ist der einzige Browser auf dieser Liste, der nicht auf Chromium basiert, daher sollten die oben genannten Methoden theoretisch nicht funktionieren, tun dies jedoch nicht, da sie genau gleich sind.

Code HTML Firefox

Der Hauptunterschied, den uns Firefox im Vergleich zu den anderen Browsern bietet, liegt jedoch in der Position, an der der Code-Inspektor des Webs, in dem wir uns befinden, angezeigt wird. Während alle Chromium-basierten Browser den Webcode auf der rechten Seite des Browsers anzeigen, zeigt Firefox diese Informationen unten an, wodurch die angezeigten Informationen leichter zugänglich sind.

Wenn wir über Firefox auf das Developer Tools-Panel zugreifen möchten, haben wir mit Chrome und Edge Chromium die gleichen 3 Optionen.

  • Taste F12. Durch Drücken dieser Funktionstaste zeigt Firefox die Entwicklertools unten im Browser an.
  • Verwenden der Tastenkombination Strg + Umschalt + i öffnet den HTML-Code des Webs, in dem wir uns befinden.
  • Wenn Sie zu den Benutzern gehören, denen es schwer fällt, die Maus loszulassen, können Sie über den auf den HTML-Code einer Website zugreifen Firefox-Optionsmenü , indem Sie auf die drei horizontalen Linien in der oberen rechten Ecke des Browsers und Weitere Tools > Entwicklertools klicken.
  • Von dem rechte Maustaste , können wir auf den HTML-Code des Webs zugreifen, indem wir die Option Seitenquellcode anzeigen auswählen. Wenn wir jedoch auf das Panel Developer Tools zugreifen möchten, müssen wir die Option Inspect auswählen.

Opera

Obwohl Opera genau wie Google Chrome und Microsoft Edge auf dem Chromium-Projekt basiert, sind die Methoden, die uns dieser Browser zur Verfügung stellt, nicht dieselben. Wo es mit anderen Browsern übereinstimmt, die auf demselben Projekt basieren, befindet sich an der Stelle, an der es angezeigt wird, nämlich auf der rechten Seite des Browsers.

Code HTML Opera

Die verschiedenen Methoden, die der Opera-Browser seinen Benutzern bietet, um auf den HTML-Code einer beliebigen Seite zuzugreifen, sind die folgenden:

  • Mit der Tastenkombination Strg + Umschalt + i , die gleiche Tastenkombination, die alle Browser als universell übernommen haben, unabhängig davon, auf welchem ​​​​Projekt sie basieren. Die Abkürzung Strg + Umschalt + c ist auch
  • Drücken Sie die rechte Maustaste und wählen Sie die Option aus Element prüfen von überall im Web.
  • Der HTML-Code des Webs, das wir in Opera geöffnet haben, ist über die rechte Schaltfläche über die Option Seitenquelle verfügbar. Um den HTML-Code zu überprüfen, müssen wir aus demselben Menü, das angezeigt wird, wenn Sie die rechte Taste drücken, die Option Überprüfen auswählen.