So zeigen Sie den Website-Quellcode in Microsoft Edge an

Veröffentlicht: 2021-09-20

In Windows 11 wird Microsoft endlich seinen berüchtigten und ikonischen Internet Explorer-Browser los. Sie haben nur Edge, das auf der Chromium-Codebasis von Google basiert. Daher werden Sie das Gefühl haben, dass der Edge-Browser in vielerlei Hinsicht Google Chrome ähnelt. Wenn Sie den Quellcode der Webseite analysieren möchten, können Sie dies ganz einfach in Edge tun, ohne nach Chrome oder Firefox zu suchen. In diesem Artikel erklären wir, wie Sie Website-Quellcode wie HTML, CSS und JavaScript im Microsoft Edge-Browser anzeigen.

Quelle in Chrome anzeigen

Quelle in Safari anzeigen

Website-Quellcode

Im Allgemeinen sind Webseiten in HTML geschrieben und verwenden verschiedene Arten von Dateien wie CSS, JavaScript, Bilder, Videos usw. Browser wie Edge verarbeiten diese HTML / CSS / JavaScript und zeigen den Lesern nur den lesbaren Text und Medieninhalt an. In vielen Situationen müssen Sie jedoch möglicherweise den Quellcode analysieren, um weitere Details zu erhalten.

Sie sind Entwickler oder Blogger und möchten den Quellcode zur Fehlerbehebung überprüfen.
Die von Ihnen angezeigte Webseite ist attraktiv und Sie wollten die auf der Seite verwendeten Farben und Schriftarten finden.
Sie möchten die Quelle bearbeiten und die Ergebnisse in einem Live-Browser testen, ohne den Originalcode tatsächlich zu ändern. Sie möchten beispielsweise Ihren Überschriften unterschiedliche Farben zuweisen oder die Schriftgröße überprüfen.
Testen Sie die mobile Reaktionsfähigkeit der Seite oder finden Sie die auf der Seite geladenen Elemente.

In einigen Fällen können Sie auch das auf der Site verwendete Theme und die Plugins finden, indem Sie sich den Quellcode ansehen. Was auch immer der Grund ist, Sie können den Quellcode auf zwei Arten analysieren.

Durch direktes Anzeigen des vollständigen Quellcodes
Verwenden der Option „Element prüfen“ mit Microsoft Edge DevTools

Lassen Sie uns beide Methoden im Detail erklären.

Vollständigen Quellcode anzeigen

Angenommen, Sie möchten die auf der Seite verwendeten CSS- und JS-Dateien finden. Sie können dies ganz einfach tun, indem Sie den vollständigen Quellcode anzeigen. Öffnen Sie die Seite in Edge, klicken Sie mit der rechten Maustaste auf einen leeren Bereich und wählen Sie „Seitenquelle anzeigen“ aus dem Kontextmenü.

Dadurch wird eine neue Seite geöffnet, die den vollständigen Quellcode der Seite anzeigt, die Sie wie unten sehen.

Sie finden HTML-Code jedes Elements, verknüpfte CSS-Dateien zwischen den Abschnitten <head> und </head>, Meta-Tags, verknüpfte Skripte vor dem Schließen des Body-Tags </body>. Obwohl dies in vielen Situationen nützlich sein wird, werden Sie nicht die Details finden, welche CSS-Stile auf welche HTML-Elemente auf der Seite angewendet werden. Sie können beispielsweise die Schriftfamilie eines Titelelements nicht finden, wenn Sie sich den vollständigen Quellcode ansehen. Sie müssen auf den Dateilink .css oder .min.css klicken und in dieser Datei suchen, um den für Überschriften verwendeten Stil zu finden. Es ist eine schwierige Aufgabe, da Sie nicht wissen, welcher Titel zu welchem HTML-Heading-Tag von H1 bis H6 gehört. Darüber hinaus können für das Title-Tag benutzerdefinierte CSS-Klassen angewendet werden, die Sie nicht finden können, wenn Sie das CSS unabhängig suchen.

Heutzutage kombinieren viele Websites alle CSS-Dateien zusammen, um die Anzahl der HTTP-Anfragen zu reduzieren und das Caching zu verbessern. Daher hilft das Anzeigen des vollständigen Quellcodes nicht, wenn die CSS-Dateien der Seite zu einer einzigen Datei kombiniert werden. Die Lösung besteht darin, den HTML-Code des Elements und CSS zusammen anzuzeigen, damit Sie ein vollständiges Bild dieses bestimmten Elements erhalten.

Elementoption in Edge prüfen

Mit dieser Option können Sie jedes Element auf einer Webseite analysieren, um dessen HTML und CSS zu erhalten. Starten Sie dazu den Edge-Browser und öffnen Sie die Webseite, die Sie analysieren möchten. Sie müssen die Microsoft Edge DevTools (oder Edge Developer Tools) öffnen, um mit der Analyse der Elemente auf der Webseite zu beginnen. Es gibt mehrere Möglichkeiten, Edge DevTools zu öffnen.

Klicken Sie einfach mit der rechten Maustaste auf einen leeren Bereich und wählen Sie „Inspizieren“ aus dem Kontextmenü.
Sie können F11 in Windows drücken, was in den meisten Desktop- und Laptopmodellen funktioniert. Drücken Sie alternativ die Tasten Strg + Umschalt + I, um den Abschnitt mit den Edge-Entwicklertools zu öffnen.
Drücken Sie „Alt + F“, um das Menü zu öffnen und gehen Sie zu „Weitere Tools > Entwicklertools“.

Öffnen Sie die Entwicklertools über die Edge-Einstellungen

Standardmäßig öffnet Edge den Abschnitt mit den Entwicklertools am unteren Rand des Browsers, wie unten gezeigt.

Sie können die Höhe durch Ziehen und Klicken auf das horizontale Symbol mit den drei Punkten in der Menüleiste der Entwicklertools anpassen, um die Position nach oben/unten zu ändern oder in einem neuen Fenster zu öffnen.

Obwohl DevTools viele Menüpunkte hat, müssen Sie nur wenige davon verwenden, um den Quellcode der Website in Edge zu analysieren. Wenn Sie DevTools zum ersten Mal öffnen, wird eine Registerkarte „Willkommen“ angezeigt, die Sie einfach schließen können.

Anzeigen von HTML- und CSS-Quellcode

Wie bereits erwähnt, enthält jedes Element auf der Webseite HTML-Quellcode mit CSS-Stilen. Um das Quell-HTML und -CSS anzuzeigen, müssen Sie das Element auswählen.

Das erste Symbol im DevTools-Menü ist das Elementauswahl-Tool.
Klicken Sie auf das Symbol und fahren Sie mit der Maus über das Element, das Sie nach dem Quell-HTML suchen möchten. Lassen Sie uns zum Beispiel die Details für die Überschrift „Unsere Premium-Services“ finden.

Wenn Sie mit der Maus über dieses Überschriftenelement fahren, zeigt Edge ein schwebendes Popup mit den meisten erforderlichen Details an. Sie finden die Überschrift h3, die Schriftgröße 26px, die Schriftfamilie Museo500Regular und die Farbe #0875c9. Sie können auch auf das Element klicken, das auf der Registerkarte „Elemente“ angezeigt wird, und ähnliche CSS-Details im Abschnitt „Stile“ im rechten Bereich anzeigen. Mit den Werkzeugen zur Auswahl von Elementen können Sie die vollständigen Details von HTML und CSS für jedes Element abrufen.

Im Abschnitt "Stile" können Sie für jeden Stil einen CSS-Dateilink sehen. Sie können auf den Dateilink klicken, um ihn unter der Registerkarte "Quellen" zu öffnen, die wir im folgenden Abschnitt erläutern.

Live-Bearbeitung von Webseiteninhalten

Jetzt möchten Sie einige Änderungen an der Überschrift vornehmen und sehen, wie sie auf der Live-Site aussieht. Dazu müssen Sie sich im Administratorbereich Ihrer Website anmelden und den Quellinhalt aktualisieren. Sie werden jedoch Probleme haben, das Element mit verschiedenen Farben oder Schriftgrößen zu visualisieren. Der einfache Weg besteht darin, den Quell-HTML-Code im Abschnitt „Elemente“ oder CSS-Stile im Abschnitt „Stile“ zu bearbeiten.

Um HTML zu bearbeiten, wählen Sie zuerst das Element auf der Registerkarte „Elemente“ aus und klicken Sie mit der rechten Maustaste darauf. Oder Sie können auf das Symbol mit den drei Punkten ganz links neben dem ausgewählten Element klicken. Sie können das Element einfach löschen oder ausblenden, indem Sie diese Option aus dem Kontextmenü auswählen. Wenn Sie bearbeiten möchten, wählen Sie die Option "Als HTML bearbeiten".

Dadurch wird die Textbearbeitung geöffnet und Sie können die HTML-Tags im Editor ändern oder dem Element eine zusätzliche CSS-Klasse hinzufügen. Klicken Sie nach der Bearbeitung auf einen beliebigen leeren Bereich in den DevTools, um die Bearbeitung zu beenden. Der Editor validiert und korrigiert die Tags automatisch. Wenn Sie beispielsweise das Start-Tag als <h4> ändern und vergessen, das End-Tag zu ändern, und es als </h3> belassen, wird es automatisch zurück zu den ursprünglichen <h3>…</h3>-Tags.

Ebenso können Sie die CSS-Stile auf der Registerkarte „Stile“ ändern. Erhöhen Sie beispielsweise die Schriftart der Überschrift h3 auf 40px und ändern Sie die Farbe in #c94608.

Sie können die Sofortvorschau auf der Seite sehen, um Ihnen eine Vorstellung davon zu geben, wie sie mit dem modifizierten CSS und HTML aussehen wird. Die Änderungen sind jedoch temporär und das Aktualisieren oder Neuladen der Seite stellt den ursprünglichen Inhalt wieder her. Sie können die Änderungen im Backend vornehmen, um sie dauerhaft auf der Webseite zu übernehmen.

Fehlerbehebung bei Webseitenfehlern

Einer der Hauptzwecke von DevTools besteht darin, Browserprobleme zu finden, die die ordnungsgemäße Anzeige der Seite verhindern. Wie Sie in den obigen Screenshots sehen können, zeigt Edge zwei Zahlen (34 und 33) in der DevTools-Menüleiste an.

Das erste Zahlensymbol zeigt die Browser-Konsolenfehler und -warnungen an, die Sie auf der Registerkarte "Konsole" sehen können.
Die zweite Nummer zeigt Ihnen die offenen Probleme, falls vorhanden, in einem separaten Fenster innerhalb der DevTools, das Sie unabhängig schließen können.

Fehler, Warnungen und Tipps werden mit Etiketten angezeigt, um Ihnen das Verständnis des Problems zu erleichtern. Klicken Sie auf jedes Element, um weitere Details zu dem Problem und der betroffenen Ressource auf Ihrer Seite zu erhalten. Sie müssen den Code ändern und erneut testen, um zu überprüfen, ob die Fehler behoben sind.

Quelldateien unabhängig anzeigen

Die Registerkarte „Quellen“ in Edge DevTools ähnelt der Anzeige des vollständigen Quellcodes. Es zeigt jedoch die von jedem Teil der Domäne und von externen Domänen geladenen Ressourcen separat in einer Struktur. Sie können eine beliebige Datei auswählen und den Inhalt in DevTools in der Vorschau anzeigen.

Wenn Sie eine minimierte Datei auswählen, werden Sie von Edge mit der Frage „Diese minimierte Datei hübsch drucken?“ aufgefordert. Die Verkleinerung entfernt alle Leerzeichen und Zeilenumbrüche in der Datei und macht sie für Benutzer unlesbar. Sie können Pretty Printing verwenden, um die minimierten Dateien in einen lesbaren Modus mit Zeilenumbrüchen und Leerzeichen zu konvertieren. Sie können auf die Schaltfläche „Pretty-Print“ klicken oder auf { } in der Statusleiste klicken.

Alle anderen Elemente wie Netzwerk, Leistung usw. sind nützlich für die erweiterte Analyse der Seitenladezeit, das Überprüfen von HTTP-Headern, das Auffinden von Sicherheitsproblemen und das Testen der SEO-Leistungsbewertung. Sie können die DevTools schließen, wenn Sie mit der Analyse fertig sind.

Letzte Worte

Die neueste Edge Chromium-Version ist leistungsfähiger als alle anderen Browser. Sie können Microsoft Edge DevTools verwenden, um den Quellcode der Webseite zu Fehlerbehebungs- und Entwurfszwecken anzuzeigen. Es ist auch möglich, den vollständigen Quellcode zu erhalten und die auf der Seite verwendeten Dateien anzuzeigen.