Videos zur Webentwicklung mit Microsoft Edge
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.
Microsoft veröffentlicht regelmäßig neue Videos auf dem YouTube-Kanal von Microsoft Edge, die ebenfalls unten aufgeführt sind.
Klicken Sie auf eine Miniaturansicht aus der folgenden Liste, um das entsprechende Video auf YouTube zu watch.
DevTools – Neuerungen in DevTools 105
Veröffentlicht am 6. September 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 105.
DevTools: Grundlegendes zur DevTools-Benutzeroberfläche
Veröffentlicht am 1. September 2022.
Erfahren Sie, wie die Microsoft Edge DevTools-Benutzeroberfläche organisiert ist. Wenn Sie nicht sicher sind, welche Tools verfügbar sind und was die Standard Teile der DevTools-Schnittstelle tun, hilft Ihnen dieses Video dabei, sich besser vertraut zu machen.
In diesem Video wird die Ui-Struktur mit der Standard Symbolleiste und dem Panel und dem Schubladenbereich erläutert. Außerdem erfahren Sie, wie Sie Tools suchen, öffnen und schließen, die Standardeinstellungen wiederherstellen und die Liste der verfügbaren Tools durchgehen.
DevTools – Neuerungen in DevTools 104
Veröffentlicht am 5. August 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 104.
DevTools – Neuerungen in DevTools 103
Veröffentlicht am 5. Juli 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 103.
DevTools – Debuggen des Webs in 3D
Veröffentlicht am 21. Juni 2022.
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.:
- Tief geschachtelte DOM-Knoten.
- Out-of-Document-Elemente.
- Unerwünschte Bildlaufleisten.
- Probleme bei der Z-Index-Stapelung.
- Leistung zusammengesetzter Ebenen.
Weitere Informationen zum 3D-Ansichtstool finden Sie unter Navigieren in Webseitenebenen, Z-Index und DOM mithilfe des Tools 3D-Ansicht oder Debuggen des Webs in 3D mit dem 3D-Ansichtstool.
DevTools: Verwenden Ihrer bevorzugten Sprache in DevTools
Veröffentlicht am 9. Juni 2022.
Microsoft Edge DevTools unterstützt 13 verschiedene Sprachen. In diesem Video zeigt das Team, wie Sie die Sprache auswählen, die für Sie am besten für das Programmieren und Debuggen geeignet ist.
Weitere Informationen zum Ändern der DevTools-Spracheinstellungen finden Sie unter Ändern der DevTools-Spracheinstellungen.
Informationen zum Melden von Übersetzungsfehlern finden Sie unter Wenden Sie sich an das Microsoft Edge DevTools-Team.
DevTools – Neuerungen in DevTools 102
Veröffentlicht am 1. Juni 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 102.
Webplattform: Formatieren des Dropdownteils eines <select> mit dem neuen <selectmenu> Element
Veröffentlicht am 31. Mai 2022.
Das Formatieren <select> von Elementen war eine Herausforderung. Das experimentelle <selectmenu> Element verspricht, die verbleibenden Einschränkungen zu überwinden, indem webentwickler alle Teile des Elements formatieren können.
Weitere Informationen zum Formatieren <select> von Elementen und dem neuen <selectmenu> Element finden Sie im Blogbeitrag Formatieren <select> von Elementen für reale Elemente.
DevTools: Erweitertes Filtern von Problemen in Edge DevTools und VSCode
Veröffentlicht am 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.
Wenn Sie über Visual Studio Code verfügen, stellt die Microsoft Edge DevTools-Erweiterung für Visual Studio Code Probleme direkt in Ihrem Quellcode zur Verfügung.
Veröffentlichte Produkte können auch viele Probleme haben. Basierend auf Ihrem Feedback haben wir nützliche Möglichkeiten zum Filtern von Problemen hinzugefügt. Sie können z. B. Probleme von Bibliotheken von Drittanbietern deaktivieren und auswählen, zu welchen Browsern Probleme angezeigt werden sollen.
Weitere Informationen zum Tool "Probleme" finden Sie unter Suchen und Beheben von Problemen mit dem Tool "Probleme".
Weitere Informationen zur Microsoft Edge DevTools-Erweiterung für Visual Studio Code finden Sie unter Microsoft Edge DevTools-Erweiterung für Visual Studio Code.
Webplattform: Erstellen einer mit Einem Bildlauf verknüpften Animation ohne JavaScript
Veröffentlicht am 12. Mai 2022.
Erfahren Sie mehr über das bevorstehende Feature für mit CSS-Scrollen verknüpfte Animationen und wie es verwendet werden kann, um eine Lesefortschrittsanzeige auf einer Webseite zu erstellen, ohne JavaScript zu verwenden.
Mit CSS-Scroll verknüpfte Animationen sind ein experimentelles Feature in Microsoft Edge. Um dieses Feature zu testen, wechseln Sie zu edge://flags , und aktivieren Sie dann die Einstellung Experimentelle Webplattform-Features .
Um mit der Im Video gezeigten Demoanwendung zu spielen, sehen Sie sich die gerenderte Readerdemo und den zugehörigen Quellcode an.
Weitere Informationen zum Feature für mit CSS-Scrollen verknüpfte Animationen finden Sie unter @scroll-Zeitleiste auf MDN.
DevTools: Anpassen von Microsoft Edge-Entwicklertools und schneller Featurezugriff
Veröffentlicht am 5. Mai 2022.
Erfahren Sie, wie Sie DevTools an Ihre Anforderungen anpassen.
In diesem Video erfahren Sie, wie Sie DevTools andocken, neue Tools öffnen und nicht benötigte Tools schließen. Es wird beschrieben, wie Sie Tools in der unteren Schublade verschieben und die Textgröße und das Design anpassen. Im Video wird auch erläutert, wie Sie die Tastenkombinationen des Befehlsmenüs verwenden können, um DevTools schnell anzupassen.
DevTools – Neuerungen in DevTools 101
Veröffentlicht am 28. April 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuerungen in DevTools 101.
Webplattform: Hervorheben von Text im Web mit der BEnutzerdefinierten CSS-Hervorhebungs-API
Veröffentlicht am 28. April 2022.
Das Formatieren von Textbereichen im Web ist sehr nützlich, war aber in der Vergangenheit eine komplizierte Sache.
Die neue API für benutzerdefinierte CSS-Hervorhebungen ist die Zukunft der Hervorhebung von Textbereichen im Web. Es bietet Webentwicklern JavaScript- und CSS-Features, die es einfacher und effizienter machen, beliebige Textbereiche zu formatieren.
Weitere Informationen finden Sie unter CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web( CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web).
DevTools – Neuerungen in DevTools 100
Veröffentlicht am 19. April 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 100.
DevTools – Neuerungen in DevTools 99
Veröffentlicht am 21. März 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 99.
DevTools – Neuerungen in DevTools 98
Veröffentlicht am 23. Februar 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuerungen in DevTools 98.
DevTools – Neuerungen in DevTools 97
Veröffentlicht am 1. Februar 2022.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 97.
DevTools – Neuerungen in DevTools 96
Veröffentlicht am 9. Dezember 2021.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuerungen in DevTools 96.
DevTools: Debuggen von Speicherverlusten mit dem Microsoft Edge-Tool "Getrennte Elemente"
Veröffentlicht am 9. Dezember 2021.
Wir freuen uns, das neue Tool "Getrennte Elemente" in Microsoft Edge DevTools ankündigen zu können, mit dem Sie DOM-Speicherverluste untersuchen und beheben können.
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 dieses 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.
Weitere Informationen finden Sie unter Debuggen von DOM-Speicherverlusten mit dem Tool "Getrennte Elemente", und lesen Sie den entsprechenden Blogbeitrag Debuggen von Speicherverlusten mit dem Microsoft Edge-Tool "Getrennte Elemente".
DevTools – Neuerungen in DevTools 95
Veröffentlicht am 8. Dezember 2021.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 95.
Webplattform – Die EyeDropper-API
Veröffentlicht am 22. November 2021.
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.
Weitere Informationen finden Sie unter Auswählen von Farben beliebiger Pixel auf dem Bildschirm mit der EyeDropper-API | web.dev - und EyeDropper-API – Web-APIs | MDN developer.mozilla.org.
DevTools – Neuerungen in DevTools 94
Veröffentlicht am 12. November 2021.
Weitere Informationen zu unseren neuesten Ankündigungen vom Microsoft Edge DevTools-Team finden Sie unter Neuigkeiten in DevTools 94.