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.
Suite à la mise à jour du calendrier de Chromium, nous ajustons notre calendrier pour les prochaines versions de Microsoft Edge et annulons la version 82 de Microsoft Edge. Consultez notre article de blog pour plus d’informations.
Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.
Annonces de l’équipe Microsoft Edge DevTools
Déboguer à distance Microsoft Edge sur appareils Windows 10 ou version ultérieure
L’application Outils de contrôle à distance pour Microsoft Edge est désormais disponible dans le Microsoft Store. Cette application étend le portail d’appareils Windows. Vous pouvez vous connecter à partir de Microsoft Edge exécuté sur votre machine de développement à un appareil distant Windows 10 ou version ultérieure et afficher une liste de cibles. Cette liste de cibles inclut tous les onglets dans Microsoft Edge et les PWA ouverts sur l’appareil Windows. Utilisez DevTools sur votre machine de développement sur une cible en cours d’exécution sur l’appareil Windows distant.
Lisez notre guide de configuration de votre appareil Windows 10 et de votre machine de développement pour le débogage à distance : Déboguer à distance des appareils Windows.
Faites-nous part de votre expérience de débogage à distance en tweetant ou en cliquant sur l’icône Envoyer des commentaires .
Nouvelles façons d’accéder aux paramètres
Il existe des tonnes de paramètres pour DevTools que vous pouvez personnaliser pour que DevTools ressemble, se connecte et fonctionne comme vous le souhaitez. Dans Microsoft Edge 83, l’accès aux paramètres dans DevTools est désormais beaucoup plus facile. Ouvrez Paramètres en cliquant sur l’icône de l’engrenage à côté des alertes de console et du menu principal.
Vous pouvez également ouvrir Paramètres à partir du menu principal sous Plus d’outils.
Chromium problème #1050855
Barres d’informations nouvelles et améliorées
Les barres de notification d’informations (infobar) dans DevTools disposent désormais d’une apparence améliorée et de plus de fonctionnalités. Dans Microsoft Edge 83, les barres d’informations sont plus faciles à lire et comportent des boutons qui vous permettent d’effectuer immédiatement l’action appropriée.
Chromium problème #1056348
Naviguer dans le sélecteur de couleurs avec votre clavier
Dans les versions précédentes de Microsoft Edge, vous ne pouviez pas naviguer dans la section Nuances du sélecteur de couleurs à l’aide du clavier. Dans Microsoft Edge 83, vous pouvez désormais utiliser le clavier pour déplacer le sélecteur dans la section Nuances du sélecteur de couleurs.
Le sélecteur de couleurs est une interface graphique dans le panneau Éléments pour les modifications color et background-color les déclarations :
Chromium problème #963183
Voir aussi :
L’onglet Propriétés se remplit désormais après une actualisation de la page
Dans Microsoft Edge 81 et les versions antérieures, l’onglet Propriétés du panneau Éléments était interrompu par des actualisations de page. Lorsque vous avez actualisé la page, l’onglet Propriétés n’a pas renseigné les propriétés de l’élément actuellement sélectionné :
Dans Microsoft Edge 83, vous pouvez désormais afficher les propriétés de l’élément actuellement sélectionné après une actualisation de la page dans l’onglet Propriétés :
Chromium problème #1050999
Voir aussi :
Utiliser les touches de direction pour faire défiler l’outil Modifications
L’outil Modifications effectue le suivi de toutes les modifications que vous avez apportées à CSS ou JavaScript dans DevTools. Vous pouvez utiliser l’outil Modifications pour afficher rapidement toutes vos modifications et les rapporter à votre éditeur/IDE.
Pour ouvrir l’outil Changements, dans DevTools, appuyez sur Ctrl+Maj+P (Windows/Linux) ou Commande+Maj+P (macOS) pour ouvrir le menu de commande, puis tapez changes. Cliquez sur la commande Afficher les modifications , puis appuyez sur Entrée.
L’outil Modifications s’ouvre dans le panneau Aperçu rapide au bas de DevTools.
Lorsque vous avez apporté une modification à un fichier mininé, l’outil Modifications vous permet de faire défiler horizontalement pour afficher l’intégralité de votre code mininé. Depuis Microsoft Edge 83, vous pouvez faire défiler horizontalement à l’aide des touches de direction de votre clavier.
Si vous utilisez des lecteurs d’écran ou le clavier pour naviguer dans DevTools, envoyez-nous vos commentaires en nous envoyant un tweet ou en cliquant sur l’icône Envoyer des commentaires .
Chromium problème #963183
Voir aussi :
Annonces du projet Chromium
Les sections suivantes annoncent des fonctionnalités supplémentaires disponibles dans Microsoft Edge 83 qui ont été apportées au projet open source Chromium.
Émuler les faiblesses de la vision
Dans l’outil Rendu , utilisez la nouvelle fonctionnalité Émuler les déficiences visuelles pour avoir une meilleure idée de la façon dont les personnes présentant différents types de déficiences visuelles perçoivent votre site :
DevTools peut émuler la vision floue et les types suivants de déficiences de la vision des couleurs :
| Déficience de la vision des couleurs | Détails |
|---|---|
| Protanopie | L’incapacité de percevoir une lumière rouge. |
| Deutéranopie | L’incapacité de percevoir une lumière verte. |
| Tritanopie | L’incapacité de percevoir la lumière bleue. |
| Achromatopsie | L’incapacité de percevoir une quelconque couleur, à l’exception des nuances de gris (extrêmement rare). |
Des versions moins extrêmes de ces déficiences de la vision des couleurs existent et sont plus courantes. Par exemple, la protanomalie est une sensibilité réduite à la lumière rouge (par opposition à la protanopie, qui est l’incapacité totale de percevoir la lumière rouge). Cependant, ces déficiences visuelles ne sont pas aussi clairement définies : chaque personne atteinte d’une telle déficience visuelle est différente et peut voir les choses différemment (être capable de percevoir plus ou moins les couleurs pertinentes).
En concevant pour les simulations les plus extrêmes dans DevTools, vos applications Web sont garanties d’être également accessibles aux personnes souffrant de déficiences visuelles.
Envoyez vos commentaires en tweetant ou en cliquant sur l’icône Envoyer des commentaires .
Problème de chromium #1003700
Voir aussi :
- Émuler les faiblesses de la vision
- Analyser les performances de rendu avec l’outil Rendu dans Référencedes fonctionnalités de performances
- Types de daltonisme, au Colourblindawareness.org.
Émuler les paramètres régionaux
Pour émuler des lieux, dans l’outil Capteurs , sélectionnez un emplacement dans la liste déroulante Emplacement . (Pour accéder à l’outil Capteurs , ouvrez le menu Commande et tapez Sensors.) Après avoir sélectionné un emplacement, DevTools modifie les paramètres régionaux par défaut actuels, ce qui affecte le code suivant :
-
Intl.*API, par exemple :new Intl.NumberFormat().resolvedOptions().locale - Autres API JavaScript prenant en charge les paramètres régionaux, telles que
String.prototype.localeCompareet*.prototype.toLocaleString, par exemple :123_456..toLocaleString() - Les API DOM telles que
navigator.languageetnavigator.languages - En-tête de requête HTTP Accept-Language
Remarque
Les mises à jour ne navigator.languagenavigator.languages sont pas visibles immédiatement, mais uniquement après la prochaine navigation ou actualisation de la page. Les modifications apportées à l’en-tête Accept-Language HTTP se répercutent uniquement sur les requêtes suivantes.
Pour essayer une démonstration, consultez Exemple de code dépendant des paramètres régionaux.
Chromium problème #1051822
Voir aussi :
- Remplacez la géolocalisation dans Émuler les capteurs de l’appareil.
Débogage COEP (Cross-Origin Embedder Policy)
Le panneau Réseau fournit désormais des informations de débogage de stratégie d’incorporation cross-origin .
La colonne État fournit désormais une explication rapide de la raison pour laquelle une demande a été bloquée, ainsi qu’un lien pour afficher les en-têtes de cette demande pour un débogage supplémentaire :
La section En-têtes de réponse de l’onglet En-têtes fournit des conseils supplémentaires sur la façon de résoudre les problèmes :
Envoyez vos commentaires en tweetant ou en cliquant sur l’icône Envoyer des commentaires .
Chromium problème #1051466
Voir aussi :
- Bloquer les requêtes dans Inspecter l’activité réseau.
Nouvelles icônes pour les points d’arrêt, les points d’arrêt conditionnels et les points de journal
Mise à jour : depuis 2022, les points d’arrêt sont désormais indiqués par un rectangle bleu, au lieu d’un cercle rouge.
Le panneau Sources comporte de nouvelles icônes pour les points d’arrêt, les points d’arrêt conditionnels et les points de journal :
- Les points
) sont représentés par des cercles rouges. - Les points
) sont représentés par des cercles mi-rouges mi-blancs. - Les points de journal (
) sont représentés par des cercles rouges avec des icônes de console.
La motivation pour les nouvelles icônes était de rendre l’interface utilisateur plus cohérente avec les autres outils de débogage de l’interface graphique (qui colorent généralement les points d’arrêt en rouge) et de faciliter la distinction entre les 3 fonctionnalités en un coup d’œil.
Chromium problème #1041830
Voir aussi :
Afficher les demandes réseau qui définissent un chemin d’accès de cookie spécifique
Utilisez le nouveau cookie-path mot clé de filtre dans l’outil Réseau pour vous concentrer sur les demandes réseau qui définissent un chemin d’accès de cookie spécifique.
Pour découvrir d’autres mots clés comme cookie-path, consultez Filtrer les demandes par propriétés dans la référence des fonctionnalités réseau.
Ancrer à gauche du menu de commande
Pour déplacer DevTools à gauche de la fenêtre d’affichage (page web rendue), ouvrez le menu de commande et exécutez la Dock to left commande. La fonctionnalité Ancrer à gauche est disponible depuis Microsoft Edge 75, mais elle n’était auparavant accessible qu’à partir du menu principal. Vous pouvez désormais accéder à la fonctionnalité Dock à gauche à partir du menu de commande.
»
Envoyez vos commentaires en tweetant ou en cliquant sur l’icône Envoyer des commentaires .
Chromium problème #1011679
Voir aussi :
Le comité d’audit est maintenant le comité Lighthouse
L’équipe de DevTools a souvent reçu des commentaires de développeurs Web disant que s’il était possible d’exécuter Lighthouse à partir de DevTools, lorsqu’ils l’ont essayé, ils n’ont pas pu trouver de panneau « Lighthouse ». Ainsi, le comité d’audit s’appelle maintenant le comité Lighthouse .
Remarque : Le panneau Lighthouse fournit des liens vers du contenu hébergé sur des sites Web tiers. Microsoft n’est pas responsable et n’a aucun contrôle sur le contenu de ces sites et sur les données qu’ils peuvent collecter.
Voir aussi :
Supprimer toutes les substitutions locales dans un dossier
Après avoir configuré les remplacements locaux, vous pouvez cliquer avec le bouton droit sur un répertoire, puis sélectionner la nouvelle option Supprimer tous les remplacements pour supprimer tous les remplacements locaux dans ce dossier.
Envoyez vos commentaires en tweetant ou en cliquant sur l’icône Envoyer des commentaires .
Chromium problème #1016501
Voir aussi :
Mise à jour de l’interface utilisateur des tâches longues
Une tâche longue est un code JavaScript qui monopolise le thread principal pendant une longue période, provoquant le blocage d’une page web.
Vous pouvez visualiser les tâches longues dans le panneau Performance depuis un certain temps maintenant, mais dans Microsoft Edge 83, l’interface utilisateur de visualisation des tâches longues dans l’outil Performance a été mise à jour. La partie tâche longue d’une tâche est désormais colorée avec un arrière-plan rouge rayé :
Envoyez vos commentaires en tweetant ou en cliquant sur l’icône Envoyer des commentaires .
Chromium problème #1054447
Prise en charge des icônes masquables dans le volet Manifest
Il existe une nouvelle case à cocher, Afficher uniquement la zone de sécurité minimale pour les icônes masquables, dans le volet Manifeste de l’outil Application .
Android Oreo a introduit des icônes adaptatives, qui affichent des icônes d’application sous différentes formes sur différents modèles d’appareils. Les icônes masquables sont un nouveau format d’icône qui prend en charge les icônes adaptatives, ce qui vous permet de vous assurer que votre icône PWA s’affiche correctement sur les appareils qui prennent en charge la norme des icônes masquables.
Pour case activée que votre icône masquable s’affiche bien sur les appareils Android Oreo, dans le volet Manifeste de l’outil Application, cochez la nouvelle case Afficher uniquement la zone de sécurité minimale pour les icônes masquables :
Cette fonctionnalité a été lancée dans Microsoft Edge 81. Les mises à jour couvertes ici dans Microsoft Edge 83 n’étaient pas couvertes dans Nouveautés de DevTools (Microsoft Edge 81).
Voir aussi :
- Afficher, modifier et supprimer des cookies - Articles sur l’outil Application .
Remarque
Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Kayce Basques.
Ce travail est sous licence Creative Commons Attribution 4.0 International.