Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.
Vidéo : Microsoft Edge | Nouveautés de DevTools 101
L’outil Console est désormais disponible dans Visual Studio Code
La console est l’un des outils les plus populaires dans DevTools. Vous pouvez maintenant accéder à l’outil Console dans l’extension Outils de développement Microsoft Edge pour Visual Studio Code. Cette console DevTools intégrée vous permet de voir vos messages de journal juste à côté de votre code. En utilisant la console, vous pouvez également :
- Essayez quelques instructions JavaScript.
- Accédez à l’objet fenêtre.
- Appelez les méthodes de l’objet, comme décrit dans Référence de l’API
Consoled’objet console. - Utilisez les utilitaires de la console pour accéder au DOM, comme décrit dans les fonctions et les sélecteurs de l’utilitaire de l’outil Console.
Vous pouvez utiliser la console comme outil principal ou l’utiliser avec les outils Éléments et Réseau .
L’outil Console s’ouvre dans la barre d’outils principale de l’extension Microsoft Edge DevTools pour Visual Studio Code :
L’outil Console s’ouvre dans le tiroir de l’extension Microsoft Edge DevTools pour Visual Studio Code :
Pour plus d’informations, voir Intégration de la console.
Les mappages sources sont désormais mis en cache avec IndexedDB
Dans les versions précédentes de Microsoft Edge, si vous hébergez des fichiers de mappage source volumineux sur votre serveur ou dans le serveur de symboles Azure Artifacts, DevTools récupérait ces mappages sources chaque fois que la page était actualisée. L’extraction de ces cartes sources a créé à plusieurs reprises plus de demandes réseau pour DevTools et ralenti le débogage.
Dans Microsoft Edge 101, DevTools met en cache les cartes sources à l’aide d’IndexedDB. Lorsque vous actualisez la page, les cartes sources sont maintenant traitées à partir du cache IndexedDB, au lieu d’être demandées à nouveau à partir de votre serveur ou du serveur de symboles Azure Artifacts. Utilisez la colonne Load status de l’outil Source Maps Monitor pour vérifier que les mappages sources sont chargés à partir du cache. Pour vider le cache IndexedDB et forcer DevTools à recharger les cartes source, exécutez la commande Clear source maps cache (Effacer le cache des cartes source ) dans le menu Commande.
Lorsque vous chargez la page Web pour la première fois, l’outil Moniteur de cartes sources indique que les cartes sources ne sont pas encore mises en cache :
Lorsque vous rechargez la page web, l’outil Moniteur de cartes sources indique que les cartes sources mises en cache sont utilisées :
Suivi des demandes réseau en attente lors de l’exportation de fichiers HAR
Dans Microsoft Edge 101, la nouvelle colonne de texte État a été ajoutée à l’outil Réseau . La colonne de texte État fournit des messages équivalents lisibles pour les codes de status HTTP qui sont indiqués dans la colonne État.
En outre, un nouveau paramètre a été ajouté à l’outil Réseau : inclure les demandes en attente dans le fichier HAR. Si vous devez enregistrer les demandes réseau en attente lors de l’exportation d’un fichier HAR dans l’outil Réseau, activez le paramètre Inclure les demandes en attente dans le fichier HAR . La colonne de texte État inclut désormais l’état (en attente) pour toutes les demandes réseau en attente.
Pour en savoir plus sur les colonnes disponibles dans le journal des demandes, consultez Référence des > fonctionnalités réseau Ajouter ou supprimer des colonnes.
Mise à jour de l’interface utilisateur et des contrôles de caméra dans la vue 3D
Dans Microsoft Edge 101, l’outil d’affichage 3D comporte deux nouveaux boutons : Vue panoramique (
») et Rotation de la vue (
Utilisez ces boutons pour basculer entre un panoramique autour de la zone de dessin ou une rotation de la zone de dessin. Cliquez sur le bouton Panoramique ou Faire pivoter la vue , puis faites glisser dans la direction souhaitée avec la souris, ou utilisez les touches de direction.
L’interface utilisateur offre désormais une expérience plus uniforme et intuitive. Les volets sont organisés plus clairement et les problèmes d’accessibilité ont été résolus.
Voir Naviguer dans les couches de pages web, z-index et DOM à l’aide de l’outil d’affichage 3D.
Le changement de thème ne nécessite plus le rechargement de DevTools
Dans les versions précédentes de Microsoft Edge, le changement de thème dans DevTools nécessitait de recharger DevTools pour appliquer le nouveau thème. Dans Microsoft Edge 101, vous pouvez rapidement essayer différents thèmes sans avoir à recharger DevTools.
Annonces du projet Chromium
Microsoft Edge 101 inclut également les mises à jour suivantes du projet Chromium :
- Afficher les couches en cascade dans le volet Styles
- Prise en charge de la fonction color hwb()
- Amélioration de l’affichage des propriétés privées