Videos zur Webentwicklung mit Microsoft Edge

Entdecken Sie neue Microsoft Edge-Webentwicklungstechnologien und -produkte und erfahren Sie mehr darüber, einschließlich DevTools, Webplattform-APIs und -Features, Progressive Web-Apps und WebView2.

Diese Seite enthält Links zu kurzen Videos, die sich jeweils nur auf ein Feature konzentrieren und eine Demo enthalten.

Microsoft veröffentlicht regelmäßig neue Videos auf dem YouTube-Kanal Microsoft Edge, und sie sind auch unten aufgeführt.

Klicken Sie auf ein Thumbnail aus der folgenden Liste, um das entsprechende Video auf YouTube anzusehen.

Microsoft Edge-Kanal auf YouTube

Alle Videos zur Entwicklung mit Microsoft Edge finden Sie auf dem Kanal Microsoft Edge (@MSFTEdge) auf YouTube.

Der Microsoft Edge-Kanal enthält die folgenden Wiedergabelisten:

• Entwickler
• Neuigkeiten in DevTools
• Erweiterungen

Erklären Sie DevTools-Konsolenfehler mit Copilot in Edge

8. Februar 2024

Die Konsolen - und Quellentools in Microsoft Edge DevTools sind jetzt in Copilot in Microsoft Edge integriert, um Ihnen zu helfen, Fehler und Quellcode zu verstehen. Verwenden Sie dieses Feature, um Hilfe beim Debuggen Ihres Codes zu erhalten.

Siehe auch:

• Erklären Sie Konsolenfehler und -warnungen mit Copilot in Edge

Der JSON-Viewer

Dienstag, 17. August 2023

Der JSON-Viewer formatiert und hebt automatisch JSON-Antworten und Dateien in Browserregisterkarten hervor. Wenn Ihr Webserver auf HTTP-Anforderungen mit als JSON codierten Daten antwortet, sind diese Daten nicht immer einfach zu lesen und werden manchmal als eine Textzeile zurückgegeben. Der JSON-Viewer ändert die zurückgegebenen Daten, um sie leichter lesbar zu machen. Die JSON-Syntax wird mit verschiedenen Farben hervorgehoben, Objekteigenschaften werden in eigenen Zeilen und eingerückt angezeigt, und Objekte können reduziert oder erweitert werden.

Siehe auch:

• Anzeigen einer JSON-Datei oder Serverantwort mit Formatierung

Microsoft Edge | Neuigkeiten in DevTools 113 und 114

Dienstag, 24. Juli 2023

Cover:

• Das Tool " Absturzanalyse ".
• Aggregieren Sie CSS-Selektorstatistiken.
• Warnungen für CSS-Eigenschaften, die Layout auslösen.
• Verbesserungen des Speichertools.
• Verbesserungen der Barrierefreiheit.
• Bessere Unterstützung des Modus für hohen Kontrast in der DevTools-Erweiterung für VS Code.
• console.table().

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 114)
• Neuigkeiten in DevTools (Microsoft Edge 113)

Microsoft Edge | Neuigkeiten in DevTools 112

Dienstag, 26. April 2023

Cover:

• Unminified JS names for OOPIFs in the Performance tool.
• Nicht einfache CSS-Selektoren im CSS-Übersichtstool .
• Codefaltung im JSON-Viewer.
• Verbesserungen in der DevTools-Benutzeroberfläche.
• Neue Markierungen für Protokollpunkte und bedingte Haltepunkte.
• So ändern Sie Designs in DevTools.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 112)
• Analysieren Sie die Leistung des CSS-Selektors während "Stil neu berechnen"-Ereignisse – CSS-Selektorstatistiken.
• Anzeigen einer JSON-Datei oder Serverantwort mit Formatierung

Microsoft Edge | Neuigkeiten in DevTools 111

Dienstag, 28. März 2023

Cover:

• Remotedebuggen von Webinhalten auf XBOX- und HoloLens-Geräten.
• Unminimierte Datei- und Funktionsnamen im Tool "Leistung ".
• Kann die CSS-Selektorstatistiktabelle nach Excel kopieren.
• Rendering-Emulationsfeatures in der Symbolleiste Gerätemodus.
• Seitenleiste des Tools " Better Elements ".
• Bessere Barrierefreiheit in der Schnellansicht .
• Hochauflösende Farbfeatures.
• Passen Sie die Spalten des Netzwerktools an.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 111)
• Sicheres Debuggen von Originalcode durch Veröffentlichen von Quellzuordnungen zum Azure Artifacts-Symbolserver

Microsoft Edge | Neuigkeiten in DevTools 110

Dienstag, 16. Februar 2023

Cover:

• Schnellere Heap-Momentaufnahmen.
• Verbesserte Anpassung des Fokusmodus (DevTools-Benutzeroberfläche).
• Verbesserungen bei Barrierefreiheit und Kontrastdesigns.
• Automatischer Pretty-Printing vor Ort im Tool "Quellen ".
• Simulate prefers-color-scheme.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 110)
• Übersicht über DevTools

Microsoft Edge | Neuigkeiten in DevTools 109

Dienstag, 17. Januar 2023

Cover:

• Freigeben von Arbeitsspeicher- und Leistungsablaufverfolgungen für mehr Daten.
• Selector-Statistiken im Leistungstool .
• Verfolgen Sie Garbage-Collection-Objekte (GC'd) im Speichertool .
• Heap Snapshot Visualizer-Erweiterung.
• Neu gestalteter Schnellansichtsbereich im Fokusmodus.
• Neue Befehle für die Formatvorlagenbereiche .
• Inspecting elements.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 109)
• Freigeben einer Speicherablaufverfolgung mit mehr Daten
• Freigeben einer Leistungsablaufverfolgung mit mehr Daten
• Analysieren Sie die Leistung des CSS-Selektors während Style-Ereignissen neu berechnen – Selektorstatistiken.
• Untersuchen Sie die Speicherbelegung mit reduziertem Müll ("Objekte einschließen"-Kontrollkästchen) in Beschleunigen der JavaScript-Laufzeit (Profilerstellungstyp "Zuordnungsstichling").
• Trash Talk: der Orinoco-Müllsammler
• Heap Snapshot Visualizer-Erweiterung .

Microsoft Edge | Neuigkeiten in DevTools 108

Dienstag, 16. Dezember 2022

Cover:

• Verbesserte Navigation in der Befehlspalette.
• Korrekturen im Modus "Hoher Kontrast".
• Warnung zu deaktiviertem JavaScript
• Siehe inaktive CSS-Eigenschaften.
• Neue Dokumentation zum Erstellen eigener Tools.
• WebDriver verfügbar unter macOS auf Apple M1.
• Verwenden Sie getrennte Elemente, um DOM-Lecks zu finden.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 108)
• Erstellen einer DevTools-Erweiterung, Hinzufügen einer benutzerdefinierten Toolregisterkarte und eines benutzerdefinierten Bereichs
• Das Dateiformat für die Heap-Momentaufnahme
• Microsoft Edge WebDriver – Laden Sie den Edge-WebDriver herunter.

Microsoft Edge | Neuigkeiten in DevTools 107

Dienstag, 8. November 2022

Cover:

• Textbeschriftungen in der DevTools-Benutzeroberfläche des Fokusmodus.
• Neue Tastenkombination für die Befehlspalette.
• Große Heap-Momentaufnahmen im Speichertool .
• Korrekturen im Modus "Hoher Kontrast".
• Deaktivieren Sie "Während der Eingabe suchen".
• Automatisieren Sie WebView2 mit Playwright.
• Passen Sie Tastenkombinationen an.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 107)

Microsoft Edge | Erfahren Sie, wie Sie das Netzwerktool verwenden.

Dienstag, 6. Oktober 2022

Erfahren Sie, wie Sie das Netzwerktool in den Microsoft Edge DevTools verwenden.

Cover:

• Warum das Netzwerktool in DevTools für Webentwickler unerlässlich ist.
• Wie Websites die Informationen aus dem Internet abrufen, die sie benötigen, um im Webbrowser angezeigt zu werden.
• Wann das Netzwerktool verwendet werden sollte.
• Eine Tour durch die Benutzeroberfläche des Netzwerktools .
• Anzeigen von Anforderungen im Netzwerktool .
• Anzeigen der Details für eine Anforderung/Antwort.
• Anpassen des Netzwerktools .
• Sortieren, Filtern und Suchen von Anforderungen.
• Untersuchung von Leistungsproblemen.
• Blockieren von Anforderungen und Exportieren als HAR-Dateien.
• Bearbeiten und erneutes Senden von Anforderungen.

Siehe auch:

• Überprüfen der Netzwerkaktivität

Microsoft Edge | Neuigkeiten in DevTools 106

3. Oktober 2022

Cover:

• Das Befehlspaletten-Experiment.
• Schnelle Problembehebung in der Edge DevTools VS Code-Erweiterung.
• DevTools verwendet weniger Speicherplatz.
• Bessere Barrierefreiheit im Fokusmodus (DevTools-Benutzeroberfläche) und Fehlerbehebung bei hohem Kontrast.
• Veraltete Chromium Hell/Dunkel-Designs.
• Neue Interaktionsnachverfolgung im Leistungstool.
• mithilfe von Codeausschnitten.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 106)

Microsoft Edge | Neuigkeiten in DevTools 105

Dienstag, 6. September 2022

Cover:

• Debuggen der PWA-Protokollbehandlung.
• Verbesserungen für den Fokusmodus.
• Fehlerbehebungen für den Fokusmodus.
• Verbesserte Zuverlässigkeit der Tools für Netzwerk und Probleme.
• Livebearbeitung des Funktionscodes während des Debuggens.
• Verwenden von Protokollpunkten.

Siehe auch:

• Neuigkeiten in DevTools 105

Grundlegendes zur Benutzeroberfläche von DevTools

Freitag, 1. September 2022

Dieses etwas ältere Video (September 2022) zeigt die Legacybenutzeroberfläche für DevTools:

• Anstelle der Aktivitätsleiste zeigt das Video die Hauptsymbolleiste.
• Anstelle des Schnellansichtsbereichs zeigt das Video die Schublade am unteren Rand von DevTools.

Cover:

• Die Benutzeroberflächenstruktur von DevTools, mit der Hauptsymbolleiste und dem Hauptbereich oben und der Schubladensymbolleiste und dem Bereich unten.
• So ist die Microsoft Edge DevTools-Benutzeroberfläche organisiert
• Funktionsweise der Hauptteile der DevTools-Schnittstelle
• Welche Tools stehen zur Verfügung.
  • Das Untersuchungstool.
  • Geräteemulationsmodus .
  • Werkzeuge in der Hauptsymbolleiste oder in der Schublade.
• Die Schaltfläche "Weitere Registerkarten ".
• Die Schaltfläche "Weitere Tools ", um alle 30+ Tools anzuzeigen.
• Werkzeuge zum Schließen.
• Neuanordnen von Tools in der Hauptsymbolleiste.
• Die Schublade und ihre Symbolleiste.
• Verschieben von Tools zwischen der Hauptsymbolleiste und der Schubladensymbolleiste .
• Wiederherstellen der Standardeinstellungen.

Siehe auch:

• Übersicht über DevTools
• Informationen zur Liste der Tools

Microsoft Edge | Neuigkeiten in DevTools 104

Dienstag, 5. August 2022

Cover:

• Fehlerbehebungen bei Rendering/Barrierefreiheit.
• Zusammengesetzte Ebenen befinden sich jetzt im 3D-Ansichtstool , und das Ebenentool wurde entfernt.
• Gruppieren von Dateien im Tool "Quellen ".
• Ermitteln Sie, wo Knoten in Webkomponenten platziert werden.
• Wo Sie weitere Informationen finden.
• So ändern Sie, wo die Aktivitätsleiste platziert wird.

Siehe auch:

• Neuigkeiten in DevTools 104
• 3D-Debuggen von Webs mit dem Tool "3D-Ansicht " – Blogbeitrag.

Microsoft Edge | Neuigkeiten in DevTools 103

5. Juli 2022

Cover:

• Neu gestaltetes Willkommenstool .
• Neuer Farbwähler.
• Neue Knotentypen für Speicherheap-Momentaufnahme.
• Fehlerbehebung für den Modus "Hoher Kontrast".
• Öffnen Sie eine beliebige HTML-Seite in der VS Code-Erweiterung.

Siehe auch:

• Neuigkeiten in DevTools 103

Debuggen des Webs in 3D

Dienstag, 21. Juni 2022

Das Tool für die 3D-Ansicht in Microsoft Edge DevTools bietet eine 3-dimensionale Darstellung der Webseite, die Sie überprüfen. Verwenden Sie das Tool 3D-Ansicht , um gängige Webentwicklungsprobleme zu debuggen, z. B.:

• Tief geschachtelte DOM-Knoten.
• Elemente außerhalb des Dokuments.
• Unerwünschte Bildlaufleisten.
• Probleme beim Z-Index-Stacking.
• Leistung zusammengesetzter Ebenen.

Siehe auch:

• Navigieren Sie mit dem Tool 3D-Ansicht durch Webseiten-Layer, Z-Index und DOM
• 3D-Debuggen von Webs mit dem Tool "3D-Ansicht " – Blogbeitrag.

Verwenden Ihrer bevorzugten Sprache in Microsoft Edge DevTools

Dienstag, 9. Juni 2022

Hier erfahren Sie, wie Sie die Sprache der Benutzeroberfläche auswählen, die für Sie zum Codieren und Debuggen am bequemsten ist. Microsoft Edge DevTools unterstützt 13+ verschiedene Sprachen.

Siehe auch:

• Ändern der DevTools-Spracheinstellungen

Microsoft Edge | Neuigkeiten in DevTools 102

Dienstag, 1. Juni 2022

Cover:

• Visual Studio Code.
• Heap Snapshot Export.
• Wechselt interne Knoten.
• Hilfesymbol.
• Behobene Probleme.

Siehe auch:

• Neuigkeiten in DevTools 102

Vollständige Formatierung des Dropdownteils eines HTML-Codes <select> mit dem <selectmenu> Element

31. Mai 2022

Die Styling-Elemente <select> waren eine Herausforderung. Das experimentelle <selectmenu> (oder <selectlist>) Element verspricht, die verbleibenden Einschränkungen zu überwinden, indem es Webentwicklern ermöglicht, alle Teile des Elements zu stylen.

Update vom Juni 2024: Dieses Element ist noch experimentell. Das <selectmenu> Element wurde in 2023 umbenannt <selectlist> .

Siehe auch:

• Demos <selectlist> der Benutzeroberfläche öffnen
  • /selectlist/ – Quellcode und Infodatei.
• Reader Demo-App
  • /reader/ - Quellcode und Readme.
• Echtes Stylen <select> von Elementen – Blogbeitrag über das Styling <select> von Elementen und dem <selectmenu> Element.

Erweiterte Filterung von Problemen in Edge DevTools und VSCode

Montag, 20. Mai 2022

Jedes Webprodukt hat Probleme. Das Microsoft Edge DevTools-Problemtool analysiert die aktuelle Webseite und meldet nach Typ gruppierte Probleme, einschließlich Barrierefreiheit, Kompatibilität, Leistung und mehr.

Die Microsoft Edge DevTools-Erweiterung für Visual Studio Code macht Probleme direkt in Ihrem Quellcode verfügbar.

Veröffentlichte Produkte können Probleme haben. Basierend auf Ihrem Feedback haben wir nützliche Möglichkeiten zum Filtern von Problemen hinzugefügt. Sie können Probleme deaktivieren, die aus Drittanbieterbibliotheken stammen, und auswählen, zu welchen Browsern Probleme angezeigt werden sollen.

Siehe auch:

• Suchen und Beheben von Problemen mit dem Problemtool

Erstellen einer Animation mit Bildlaufverknüpfung ohne JavaScript

Montag, 12. Mai 2022

Erfahren Sie mehr über das CSS-Feature für scrollverknüpfte Animationen und wie Sie damit eine Lesefortschrittsanzeige auf einer Webseite erstellen können, ohne JavaScript zu verwenden. Dies ist ein Feature der Webplattform als Ganzes, nicht nur von Microsoft Edge.

Ab dem 21. Juli 2023 ist dieses Feature nicht mehr experimentell und wird jetzt in Microsoft Edge ohne Kennzeichnung unterstützt. Ab 2022 Beschreibung: CSS-Bildlaufanimationen sind ein experimentelles Feature in Microsoft Edge. Um dieses Feature zu testen, wechseln Sie zu edge://flags der Einstellung Experimentelle Webplattform-Features , und aktivieren Sie diese dann.

Siehe auch:

• Reader-Demo : Demo-App, die im Video gezeigt wird.
  • Quellcode und Infodatei für Reader-Demo
• CSS-Scroll-gesteuerte Animationen bei MDN.
• @scroll-Zeitleiste bei MDN: Originalseite über die experimentelle CSS-Funktion für scrollverknüpfte Animationen.

Anpassen der Microsoft Edge-Entwicklertools und schneller Featurezugriff

Dienstag, 5. Mai 2022

Erfahren Sie, wie Sie DevTools an Ihre Anforderungen anpassen. Cover:

• Andocken oder Abdocken von DevTools.
• Öffnen Sie neue Tools.
• Schließen Sie Tools, die Sie nicht benötigen.
• Verschieben Sie Werkzeuge in die untere Schublade (jetzt der Schnellansichtsbereich ).
• Passen Sie die Textgröße an.
• Passen Sie das Design an.
• Verwenden Sie die Befehlsmenü-Tastenkombinationen, um DevTools schnell anzupassen.

Siehe auch:

• Übersicht über DevTools
• Ausführen von Befehlen im Befehlsmenü

Hervorheben von Text im Web mit der benutzerdefinierten CSS-Hervorhebungs-API

Dienstag, 28. April 2022

Das Formatieren von Textbereichen im Web ist sehr nützlich, war aber in der Vergangenheit eine komplizierte Sache.

Die CSS Custom Highlight API ist die Zukunft der Hervorhebung von Textbereichen im Web. Diese API bietet Webentwicklern JavaScript- und CSS-Features, die das Formatieren beliebiger Textbereiche einfacher und effizienter machen.

Siehe auch:

• API für benutzerdefinierte CSS-Hervorhebungen: Die Zukunft der Hervorhebung von Textbereichen im Web
• Demo der benutzerdefinierten CSS-Hervorhebungs-API

Microsoft Edge | Neuigkeiten in DevTools 101

Dienstag, 28. April 2022

Cover:

• Verwenden der Konsole.
• Cache für Quellzuordnungen.
• Spalte "Statustext".
• Wechseln von Themen.

Siehe auch:

• Neuigkeiten in DevTools 101
• Konsolenintegration: https://aka.ms/ConsoleIntegration
• Netzwerkspalten: https://aka.ms/NetworkColumns

Microsoft Edge | Neuigkeiten in DevTools 100

Freitag, 19. April 2022

Cover:

• Das Microsoft Edge Developer Tools-Repository, um Feedback und Ideen zu übermitteln.
• Für die DevTools-Benutzeroberfläche wurden tschechische und vietnamesische Sprachen hinzugefügt.
• Filtern Sie Heapmomentaufnahmen im Speichertool nach Knotentyp.
• Das Netzwerktool verfügt über eine Spalte "Erfüllt von ", in der Service Worker oder Cache angezeigt werden.
• Die Links aus einem importierten Leistungsprofil verwenden Quellzuordnungen vom Azure Artifacts-Symbolserver, um sie wieder auf Ihren vertrauten ursprünglichen Quellcode zuzuordnen.

Siehe auch:

• Neuigkeiten in DevTools 100
• DevTools-Feedbackrepository

Microsoft Edge | Neuigkeiten in DevTools 99

Dienstag, 21. März 2022

Cover:

• Azure Artifacts-Symbolserver und Sourcemaps.
• Verbesserter Bereich "Ebenen " im Tool 3D-Ansicht .
• Verwenden Sie Sourcemaps, um die Minimierung von Leistungsprofilen aufzuheben.
• Live-ASP.NET-Debugging in DevTools für Visual Studio.
• Barrierefreiheit im Netzwerkkonsolentool und 3D-Ansichtstool .

Siehe auch:

• Neuigkeiten in DevTools 99

Automatische Bildbeschreibungen in Microsoft Edge

Dienstag, 17. März 2022

Microsoft Edge stellt automatisch generierten Alternativtext für Bilder bereit, die ihn nicht enthalten. Automatisch generierter Alternativtext hilft Benutzern von Hilfstechnologien, z. B. Sprachausgaben, die Bedeutung oder Absicht von Bildern im Web zu erkennen.

Viele blinde oder sehbehinderte Menschen erleben das Web hauptsächlich über eine Sprachausgabe: eine Hilfstechnologie, die den Inhalt jeder Seite laut vorliest. Bildschirmleser sind darauf angewiesen, dass ihnen Bildbezeichnungen (Alternativtext) zur Verfügung gestellt werden, die es ihnen ermöglichen, visuelle Inhalte wie Bilder und Diagramme zu beschreiben, damit der Benutzer den gesamten Inhalt der Seite verstehen kann.

Alternativtext ist wichtig, um das Web barrierefrei zu machen, wird jedoch oft übersehen. Bei mehr als der Hälfte der von Sprachausgaben verarbeiteten Bilder fehlt Alternativtext.

Siehe auch:

• Scheint zu sagen: Microsoft Edge stellt jetzt automatisch generierte Bildbezeichnungen bereit – Blogbeitrag

Microsoft Edge | Neuerungen in DevTools 98

Dienstag, 23. Februar 2022

Cover:

• Emulieren des Modus "Erzwungene Farben".
• Aktivitätssymbole im Ereignisprotokoll des Leistungstools verfügen über QuickInfos.
• Flache Größen im Speichertool werden als Dezimalwerte dargestellt.
• Im Netzwerktool wird die Größe des Suchfelds nach Bedarf geändert.
• Im Anwendungstool ist die Benutzeroberfläche korrekt ausgerichtet.
• Updates für das Chromium-Browsermodul.

Siehe auch:

• Neuerungen in DevTools 98

Microsoft Edge | Neuerungen in DevTools 97

1. Februar 2022

Cover:

• Das Tool "Getrennte Elemente " ist standardmäßig verfügbar.
• Das Tool für die 3D-Ansicht unterstützt das Ändern von Farbdesigns in DevTools.
• Verbesserungen des Fokusmodus (DevTools-Benutzeroberfläche).
• Die DevTools-Erweiterung für VS Code verfügt über zusätzliche Features.

Siehe auch:

• Neuerungen in DevTools 97
• Aktualisieren Sie die Geräteliste: https://aka.ms/RefreshDeviceList
• AutoVervollständigen mit "Als HTML bearbeiten" https://aka.ms/AutocompleteEditHTML
• Verbesserte Debugging-Erfahrung: https://aka.ms/NewDebugging

Debuggen von Arbeitsspeicherverlusten mit dem Microsoft Edge Getrennte Elemente-Tool

9. Dezember 2021

Update vom März 2025: Das Tool "Getrennte Elemente" wurde entfernt. Verwenden Sie zum Debuggen von DOM-Arbeitsspeicherverlusten den Profilerstellungstyp "Getrennte Elemente" im Speichertool.

Speicherverluste treten auf, wenn der JavaScript-Code einer Anwendung immer mehr Objekte im Speicher behält, anstatt sie für den Browser freizugeben. Wir haben das Detached Elements-Tool zusammen mit den Microsoft Teams-Entwicklern entwickelt, und es hat uns bereits geholfen, Speicherverluste auf vielen unserer eigenen Websites und Apps zu finden und zu beheben.

Siehe auch:

• Find DOM tree memory leaks from detached elements in Beheben von Arbeitsspeicherproblemen.
• Debuggen von Arbeitsspeicherverlusten mit dem Microsoft Edge Detached Elements Tool – Blogbeitrag.

Microsoft Edge | Neuigkeiten in DevTools 96

9. Dezember 2021

Cover:

• Neue DevTools-Benutzeroberfläche: Fokusmodus.
• Das Konsolentool kann sich sowohl im oberen als auch im unteren Bereich von DevTools befinden.
• Das Tool "Quellen" benachrichtigt dich, wenn Sourcemaps nicht geladen werden können.
• Wenn Sie auf das Dreieckssymbol eines Dropdowns klicken, wird das Menü geöffnet.
• Beim Öffnen von Quelldateien in Visual Studio Code ist das Quellentool integriert.

Siehe auch:

• Neuigkeiten in DevTools 96
• Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Microsoft Edge | Neuerungen in DevTools 95

Dienstag, 8. Dezember 2021

Cover:

• Websymbol durchsuchen für alle Fehler- und Warnmeldungen.
• Verbesserter Zugriff zum Definieren User-Agent Clienthinweise.
• Konsolenfilter zeigen gruppierte Nachrichten an.

Siehe auch:

• Neuerungen in DevTools 95

Microsoft Edge | Die Pipetten-API

Dienstag, 22. November 2021

Das Microsoft Edge-Team hat die neue EyeDropper-API in Zusammenarbeit mit dem Open-Source-Projekt Chromium spezifiziert und implementiert. Geben Sie Feedback unter Probleme - WICG/Pipette | github.com.

Viele kreative Anwendungen ermöglichen es Benutzern, Farben aus Teilen eines App-Fensters oder sogar aus dem gesamten Bildschirm auszuwählen, in der Regel unter Verwendung einer Pipettenmetapher. Die EyeDropper-API ermöglicht es Autoren, eine vom Browser bereitgestellte Pipette bei der Erstellung benutzerdefinierter Farbwähler im Web zu verwenden.

Siehe auch:

• Pipetten-API bei MDN.
• Pipetten-API-Demos

Microsoft Edge | Neuigkeiten in DevTools 94

Dienstag, 12. November 2021

Cover:

• Suchen Sie im Web nach Konsolenfehlern.
• Haltepunktsymbole werden angezeigt, wenn Sie Visual Studio Code-Designs verwenden.
• Die DevTools-Erweiterung für Visual Studio Code enthält die neuesten Tools, Designunterstützung und hilfreiche Links. JavaScript-Debugger-Verbindung zu Remote-Arbeitsbereichen.

Update: Das Designfeature von Visual Studio Code wurde entfernt, und solche Designs rückgängig machen zu den Standarddesigns:

• Leicht+
• Dark+

Siehe auch:

• Neuigkeiten in DevTools 94
• Tastenkombinationen – Navigieren in DevTools mit einer Tastatur.

Microsoft Edge | Neuerungen in DevTools 93

Dienstag, 11. Oktober 2021

Cover:

• DevTools-Benutzeroberfläche.
• Debuggen Sie Arbeitsspeicherverluste von DOM-Knoten mit dem Getrennte Elemente-Tool .
• Anzeigesprache ändern.
• Kopieren Sie CSS-Deklarationen im Bereich Formatvorlagendes Elemente-Tools für CSS-in-JS-Bibliotheken.
• Einfachere Anpassung der User-Agent Clienthinweise.
• Sprachausgaben kündigen Fehler, Warnungen und Probleme an, die in der Symbolleiste und in der Konsole angezeigt werden.
• Kopieren als PowerShell im Netzwerktool enthält Cookies.
• Der Visual Studio Code-Debugger ist in die DevTools-Erweiterung für VS Code integriert.

Siehe auch:

• Neuigkeiten in DevTools (Microsoft Edge 93)

Microsoft Edge | Zustand der Plattform

25. Mai 2021

Microsoft Edge bietet eine überzeugende und konsistente Plattform und Tools für Entwickler. Da der Support für unsere älteren Browser eingestellt wird, wird Edge bald der einzige unterstützte Browser von Microsoft auf Windows 10 sein. Erfahren Sie mehr über die neuesten Informationen über die Edge-Plattform, die Tools und Web-Apps.

Cover:

• Delegierte Tintenspuren.
• Neue Webfunktionen für Entwickler.
• Bei Betriebssystemanmeldung ausführen.
• Microsoft Edge Tools für VS Code.

Siehe auch:

• Die Zukunft von Internet Explorer unter Windows 10 liegt im Microsoft Edge – IE-Modus.
• Einführung von Microsoft Edge mit FastTrack
• "Microsoft Edge: Status der Plattform": Sitzungsressourcen

Ignite | März 2021 | Die Geschichte der Web-Apps entzünden

2. März 2021

Progressive Web-Apps (PWA) werden in Microsoft Edge unterstützt und stellen eine Möglichkeit dar, die Auffindbarkeit und das Engagement für Ihre Anwendung zu verbessern. Neue Funktionen der Webplattform. Wie diese modernen Webanwendungen nahtlos in Microsoft Windows integriert sind.

Cover:

• Die Fähigkeit zur Modernisierung.
• Gemeinsame Anstrengungen zur Stärkung der Webplattform.
• Microsoft Edge und das Chromium-Browsermodul.
• Microsoft Edge und Webfunktionen (Projekt Fugu).
• PWAs unter Windows zum Glänzen bringen.
• Best-in-Class-Reichweite.
• Installieren einer Website als App.
• Beteiligen Sie sich an PWAs unter Windows.

Siehe auch:

• Übersicht über progressive Web-Apps (PWAs)

Ignite | Sep. 2020 | Die neuesten Entwicklertools

Mittwoch, 22. September 2020

Microsoft Edge-Entwicklungstools erleichtern die Webentwicklung, das Testen und die Automatisierung. Erfahren Sie, wie wir der Barrierefreiheit in unseren Tools und Anwendungen Priorität einräumen und wie wir andere dabei unterstützen, dasselbe zu tun.

Cover:

• DevTools-Erweiterung für VS Code.
• Browserübergreifendes Testen und Automatisieren. Selenium, WebDriver, Puppeteer, Playwright und CI/CD über Docker-Container bereitzustellen.
• Zusammenarbeit an der Chromium Browser Engine. Wie Sie einen Beitrag leisten können.
• Lokalisierte Benutzeroberfläche in Entwicklertools.
• Barrierefreiheit in Entwicklertools.

Siehe auch:

• Dokumentation zu Microsoft Edge-DevTools

Weitere Informationen

YouTube-Plattform:

• Microsoft Edge (@MSFTEdge)-Kanal auf YouTube
  • Entwickler – Wiedergabeliste .
  • Neuigkeiten in DevTools – Wiedergabeliste.
  • Erweiterungen – Wiedergabeliste.
• Erstellen, Bereitstellen und Verwalten von WebView2-Anwendungen – 2. März 2021.