Nouveautés des outils de développement (Chrome 98)

Jecelyn Yeen

Fonctionnalité en preview: Arborescence d'accessibilité pleine page

La nouvelle arborescence d'accessibilité pleine page vous permet d'obtenir plus facilement un aperçu de l'arborescence d'accessibilité pleine page et de mieux comprendre comment votre contenu Web est exposé aux technologies d'assistance.

Dans le panneau Éléments, ouvrez le volet Accessibilité et cochez la case Activer l'arborescence d'accessibilité en pleine page. Actualisez ensuite DevTools. Un nouveau bouton d'accessibilité s'affiche dans le panneau Éléments.

Vous pouvez cliquer dessus pour afficher l'arborescence d'accessibilité en pleine page. Vous pouvez développer les nœuds ou cliquer pour afficher les détails dans le volet Accessibilité.

Sélectionnez un nœud et revenez à la vue arborescente du DOM. Le nœud DOM correspondant est maintenant sélectionné. C'est un excellent moyen de comprendre le mappage entre le nœud DOM et son nœud d'arborescence d'accessibilité. Cela fonctionne également pour l'arborescence DOM ⬌ Arborescence d'accessibilité.

Auparavant, l'arborescence d'accessibilité était disponible dans le volet Accessibilité. La vue est limitée et ne vous permet d'explorer qu'un seul nœud et ses ancêtres.

Notre équipe travaille toujours activement sur cette fonctionnalité en version Preview. N'hésitez pas à nous faire part de vos commentaires pour nous aider à l'améliorer.

Arborescence d'accessibilité en pleine page

Problème Chromium: 887173

Modifications plus précises dans l'onglet "Modifications"

Les modifications de code dans l'onglet Modifications sont mises en forme automatiquement.

Auparavant, il était difficile de suivre les modifications réelles du code source réduit, car tout le code était affiché sur une seule ligne.

Onglet "Modifications"

Problèmes Chromium: 1238818, 1268754 et 1086491

Définir un délai avant expiration plus long pour l'enregistrement du parcours utilisateur

Vous pouvez désormais ajuster les paramètres du délai d'inactivité dans l'Enregistreur pour toutes les étapes ou une étape spécifique. Cette fonctionnalité est particulièrement utile pour les pages avec des requêtes réseau lentes et une animation longue.

Par exemple, j'ai enregistré un parcours utilisateur sur cette page de démonstration pour charger et cliquer sur l'élément de menu. Toutefois, le chargement des éléments de menu est lent (6 secondes). La lecture de ce parcours utilisateur a échoué, car elle a dépassé cinq secondes (le délai avant expiration par défaut).

Nous pouvons utiliser les nouveaux paramètres de timeout pour résoudre ce problème. Développez l'étape où nous cliquons sur l'élément de menu. Modifiez l'étape en Ajoutant un délai avant expiration et définissez-le sur 6 000 millisecondes (soit 6 secondes).

Vous pouvez également ajuster le délai avant expiration dans les paramètres de la lecture pour toutes les étapes. Développez Paramètres de relecture, puis modifiez la valeur de Délai avant expiration.

Paramètres de délai avant expiration pour l'enregistrement du parcours utilisateur

Problème Chromium: 1257499

Vérifier que vos pages peuvent être mises en cache avec l'onglet "Cache amélioré"

Le cache amélioré est une optimisation de navigateur qui permet de naviguer instantanément vers les pages précédentes et suivantes.

Le nouvel onglet Cache avant/arrière vous permet de tester vos pages afin de vérifier qu'elles sont optimisées pour bfcache, et d'identifier les problèmes susceptibles de les rendre incompatibles.

Pour tester une page spécifique, accédez-y dans Chrome, puis dans les outils de développement, accédez à Application > Cache amélioré. Cliquez ensuite sur le bouton Tester le cache avant/arrière. DevTools tentera de quitter la page, puis d'y revenir pour déterminer si elle peut être restaurée à partir du cache amélioré.

En tant que développeur Web, il est essentiel de savoir optimiser vos pages pour bfcache dans tous les navigateurs, car cela améliore considérablement l'expérience de navigation des utilisateurs, en particulier ceux dont la connexion réseau ou les appareils sont plus lents.

Onglet "Cache amélioré"

Problème Chromium: 1110752

Nouveau filtre du volet "Propriétés"

Si vous souhaitez vous concentrer sur une propriété spécifique du volet Properties (Propriétés), vous pouvez maintenant saisir le nom ou la valeur de cette propriété dans la nouvelle zone de texte Filter (Filtre).

Par défaut, les propriétés dont la valeur est null ou undefined ne sont pas affichées. Cochez la case Tout afficher pour afficher toutes les propriétés.

Ces améliorations vous permettent d'accéder plus rapidement aux établissements qui vous intéressent et donc d'améliorer votre productivité.

Filtre du volet "Propriétés"

Problème Chromium: 1269674

Émuler la fonctionnalité média CSS Force-colors

La fonctionnalité multimédia CSS forced-colors permet de détecter si l'agent utilisateur a activé un mode de couleurs forcées (par exemple, le mode "Contraste élevé" de Windows), dans lequel une palette de couleurs limitée choisie par l'utilisateur est appliquée à la page.

Ouvrez le menu "Command" (Commande), exécutez la commande Show Rendering (Afficher le rendu), puis définissez le menu déroulant Emulate CSS media feature force-colors (Émuler la fonctionnalité multimédia CSS forcée-colors).

Caractéristique média CSS forced-colors

Problème Chromium: 1130859

Commande "Afficher les règles au passage du pointeur"

Vous pouvez maintenant ouvrir le menu Command (Commande) et exécuter la commande Show rulers on hover (Afficher les règles en cas de survol). Les règles de page facilitent la mesure de la largeur et de la hauteur d'un élément.

Auparavant, vous ne pouviez activer les règles de page que via la case à cocher Paramètres > Afficher les règles.

Commande "Afficher les règles au passage du pointeur"

Problème Chromium: 1270562

Prise en charge de row-reverse et column-reverse dans l'éditeur Flexbox

L'éditeur Flexbox a ajouté deux boutons pour prendre en charge row-reverse et column-reverse dans flex-direction.

Éditeur Flexbox

Problème Chromium: 1263866

Nouveaux raccourcis clavier pour revoir XHR et développer tous les résultats de recherche

Raccourcis clavier pour la lecture des requêtes XHR dans le panneau "Network"

Sélectionnez une requête XHR dans le panneau Network (Réseau), puis appuyez sur R sur le clavier pour la lire à nouveau. Auparavant, vous ne pouviez pas replay le XHR via le menu contextuel (clic droit > Replay XHR [Replay XHR]).

XHR de relecture

Problème Chromium: 1050021

Raccourci clavier pour développer tous les résultats de recherche

Un nouveau raccourci a été ajouté dans l'onglet Recherche. Il vous permet d'afficher et de réduire tous les résultats de recherche. Auparavant, vous ne pouviez développer et réduire les résultats de recherche qu'en cliquant sur un seul fichier à la fois.

Ouvrez l'onglet de recherche en appuyant sur Échap > menu à trois points > Rechercher. Saisissez une chaîne de recherche (par exemple, une fonction), puis appuyez sur Entrée pour afficher la liste des résultats de recherche. Concentrez-vous sur les résultats de recherche et utilisez le raccourci suivant pour développer/réduire les fichiers de recherche:

  • Windows / Linux : Ctrl+Shift+{ ou }
  • MacOS : Cmd+Options+{ ou }

Consultez les raccourcis clavier pour connaître les raccourcis clavier dans les outils de développement Chrome.

Problème Chromium: 1255073

Lighthouse 9 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 9. Lighthouse liste désormais tous les éléments partageant le même ID.

Un ID d'élément non unique est un problème d'accessibilité courant. Par exemple, l'ID référencé dans un attribut aria-labelledby est utilisé sur plusieurs éléments.

Pour en savoir plus sur les nouveautés, consultez Nouveautés de Lighthouse 9.0.

​Audit Lighthouse pour "Tous les éléments sélectionnables doivent avoir un identifiant unique", montrant deux éléments, tous deux avec le même identifiant

Problème Chromium: 772558

Amélioration du panneau "Sources"

De nombreuses améliorations ont été apportées à la stabilité du panneau Sources, car nous l'avons mis à niveau pour utiliser CodeMirror 6. Voici quelques améliorations notables:

  • Ouverture beaucoup plus rapide des fichiers volumineux (par exemple, WASM, JavaScript)
  • Fini le défilement aléatoire lors de l'exécution du code
  • Amélioration des suggestions de saisie semi-automatique pour les sources modifiables (par exemple, extraits, forçage local)

Problème Chromium: 1241848

Points importants divers

Voici quelques corrections importantes apportées dans cette version:

  • Affichage correct du diagramme en cascade des requêtes réseau. Auparavant, le style était défectueux. (1275501)
  • La mise en surbrillance du code était défectueuse lors de la recherche dans des documents contenant des lignes très longues dans le panneau Sources. Le problème est maintenant résolu. (1275496)
  • Plus d'onglet Charge utile en double dans les requêtes réseau. (1273972)
  • Correction des détails des décalages de mise en page manquants dans la section Récapitulatif du panneau Performances. (1259606)
  • Prise en charge des caractères arbitraires (par exemple, ,, .) dans les requêtes de recherche sur le Réseau de Recherche. (1267196).

[Expérimental] Points de terminaison dans le volet de l'API Reporting

Le volet expérimental de l'API Reporting a été introduit dans Chrome 96 pour vous aider à surveiller les rapports générés sur votre page et leur état.

La section Endpoints (Points de terminaison) est désormais disponible. Il fournit un aperçu de tous les points de terminaison configurés dans l'en-tête Reporting-Endpoints.

Apprenez à utiliser l'API Reporting pour surveiller les cas de non-respect de la sécurité, les appels d'API obsolètes et plus encore.

Volet de l'API Reporting

Problème Chromium: 1200732

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.