Entwickeln für das Web mit Microsoft Edge

Artikel
03/23/2022
4 Minuten Lesedauer

Entwickeln Sie mit Microsoft Edge für das Web mithilfe von Microsoft Edge DevTools, Microsoft Edge-Erweiterungen, Progressive Web Apps, WebDriver-Automatisierung, WebView2 und mehr.

Microsoft Edge DevTools

Der Microsoft Edge Browser enthält integrierte Webentwicklungstools, die Microsoft Edge DevTools genannt werden. DevTools ist eine Reihe von Webentwicklungstools, die neben einer gerenderten Webseite im Browser angezeigt werden. DevTools bietet eine leistungsstarke Möglichkeit zum Untersuchen und Debuggen von Webseiten und Web-Apps. Sie können sogar Quelldateien bearbeiten und Websiteprojekte erstellen, alles innerhalb der DevTools-Umgebung.

Mit DevTools haben Sie folgende Möglichkeiten:

Untersuchen, optimieren und ändern Sie die Formatvorlagen von Elementen auf der Webseite mithilfe von Live-Tools mit einer visuellen Benutzeroberfläche. Überprüfen Sie, wo der Browser Inhalte gespeichert hat, um die Webseite zu erstellen, einschließlich .html, .cssund .js``.png Dateiformate.
Emulieren Sie, wie sich Ihre Webseite auf verschiedenen Geräten verhält, und simulieren Sie eine mobile Umgebung mit unterschiedlichen Netzwerkbedingungen. Überprüfen Sie den Netzwerkdatenverkehr, und sehen Sie sich den Ort der Probleme an.
Debuggen Sie Ihr JavaScript mithilfe des Haltepunkt-Debuggings und mit der Live-Konsole. Finden Sie Speicherprobleme und Renderingprobleme mit Ihren Web-Apps.
Suchen Sie Barrierefreiheits-, Leistungs-, Kompatibilitäts- und Sicherheitsprobleme in Ihren Produkten, und verwenden Sie DevTools, um die gefundenen Barrierefreiheitsprobleme zu beheben.
Verwenden Sie eine Entwicklungsumgebung, um Änderungen in DevTools mit dem Dateisystem und aus dem Web zu synchronisieren.

Siehe Übersicht über DevTools.

Microsoft Edge-Erweiterungen

Erstellen Sie eine Erweiterung für Microsoft Edge, um die Features des Browsers hinzuzufügen oder zu ändern. Erweiterungen verbessern die Browserumgebung, um eine spezielle Funktion bereitzustellen, die für eine Zielgruppe wichtig ist.

Sie können eine Microsoft Edge Erweiterung erstellen, wenn Sie eine Idee oder ein Produkt haben, das auf einem bestimmten Webbrowser oder verbesserungen an Features bestimmter Webseiten basiert. Beispiele für Begleitfunktionen sind Anzeigenblocker und Kennwortmanager.

Eine Microsoft Edge Erweiterung ist ähnlich strukturiert wie eine reguläre Web-App und umfasst in der Regel Folgendes:

Eine JSON-Datei des App-Manifests, die grundlegende Plattforminformationen enthält.
Eine JavaScript-Datei, die das Verhalten der Browsererweiterung definiert.
HTML- und CSS-Dateien, die die Benutzeroberfläche definieren.

Siehe Übersicht über Microsoft Edge Erweiterungen.

Progressive Web-Apps

Progressive Web Apps verwenden offene Webtechnologien, um plattformübergreifende Interoperabilität bereitzustellen. Sie funktionieren wie native Apps auf unterstützenden Plattformen und wie normale Websites in anderen Browsern.

Progressive Web Apps kombinieren das Beste aus dem Web und kompilierten Apps, um Benutzern eine appähnliche, für ihre Geräte angepasste Oberfläche zu bieten. Eine Progressive Web App ist eine Website, die schrittweise erweitert wird, um wie installierte, systemeigene Apps auf unterstützenden Plattformen zu funktionieren, während sie wie normale Websites in anderen Browsern funktioniert.

Progressive Web Apps haben wesentlich niedrigere plattformübergreifende Entwicklungskosten als kompilierte Apps, für die eine bestimmte Codebasis für jede Plattform erforderlich ist, z. B. eine separate Codebasis für Android, für iOS und für jedes Desktopbetriebssystem.

Siehe "Übersicht über Progressive Web Apps (PWAs)".

WebView2

Das WebView2-Steuerelement wird von Microsoft Edge unterstützt und ermöglicht das Einbetten von Webtechnologien (HTML, CSS und JavaScript) in Ihre systemeigenen Anwendungen. Kombinieren Sie die Spezifität der Webplattform mit den vollständigen Funktionen systemeigener Plattformen.

Diagramm einer App mit systemeigenen UI-Bereichen links und oben links und WebView2-UI-Bereichen oben rechts und unten.

Das folgende Diagramm zeigt das Spektrum der Apps von der maximalen Reichweite bis zur maximalen Leistung:

Das Spektrum der Apps, von der maximalen Reichweite, aber weniger Leistung, bis hin zu einer optimalen Hybridmischung bis hin zu maximaler Leistung, aber mit weniger Reichweite.

Hybrid-Apps in der Mitte dieses Spektrums ermöglichen es Ihnen, das Beste aus beiden Welten zu genießen: die Omnipräsenz und Stärke der Webplattform in Kombination mit der Leistungsfähigkeit und den umfassenden Funktionen der systemeigenen Plattform.

Siehe "Einführung in Microsoft Edge WebView2".

Testen und Automatisieren

Es folgen Tools zum Automatisieren von Tests in Microsoft Edge:

Das DevTools-Protokoll wird verwendet, um Browser zu instrumentieren, zu untersuchen, zu debuggen und zu profilieren.
Verwenden Sie Origin Trials , um experimentelle APIs zu testen.
Playwright bietet browserübergreifende Automatisierung über eine einzelne API.
API-Steuerelemente des Gerüstgebers Microsoft Edge über das DevTools-Protokoll.
WebDriver simuliert die Benutzerinteraktion mit Microsoft Edge.
Webhint linting überprüft den Code auf Fehler und bewährte Methoden.

Siehe "Testen und Automatisierung in Microsoft Edge".

Webplattform

Überlegungen zum Entwickeln von Websites und Produkten für die Webplattform umfassen Folgendes:

Testen auf bevorstehende Änderungen, die sich auf die Kompatibilität Ihrer Website mit Microsoft Edge auswirken könnten.
Verschieben von Benutzern aus Internet Explorer zu Microsoft Edge.
Konfigurieren der Nachverfolgungsverhütung in Microsoft Edge.
Erkennen von Microsoft Edge von Ihrer Website.
Anpassen der Schaltfläche "Kennwort einblenden".
Erkennen von Windows 11 mithilfe von User-Agent Clienthinweisen.

Siehe Webplattform.

Microsoft Edge IDE-Integration

Verschiedene Features von Microsoft-Tools ermöglichen die Integration der Entwicklung mithilfe von Microsoft Edge, Visual Studio Code und Visual Studio, um Ihre Produkte, Webseiten und Web-Apps zu entwickeln, die die vollständige Integration in Microsoft Edge verwenden und verwenden.

Siehe Microsoft Edge IDE-Integration.

Barrierefreiheit in Microsoft Edge

Die Entwicklung Ihrer Webseiten, Web-Apps und webfähigen Produkte wird durch die umfangreichen Barrierefreiheitsfunktionen in Microsoft Edge und dem zugehörigen Tool-Ökosystem robust unterstützt.

Siehe Barrierefreiheit in Microsoft Edge.

Verwenden dieser Dokumentation

Dies sind Tipps für die Verwendung der Dokumentations-UI auf docs.microsoft.com.

Zoomen eines Bilds in den Dokumenten

So zeigen Sie Details zu einem Screenshot oder Diagramm an:

Klicken Sie mit der rechten Maustaste auf das Bild, und wählen Sie das Bild auf der neuen Registerkarte öffnen aus.
Schließen Sie die Bildregisterkarte, um zum Artikel zurückzukehren.

Nachschlagen von Schlüsselwörtern und Begriffen im Textfeld "Nach Titel filtern"

The multi-purpose Filter by title text box supports:

Navigieren im Inhaltsverzeichnis (TOC).
Index term lookup of key words.
Volltextsuche in den Dokumenten.

Geben Sie im Feld "Filter nach Titel " oben links einen Begriff oder ein Schlüsselwort ein, um Folgendes zu finden:

Das mehrzweckige Textfeld "Nach Titel filtern" zum Navigieren im Inhaltsverzeichnis, zum Durchsuchen der Dokumente und zum Nachschlagen von Schlüsselwörtern mit Indexbegriffen.

Wenn der gewünschte Artikel nicht gefunden wird, wählen Sie in allen Microsoft Edge Dokumentation nach "Suchbegriff" suchen:

Die Volltextsuchseite durchsucht zunächst alle Microsoft Edge Dokumente. Oder klicken Sie auf den Link "Alle Ergebnisse in Microsoft-Dokumenten anzeigen", um eine umfassendere Suche durchzuführen:

Bereitstellen von Feedback oder Melden von Problemen in den Microsoft Edge Entwicklerdokumenten

So geben Sie Feedback ein oder geben Probleme ein:

Um Feedback zu einer bestimmten Seite der Dokumentation zu übermitteln und anzuzeigen, klicken Sie unten auf der Seite auf die Schaltfläche "Diese Seite ".