Vidéos sur le développement web avec Microsoft Edge
Découvrez et découvrez les nouvelles technologies et produits de développement web Microsoft Edge, notamment DevTools, les API et fonctionnalités de plateforme web, les Web Apps progressives et WebView2.
Cette page contient des liens vers de courtes vidéos, chacune axée sur une seule fonctionnalité et incluant une démonstration.
Microsoft publie régulièrement de nouvelles vidéos sur la chaîne YouTube Microsoft Edge, et elles sont également répertoriées ci-dessous.
Cliquez sur une miniature dans la liste suivante pour watch la vidéo correspondante sur YouTube.
Vous trouverez toutes les vidéos sur le développement à l’aide de Microsoft Edge sur la chaîne Microsoft Edge (@MSFTEdge) sur YouTube.
Le canal Microsoft Edge comprend les playlists suivantes :
8 février 2024
Les outils Console et Sources dans Microsoft Edge DevTools s’intègrent désormais à Copilot dans Microsoft Edge pour vous aider à comprendre les erreurs et le code source. Utilisez cette fonctionnalité pour obtenir de l’aide sur le débogage de votre code.
Voir aussi :
17 août 2023
La visionneuse JSON met en forme et met automatiquement en surbrillance les réponses et les fichiers JSON dans les onglets du navigateur. Lorsque votre serveur web répond à des requêtes HTTP avec des données encodées au format JSON, ces données ne sont pas toujours faciles à lire et sont parfois retournées sous la forme d’une seule ligne de texte. La visionneuse JSON modifie les données retournées pour faciliter la lecture. La syntaxe JSON est mise en surbrillance avec différentes couleurs, les propriétés de l’objet sont affichées sur leurs propres lignes et mises en retrait, et les objets peuvent être réduits ou développés.
Voir aussi :
24 juillet 2023
Couvre:
- Outil Analyseur d’incident .
- Agréger les statistiques du sélecteur CSS.
- Avertissements pour les propriétés CSS qui déclenchent la disposition.
- Améliorations de l’outil mémoire.
- Améliorations de l’accessibilité.
- Meilleure prise en charge du mode à contraste élevé dans l’extension DevTools pour VS Code.
-
console.table()
.
Voir aussi :
26 avril 2023
Couvre:
- Noms JS nonminifiés pour les OOPIF dans l’outil Performance .
- Sélecteurs CSS non simples dans l’outil Vue d’ensemble css .
- Pliage du code dans la visionneuse JSON.
- Améliorations apportées à l’interface utilisateur DevTools.
- Nouveaux marqueurs pour les points de journal et les points d’arrêt conditionnels.
- Comment modifier les thèmes dans DevTools.
Voir aussi :
- Nouveautés de DevTools (Microsoft Edge 112)
- Analyser les performances du sélecteur CSS pendant les événements recalculer le style - Statistiques du sélecteur CSS.
- Afficher les réponses ou les fichiers JSON mis en forme
28 mars 2023
Couvre:
- Déboguer à distance du contenu web sur les appareils Xbox et HoloLens.
- Noms de fichiers et de fonctions nonminifiés dans l’outil Performance .
- Peut copier le tableau Css Selector Stats dans Excel.
- Fonctionnalités d’émulation de rendu dans la barre d’outils Mode appareil.
- Barre latérale de l’outil Better Elements .
- Meilleure accessibilité de l’affichage rapide .
- Caractéristiques de couleur haute définition.
- Personnalisez les colonnes de l’outil Réseau .
Voir aussi :
- Nouveautés de DevTools (Microsoft Edge 111)
- Déboguer en toute sécurité le code original en publiant des cartes de sources sur le serveur de symboles Azure Artifacts
16 février 2023
Couvre:
- Enregistrements de instantané de tas plus rapides.
- Amélioration de la personnalisation du mode Focus (interface utilisateur DevTools).
- Améliorations des thèmes d’accessibilité et de contraste.
- Impression automatique sur place dans l’outil Sources .
- Simulez
prefers-color-scheme
.
Voir aussi :
17 janvier 2023
Couvre:
- Suivis améliorés pour partager des enregistrements de mémoire et de performances.
- Statistiques du sélecteur dans l’outil Performances .
- Effectuez le suivi des objets récupérés par la mémoire (GC) dans l’outil Mémoire .
- Extension du visualiseur d’instantané de tas.
- Nouveau panneau Affichage rapide en mode Focus.
- Nouvelles commandes pour les volets Styles .
- Inspection des éléments.
Voir aussi :
- Nouveautés de DevTools (Microsoft Edge 109)
- Partager des performances améliorées et des traces de mémoire
- Analysez les performances du sélecteur CSS pendant les événements recalculer le style - statistiques du sélecteur.
- Examinez l’allocation de mémoire, avec une mémoire réduite (cases à cocher « Inclure des objets ») dans Accélérer le runtime JavaScript (type de profilage « Échantillonnage d’allocation ») .
- Trash talk : the Orinoco garbage collector
- Extension du visualiseur d’instantané de tas .
16 décembre 2022
Couvre:
- Navigation améliorée dans la palette de commandes.
- Correctifs du mode à contraste élevé.
- Avertissement JavaScript désactivé.
- Consultez propriétés CSS inactives.
- Nouvelle documentation pour créer vos propres outils.
- WebDriver disponible sur macOS sur Apple M1.
- Utilisez les éléments détachés pour rechercher les fuites DOM.
Voir aussi :
- Nouveautés de DevTools (Microsoft Edge 108)
- Créer une extension DevTools, en ajoutant un onglet et un panneau d’outils personnalisés
- Format de fichier instantané du tas
- Microsoft Edge WebDriver : téléchargez Edge WebDriver.
8 novembre 2022
Couvre:
- Étiquettes de texte dans l’interface utilisateur DevTools en mode Focus.
- Nouveau raccourci pour la palette de commandes.
- Captures instantanées de tas volumineux dans l’outil Mémoire .
- Correctifs du mode à contraste élevé.
- Désactivez « rechercher au fur et à mesure que vous tapez ».
- Automatiser WebView2 avec Playwright.
- Personnaliser les raccourcis.
Voir aussi :
6 octobre 2022
Apprenez à utiliser l’outil Réseau dans Microsoft Edge DevTools.
Couvre:
- Pourquoi l’outil réseau dans DevTools est essentiel pour les développeurs web.
- Comment les sites web obtiennent les informations dont ils ont besoin à partir d’Internet pour être affichés dans le navigateur web.
- Quand utiliser l’outil Réseau .
- Visite guidée de l’interface utilisateur de l’outil réseau .
- Affichage des demandes dans l’outil Réseau .
- Affichage des détails d’une demande/réponse.
- Personnalisation de l’outil Réseau .
- Tri, filtrage et recherche des demandes.
- Examen des problèmes de performances.
- Blocage des demandes et exportation en tant que fichiers HAR.
- Modification et renvoi de demandes.
Voir aussi :
3 octobre 2022
Couvre:
- Expérience de palette de commandes.
- Résolution rapide des problèmes liés à l’extension Vs Code DevTools Edge.
- DevTools utilise moins d’espace disque.
- Meilleure accessibilité en mode Focus (interface utilisateur DevTools) et résolution de bogues à contraste élevé.
- Thèmes Chromium clair/sombre déconseillés.
- Suivi des nouvelles interactions dans l’outil Performance .
- Utilisation d’extraits de code.
Voir aussi :
6 septembre 2022
Couvre:
- Gestion du débogage du protocole PWA.
- Améliorations du mode Focus.
- Correctifs de bogues en mode Focus.
- Amélioration de la fiabilité des outils Réseau et problèmes.
- Modification en direct du code de la fonction lors du débogage.
- Utilisation de points de journal.
Voir aussi :
1er septembre 2022
Cette vidéo légèrement plus ancienne (septembre 2022) montre l’interface utilisateur héritée pour DevTools :
- Au lieu de la barre d’activité, la vidéo montre la barre d’outils main.
- Au lieu du panneau Affichage rapide , la vidéo montre le tiroir en bas de DevTools.
Couvre:
- Structure de l’interface utilisateur de DevTools, avec la barre d’outils et le panneau main en haut, et la barre d’outils et le panneau Tiroir en bas.
- Comment l’interface utilisateur Microsoft Edge DevTools est organisée.
- Ce que font les parties main de l’interface DevTools.
- Quels outils sont disponibles.
- Outil Inspecter .
- Mode d’émulation de l’appareil .
- Outils dans la barre d’outils main ou dans le tiroir.
- Bouton Plus d’onglets .
- Bouton Plus d’outils pour afficher les 30 outils et plus.
- Outils de fermeture.
- Réorganisation des outils dans la barre d’outils main.
- Le tiroir et sa barre d’outils.
- Déplacement d’outils entre la barre d’outils main et la barre d’outils Tiroir.
- Comment restaurer les paramètres par défaut.
Voir aussi :
5 août 2022
Couvre:
- Correctifs de bogues de rendu/accessibilité.
- Les couches composites sont désormais dans l’outil Vue 3D , et l’outil Calques a été supprimé.
- Regrouper les fichiers dans l’outil Sources .
- Recherchez l’emplacement des nœuds dans les composants web.
- Où trouver plus d’informations.
- Comment modifier l’emplacement de la barre d’activité .
Voir aussi :
- Nouveautés de DevTools 104
- Déboguer le web en 3D avec l’outil Vue 3D - billet de blog.
5 juillet 2022
Couvre:
- Outil d’accueil repensé.
- Nouveau sélecteur de couleurs.
- Nouveau tas de mémoire instantané types de nœuds.
- Résolution de bogue du mode à contraste élevé.
- Ouvrez n’importe quelle page HTML dans l’extension VS Code.
Voir aussi :
21 juin 2022
L’outil Vue 3D de Microsoft Edge DevTools fournit une représentation en trois dimensions de la page web que vous inspectez. Utilisez l’outil Vue 3D pour déboguer les problèmes courants de développement web, tels que :
- Nœuds DOM profondément imbriqués.
- Éléments hors document.
- Barres de défilement indésirables.
- Problèmes d’empilement d’index Z.
- Performances des couches composites.
Voir aussi :
- Naviguer dans les couches de page web, z-index et DOM à l’aide de l’outil Vue 3D
- Déboguer le web en 3D avec l’outil Vue 3D - billet de blog.
9 juin 2022
Comment sélectionner le langage d’interface utilisateur qui vous convient le mieux pour le codage et le débogage. Microsoft Edge DevTools prend en charge plus de 13 langues différentes.
Voir aussi :
1er juin 2022
Couvre:
- Visual Studio Code.
- Exportation d’instantané de tas.
- Cycles des nœuds internes.
- Icône d’aide.
- Problèmes résolus.
Voir aussi :
Appliquer un style complet à la partie déroulante d’un code HTML <select>
avec le nouvel <selectmenu>
élément
31 mai 2022
Le style <select>
des éléments a été difficile. L’élément expérimental <selectmenu>
(ou <selectlist>
) promet de surmonter les limitations restantes en permettant aux développeurs web d’appliquer un style à toutes les parties de l’élément.
Mise à jour de juin 2024 : ce nouvel élément est encore expérimental. L’élément <selectmenu>
a été renommé <selectlist>
en 2023.
Voir aussi :
-
Démonstrations d’ouverture de l’interface
<selectlist>
utilisateur -
Éléments de style
<select>
pour les éléments réels : billet de blog sur les éléments de style<select>
et l’élément<selectmenu>
.
20 mai 2022
Chaque produit web rencontre des problèmes. L’outil Microsoft Edge DevTools Issues analyse la page web actuelle et signale les problèmes regroupés par type, notamment l’accessibilité, la compatibilité, les performances, etc.
L’extension Microsoft Edge DevTools pour Visual Studio Code rend les problèmes disponibles directement dans votre code source.
Les produits publiés peuvent avoir des problèmes. En fonction de vos commentaires, nous avons ajouté des méthodes utiles pour filtrer les problèmes. Vous pouvez désactiver les problèmes provenant de bibliothèques tierces et choisir les navigateurs sur lesquels afficher les problèmes.
Voir aussi :
- Rechercher et résoudre les problèmes à l’aide de l’outil Problèmes
- Analyse des problèmes en ligne et en direct dans l’extension DevTools pour VS Code
12 mai 2022
Découvrez la fonctionnalité d’animations liées au défilement CSS et comment elle peut être utilisée pour créer un indicateur de progression de lecture sur une page web, sans utiliser JavaScript. Il s’agit d’une fonctionnalité de la plateforme web dans son ensemble, et pas seulement de Microsoft Edge.
Depuis le 21 juillet 2023, cette fonctionnalité n’est plus expérimentale et est désormais prise en charge dans Microsoft Edge sans indicateur. Description de 2022 : Les animations liées au défilement CSS sont une fonctionnalité expérimentale dans Microsoft Edge ; pour essayer cette fonctionnalité, accédez à edge://flags
, puis activez le paramètre Fonctionnalités de plateforme web expérimentale .
Voir aussi :
- Démonstration du lecteur : application de démonstration présentée dans la vidéo.
- Code source pour la démonstration lecteur
- Animations pilotées par le défilement CSS sur MDN.
- @scroll-chronologie sur MDN : page d’origine sur la fonctionnalité expérimentale d’animations liées au défilement CSS.
5 mai 2022
Découvrez comment personnaliser DevTools en fonction de vos besoins. Couvre:
- Ancrer ou détacher DevTools.
- Ouvrez de nouveaux outils.
- Fermez les outils dont vous n’avez pas besoin.
- Déplacez les outils dans le tiroir inférieur (maintenant le panneau Affichage rapide ).
- Personnalisez la taille du texte.
- Personnalisez le thème.
- Utilisez les raccourcis clavier du menu commandes pour personnaliser rapidement DevTools.
Voir aussi :
28 avril 2022
Le style des plages de texte sur le web est très utile, mais a toujours été une chose compliquée à faire.
L’API css Custom Highlight est l’avenir de la mise en surbrillance des plages de texte sur le web. Cette API fournit aux développeurs web des fonctionnalités JavaScript et CSS qui facilitent et rendent plus efficace le style de n’importe quelle plage de texte.
Voir aussi :
28 avril 2022
Couvre:
- Utilisation de la console.
- Cache des mappages sources.
- Colonne texte d’état.
- Changement de thèmes.
Voir aussi :
- Nouveautés de DevTools 101
- Intégration de la console : https://aka.ms/ConsoleIntegration
- Colonnes réseau : https://aka.ms/NetworkColumns
19 avril 2022
Couvre:
- Le référentiel Outils de développement Microsoft Edge, pour envoyer des commentaires et des idées.
- Ajout des langues tchèque et vietnamienne pour l’interface utilisateur DevTools.
- Dans l’outil Mémoire , filtrez les instantanés de tas par type de nœud.
- L’outil réseau a une colonne Rempli par, qui affiche le service Worker ou le cache.
- Les liens d’un profil de performance importé utilisent des mappages de sources à partir du serveur de symboles Azure Artifacts pour mapper à votre code source d’origine familier.
Voir aussi :
21 mars 2022
Couvre:
- Serveur de symboles Azure Artifacts et sourcesmaps.
- Amélioration du volet Calques dans l’outil Vue 3D .
- Utilisez des sourcesmaps pour déminifier les profils de performances.
- Débogage ASP.NET en direct dans DevTools pour Visual Studio.
- Accessibilité dans l’outil Console réseau et l’outil Vue 3D .
Voir aussi :
17 mars 2022
Microsoft Edge fournit un texte de remplacement généré automatiquement pour les images qui ne l’incluent pas. Le texte de remplacement généré automatiquement permet aux utilisateurs de technologies d’assistance telles que les lecteurs d’écran de découvrir la signification ou l’intention d’une image sur le web.
Beaucoup de personnes aveugles ou malvoyantes expérimentent le web principalement par le biais d’un lecteur d’écran : une technologie d’assistance qui lit le contenu de chaque page à voix haute. Les lecteurs d’écran dépendent de l’utilisation d’étiquettes d’image (texte de remplacement ou « texte de remplacement ») qui leur permettent de décrire du contenu visuel (comme des images et des graphiques) afin que l’utilisateur puisse comprendre le contenu complet de la page. Le texte de remplacement est essentiel pour rendre le web accessible, mais il est souvent négligé. Plus de la moitié des images traitées par les lecteurs d’écran ne disposent pas de texte de remplacement.
Voir aussi :
- Semble dire : Microsoft Edge fournit désormais des étiquettes d’image générées automatiquement - billet de blog
23 février 2022
Couvre:
- Émuler le mode Couleurs forcées.
- Les icônes d’activité dans le journal des événements de l’outil performance ont des info-bulles.
- Les tailles superficielles dans l’outil Mémoire sont représentées sous forme de valeurs décimales.
- Dans l’outil Réseau , la zone de recherche est redimensionnée en fonction des besoins.
- Dans l’outil Application , l’interface utilisateur est alignée correctement.
- Mises à jour pour le moteur de navigateur Chromium.
Voir aussi :
1er février 2022
Couvre:
- L’outil Éléments détachés est disponible par défaut.
- L’outil Vue 3D prend en charge la modification des thèmes de couleurs dans DevTools.
- Améliorations du mode Focus (interface utilisateur DevTools).
- L’extension DevTools pour VS Code offre des fonctionnalités supplémentaires.
Voir aussi :
- Nouveautés de DevTools 97
- Actualisez la liste des appareils : https://aka.ms/RefreshDeviceList
- Saisie semi-automatique avec Modifier au format HTML https://aka.ms/AutocompleteEditHTML
- Expérience de débogage améliorée : https://aka.ms/NewDebugging
9 décembre 2021
Pour déboguer les fuites de mémoire DOM, utilisez l’une des options suivantes :
- Outil Éléments détachés . Les nœuds détachés ont un lien vers le code JavaScript associé.
- Le type de profilage des éléments détachés dans l’outil Mémoire .
L’outil Éléments détachés vous permet d’examiner et de résoudre les fuites de mémoire DOM.
Des fuites de mémoire se produisent lorsque le code JavaScript d’une application conserve de plus en plus d’objets en mémoire au lieu de les libérer pour le nettoyage de la mémoire du navigateur. Nous avons créé l’outil Éléments détachés avec les développeurs Microsoft Teams, et il nous a déjà aidés à trouver et à corriger les fuites de mémoire sur un grand nombre de nos propres sites web et applications.
Voir aussi :
- Déboguer les fuites de mémoire DOM à l’aide de l’outil Éléments détachés
- Déboguer les fuites de mémoire avec l’outil Éléments détachés Microsoft Edge - billet de blog.
9 décembre 2021
Couvre:
- Nouvelle interface utilisateur DevTools : mode Focus.
- L’outil Console peut se trouver dans les volets supérieur et inférieur de DevTools.
- L’outil Sources vous avertit quand les mappages de sources ne peuvent pas être chargés.
- Cliquez sur l’icône de triangle d’une liste déroulante pour ouvrir le menu.
- L’ouverture de fichiers sources dans Visual Studio Code s’intègre à l’outil Sources.
Voir aussi :
8 décembre 2021
Couvre:
- Icône Rechercher sur le web pour tous les messages d’erreur et d’avertissement.
- Accès amélioré pour la définition User-Agent indicateurs du client.
- Les filtres de console affichent les messages groupés.
Voir aussi :
22 novembre 2021
L’équipe Microsoft Edge a spécifié et implémenté la nouvelle API EyeDropper en collaboration avec le projet open source Chromium. Envoyez vos commentaires à l’adresse Problèmes - WICG/pipeper | github.com.
De nombreuses applications créatives permettent aux utilisateurs de choisir des couleurs à partir de parties d’une fenêtre d’application ou même de l’écran entier, généralement à l’aide d’une métaphore de pipette. L’API EyeDropper permet aux auteurs d’utiliser une pipette fournie par un navigateur dans la construction de sélecteurs de couleurs personnalisés sur le web.
Voir aussi :
- Sélection des couleurs d’un pixel sur l’écran avec l’API EyeDropper | web.dev
- API EyeDropper - API web | developer.mozilla.org MDN
12 novembre 2021
Couvre:
- Recherchez les erreurs de la console sur le web.
- Les icônes de point d’arrêt s’affichent lors de l’utilisation de thèmes Visual Studio Code.
- L’extension DevTools pour Visual Studio Code inclut les derniers outils, la prise en charge des thèmes et des liens utiles. Connexion du débogueur JavaScript à des espaces de travail distants.
Mise à jour : à compter de Microsoft Edge 131, la fonctionnalité thèmes Visual Studio Code est supprimée et ces thèmes reviennent aux thèmes par défaut :
- Light+
- Sombre+
Voir aussi :
- Nouveautés de DevTools 94
- Raccourcis clavier : navigation dans DevTools avec un clavier.
11 octobre 2021
Couvre:
- Interface utilisateur DevTools.
- Déboguer les fuites de mémoire de nœud DOM avec l’outil Éléments détachés .
- Modifier la langue d’affichage.
- Copiez les déclarations CSS dans le volet Styles de l’outil Éléments pour les bibliothèques CSS-in-JS.
- Personnalisation plus facile des indicateurs de User-Agent client.
- Les lecteurs d’écran annoncent les erreurs, les avertissements et les problèmes affichés dans la barre d’outils et la console.
- Copier en tant que PowerShell dans l’outil Réseau inclut des cookies.
- Le débogueur Visual Studio Code s’intègre à l’extension DevTools pour VS Code.
Voir aussi :
25 mai 2021
Microsoft Edge offre aux développeurs une plateforme et des outils attrayants et cohérents. Comme nos navigateurs hérités ne sont plus pris en charge, Edge sera bientôt le seul navigateur pris en charge par Microsoft sur Windows 10. Découvrez les dernières informations sur la plateforme Edge, les outils et les applications web.
Couvre:
- Pistes d’entrée manuscrite déléguées.
- Nouvelles fonctionnalités web pour les développeurs.
- Exécutez sur la connexion du système d’exploitation.
- Outils Microsoft Edge pour VS Code.
Voir aussi :
- L’avenir de l’Explorer Internet sur Windows 10 est en mode Microsoft Edge - IE.
- Adopter Microsoft Edge avec FastTrack
- « Microsoft Edge : État de la plateforme » : Ressources de session
2 mars 2021
Les Web Apps progressives (PWA) sont prises en charge dans Microsoft Edge et représentent une occasion d’améliorer la détectabilité et l’engagement avec votre application. Nouvelles fonctionnalités de la plateforme web. Comment ces applications web modernes s’intègrent en toute transparence à Microsoft Windows.
Couvre:
- Capacité de modernisation.
- Efforts conjoints pour autonomiser la plateforme web.
- Microsoft Edge et le moteur de navigateur Chromium.
- Microsoft Edge et fonctionnalités web (Project Fugu).
- Faire briller les PWA sur Windows.
- Portée de la meilleure catégorie.
- Installez un site web en tant qu’application.
- Participez aux PWA sur Windows.
Voir aussi :
22 septembre 2020
Les outils de développement Microsoft Edge facilitent le développement web, les tests et l’automatisation. Découvrez comment nous hiérarchiser l’accessibilité dans nos outils et applications, et comment nous aidons les autres à faire de même.
Couvre:
- Extension DevTools pour VS Code.
- Tests et automatisation inter-navigateurs. Selenium, WebDriver, Puppeteer, Playwright et CI/CD via des conteneurs Docker.
- Collaboration sur le moteur de navigateur Chromium. Comment contribuer.
- Interface utilisateur localisée dans les outils de développement.
- Accessibilité dans les outils de développement.
Voir aussi :
Youtube:
-
Chaîne Microsoft Edge (@MSFTEdge) sur YouTube
- Développeur - playlist.
- Nouveautés de DevTools - playlist.
- Extensions - playlist.
- Génération, déploiement et gestion d’applications WebView2 - 2 mars 2021.