Entdecken Sie neue Microsoft Edge-Webentwicklungstechnologien und -produkte, einschließlich DevTools, Webplattform-APIs und -Features, Progressive Web-Apps und WebView2.
Diese Seite enthält Links zu kurzen Videos, die sich jeweils auf nur ein Feature und eine Demo konzentrieren.
Erläutern von Fehlern in der DevTools-Konsole mithilfe von Copilot in Edge
8. Februar 2024
Die Konsolen- und Quellentools in Microsoft Edge DevTools sind jetzt in Copilot in Microsoft Edge integriert, um Fehler und Quellcode zu verstehen. Verwenden Sie dieses Feature, um Hilfe beim Debuggen Ihres Codes zu erhalten.
Der JSON-Viewer formatiert und hebt JSON-Antworten und -Dateien automatisch auf 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 die Lesbarkeit zu erleichtern. Die JSON-Syntax wird mit unterschiedlichen Farben hervorgehoben, Objekteigenschaften werden in ihren eigenen Zeilen und eingerückt angezeigt, und Objekte können reduziert oder erweitert werden.
Das Tool 3D-Ansicht in Microsoft Edge DevTools bietet eine dreidimensionale Darstellung der Webseite, die Sie untersuchen. Verwenden Sie das Tool 3D-Ansicht , um häufige Probleme bei der Webentwicklung zu debuggen, z. B.:
Verwenden Ihrer bevorzugten Sprache in Microsoft Edge DevTools
9. Juni 2022
Hier erfahren Sie, wie Sie die Benutzeroberflächensprache auswählen, die ihnen beim Programmieren und Debuggen am besten geeignet ist. Microsoft Edge DevTools unterstützt mehr als 13 verschiedene Sprachen.
Vollständiges Formatieren des Dropdownteils eines HTML-Codes <select> mit dem neuen <selectmenu> Element
31. Mai 2022
Das Formatieren <select> von Elementen war eine Herausforderung. Das experimentelle <selectmenu> Element (oder <selectlist>) verspricht, die verbleibenden Einschränkungen zu überwinden, indem es Webentwicklern ermöglicht, alle Teile des Elements zu formatieren.
Update juni 2024: Dieses neue Element ist noch experimentell. Das <selectmenu> Element wurde 2023 in umbenannt <selectlist> .
Filtern erweiterter Probleme in Edge DevTools und VSCode
20. Mai 2022
Jedes Webprodukt hat Probleme. Das Microsoft Edge DevTools Issues-Tool 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 stellt Probleme direkt in Ihrem Quellcode zur Verfügung.
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 von Bibliotheken von Drittanbietern stammen, und auswählen, in welchen Browsern Probleme angezeigt werden sollen.
Erstellen einer bildlaufverknüpften Animation ohne JavaScript
12. Mai 2022
Erfahren Sie mehr über das Feature zum Scrollen verknüpfter CSS-Animationen und wie es verwendet werden kann, um einen Lesefortschrittsindikator auf einer Webseite zu erstellen, ohne JavaScript zu verwenden. Dies ist ein Feature der Webplattform als Ganzes, nicht nur Microsoft Edge.
Seit dem 21. Juli 2023 ist dieses Feature nicht mehr experimentell und wird jetzt in Microsoft Edge ohne Flag unterstützt. Beschreibung 2022: Css-Scrollanimationen sind ein experimentelles Feature in Microsoft Edge; Um dieses Feature auszuprobieren, wechseln Sie zu edge://flags , und aktivieren Sie dann die Einstellung Experimentelle Webplattformfeatures .
Hervorheben von Text im Web mit der benutzerdefinierten CSS-Hervorhebungs-API
28. April 2022
Das Formatieren von Textbereichen im Web ist sehr nützlich, war aber in der Vergangenheit eine komplizierte Sache.
Die API für benutzerdefinierte CSS-Hervorhebungen ist die Zukunft der Hervorhebung von Textbereichen im Web. Diese API bietet Webentwicklern JavaScript- und CSS-Features, die es einfacher und effizienter machen, beliebige Textbereiche zu formatieren.
Das Microsoft Edge Developer Tools-Repository, um Feedback und Ideen zu übermitteln.
Die Sprachen Tschechisch und Vietnamesisch für die DevTools-Benutzeroberfläche wurden hinzugefügt.
Filtern Sie im Speichertool Heapmomentaufnahmen nach Knotentyp.
Das Netzwerktool verfügt über eine Spalte Erfüllt von , in der service worker oder cache angezeigt wird.
Die Links aus einem importierten Leistungsprofil verwenden Quellzuordnungen vom Azure Artifacts-Symbolserver, um Ihrem vertrauten ursprünglichen Quellcode zuzuordnen.
Microsoft Edge stellt automatisch generierten Alternativtext für Bilder bereit, die ihn nicht enthalten. Automatisch generierter Alternativtext hilft Benutzern von Hilfstechnologien wie Bildschirmsprachausgaben, die Bedeutung oder Absicht eines Bildes im Web zu entdecken.
Viele Blinde oder sehbehinderte Menschen erleben das Web in erster Linie über eine Sprachausgabe: eine Hilfstechnologie, die den Inhalt jeder Seite laut vorliest. Bildschirmsprachausgaben sind abhängig von Bildbeschriftungen (alternativer Text oder "Alternativtext"), die es ihnen ermöglichen, visuelle Inhalte wie Bilder und Diagramme zu beschreiben, damit der Benutzer den vollständigen Inhalt der Seite verstehen kann. Alternativtext ist wichtig, um das Web barrierefrei zu machen, wird aber oft übersehen. Bei mehr als der Hälfte der bilder, die von Sprachausgaben verarbeitet werden, fehlt Alternativtext.
Debuggen von Arbeitsspeicherverlusten mit dem Microsoft Edge-Tool "Getrennte Elemente"
Montag, 9. Dezember 2021
Verwenden Sie eine der folgenden Optionen, um DOM-Speicherverluste zu debuggen:
Das Tool "Getrennte Elemente ". Getrennte Knoten verfügen über einen Link zum zugeordneten JavaScript-Code.
Der Profilerstellungstyp "Getrennte Elemente " im Speichertool .
Mit dem Tool "Getrennte Elemente" können Sie DOM-Speicherverluste untersuchen und beheben.
Speicherverluste treten auf, wenn der JavaScript-Code einer Anwendung immer mehr Objekte im Arbeitsspeicher behält, anstatt sie für den Browser zur Garbage Collection freizugeben. Wir haben das Tool "Getrennte Elemente " mit den Microsoft Teams-Entwicklern erstellt, und es hat uns bereits geholfen, Speicherverluste auf vielen unserer eigenen Websites und Apps zu finden und zu beheben.
Das Microsoft Edge-Team hat die neue EyeDropper-API in Zusammenarbeit mit dem Chromium Open-Source-Projekt angegeben und implementiert. Geben Sie Feedback unter Issues – WICG/eyedropper | github.com.
Viele kreative Anwendungen ermöglichen es Benutzern, Farben aus Teilen eines App-Fensters oder sogar aus dem gesamten Bildschirm zu wählen, in der Regel mithilfe einer Pipettenmetapher. Die EyeDropper-API ermöglicht Es Autoren, eine vom Browser bereitgestellte Pipette bei der Konstruktion von benutzerdefinierten Farbauswahlern im Web zu verwenden.
Haltepunktsymbole werden angezeigt, wenn Visual Studio Code-Designs verwendet werden.
Die DevTools-Erweiterung für Visual Studio Code enthält die neuesten Tools, Designunterstützung und hilfreiche Links. JavaScript-Debuggerverbindung mit Remotearbeitsbereichen.
Update: Ab Microsoft Edge 131 wird das Visual Studio Code-Designfeature entfernt, und diese Designs rückgängig machen zu den Standarddesigns:
Microsoft Edge bietet eine überzeugende und konsistente Plattform und Tools für Entwickler. Da unsere Legacybrowser nicht mehr unterstützt werden, wird Edge bald der einzige unterstützte Browser von Microsoft auf Windows 10 sein. Erfahren Sie mehr über die neuesten Edge-Plattformen, Tools und Web-Apps.
Progressive Web-Apps (PWA) werden in Microsoft Edge unterstützt und stellen eine Möglichkeit dar, die Auffindbarkeit und Interaktion mit Ihrer Anwendung zu verbessern. Neue Funktionen der Webplattform. Wie diese modernen Webanwendungen nahtlos in Microsoft Windows integriert werden.
Deckt:
Die Fähigkeit, zu modernisieren.
Gemeinsame Bemühungen zur Stärkung der Webplattform.
Ignite | September 2020 | Die neuesten Entwicklertools
22. September 2020
Microsoft Edge-Entwicklertools erleichtern die Webentwicklung, -tests und -automatisierung. Erfahren Sie, wie wir die Barrierefreiheit in unseren Tools und Anwendungen priorisieren und wie wir andere dazu befähigen, dasselbe zu tun.
Deckt:
DevTools-Erweiterung für VS Code.
Browserübergreifende Tests und Automatisierung. Selenium, WebDriver, Puppeteer, Playwright und CI/CD über Docker-Container.
Zusammenarbeit in der Chromium Browser-Engine. So wird's zur Mitwirkung.
Lokalisierte Benutzeroberfläche in Entwicklertools.
Dieses Modul deckt verschiedene Konzepte zum Thema „Barrierefreiheit“ ab und zeigt, wie Sie diese während der Webentwicklung in Ihre Anwendungen integrieren können. Sie erfahren, wie wichtig eine ordnungsgemäße Verwendung von HTML-Tags zur Beschreibung von Informationen ist. Außerdem lernen Sie verschiedene Verbesserungen kennen, die Sie an Ihren Websites vornehmen können.
Eine browserübergreifende Initiative konzentriert sich darauf, fehlende Features und Funktionen auf der Webplattform für die potenzielle Entwicklung als Webstandards oder Browserfeatures zu identifizieren.
Profil "Getrennte Elemente" im Speichertool. Verbesserte Namen von JavaScript-Objekten in Heapmomentaufnahmen. Erstellen Sie eine Sammlung oder Umgebung in der Netzwerkkonsole. Symbolfehler wurden behoben. Registerkartensymbol "Leistung", wenn gedrosselt. Warnungsanzahl mit hohem Kontrast. Und vieles mehr.