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

Jecelyn Yeen

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

Le nouvel arbre d'accessibilité en pleine page vous permet d'obtenir plus facilement une vue d'ensemble de l'arbre d'accessibilité en pleine page et de mieux comprendre comment votre contenu Web est exposé aux technologies d'assistance.

Dans le panneau Éléments, ouvrez le panneau Accessibilité et cochez la case Activer l'arborescence d'accessibilité en pleine page. Ensuite, rechargez les outils de développement. Un nouveau bouton d'accessibilité s'affichera dans le panneau Éléments.

Vous pouvez cliquer dessus pour passer à la vue Arborescence d'accessibilité en pleine page. Vous pouvez développer des nœuds ou cliquer dessus pour afficher des détails dans le volet Accessibilité.

Sélectionnez un nœud et revenez à l'arborescence 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'affichage de l'arborescence DOM ↔ arborescence d'accessibilité.

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

Notre équipe travaille toujours activement sur cette fonctionnalité en avant-première. Nous aimerions recueillir vos commentaires pour continuer à améliorer cette fonctionnalité.

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 automatiquement mises en forme.

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

Onglet "Modifications"

Problèmes Chromium : 1238818, 1268754 , 1086491

Définir un délai d'inactivité plus long pour l'enregistrement des parcours utilisateur

Vous pouvez désormais ajuster les paramètres de délai d'inactivité dans l'enregistreur pour toutes les étapes ou une étape spécifique. Cela est particulièrement utile pour les pages avec des requêtes réseau lentes et des animations longues.

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

Pour résoudre ce problème, nous pouvons utiliser les nouveaux paramètres Délai d'inactivité. Développez l'étape dans laquelle 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 d'inactivité dans les paramètres de relecture pour toutes les étapes. Développez Paramètres de relecture et modifiez la valeur Délai avant expiration.

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

Problème Chromium : 1257499

Vérifier que vos pages sont 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 Précédent/Suivant 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 en particulier, accédez-y dans Chrome, puis dans les outils pour les développeurs, accédez à Application > Cache amélioré. Ensuite, cliquez sur le bouton Tester le cache amélioré. Les outils pour les développeurs tenteront 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 comment optimiser vos pages pour le bfcache sur tous les navigateurs, car cela améliorera 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 dans le volet "Propriétés"

Si vous souhaitez vous concentrer sur une propriété spécifique dans le volet Propriétés, vous pouvez désormais saisir le nom ou la valeur de cette propriété dans la nouvelle zone de texte 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 propriétés qui vous intéressent et d'améliorer ainsi votre productivité.

Filtre du volet "Propriétés"

Problème Chromium : 1269674

Émuler la caractéristique média CSS forced-colors

La fonctionnalité mé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), qui applique une palette de couleurs limitée choisie par l'utilisateur sur 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 forced-colors (Émuler la caractéristique média CSS forced-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 au survol). Les règles de la page permettent de mesurer plus facilement la largeur et la hauteur d'un élément.

Auparavant, vous ne pouviez activer les règles de la page qu'en cochant la case Paramètres > Afficher les règles.

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

Problème Chromium : 1270562

Compatibilité avec row-reverse et column-reverse dans l'éditeur Flexbox

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

Éditeur Flexbox

Problème Chromium : 1263866

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

Raccourcis clavier pour rejouer les requêtes XHR dans le panneau "Réseau"

Sélectionnez une requête XHR dans le panneau Réseau, puis appuyez sur R sur le clavier pour relancer la requête XHR. Auparavant, vous ne pouviez relire le XHR que via le menu contextuel (clic droit > Relire le XHR).

Relancer XHR

Problème Chromium : 1050021

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

Un nouveau raccourci a été ajouté dans l'onglet Rechercher pour vous permettre de développer 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 fichier à la fois.

Ouvrez l'onglet "Recherche" en appuyant sur Échap > menu à trois points > Rechercher. Saisissez une chaîne de recherche (par exemple, "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 ceux disponibles 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 `id` unique", montrant deux éléments avec le même `id`

Problème Chromium : 772558

Panneau "Sources" amélioré

De nombreuses améliorations de la stabilité ont été apportées au panneau Sources lors de sa mise à niveau vers CodeMirror 6. Voici quelques améliorations importantes :

  • Ouverture des fichiers volumineux (par exemple, WASM, JavaScript) beaucoup plus rapide
  • Fin du défilement aléatoire lors de l'exécution du code
  • Amélioration des suggestions de saisie automatique pour les sources modifiables (par exemple, les extraits et les remplacements locaux)

Problème Chromium : 1241848

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

  • Affichage correct du diagramme en cascade des requêtes réseau. Auparavant, le style était cassé. (1275501)
  • La mise en surbrillance du code ne fonctionnait pas lors de la recherche dans des documents comportant des lignes très longues dans le panneau Sources. Ce problème est désormais résolu. (1275496)
  • L'onglet Charge utile n'est plus dupliqué dans les requêtes réseau. (1273972)
  • Correction des détails manquants sur les changements de mise en page 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. (1267196)

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

Le volet expérimental 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 Points de terminaison est désormais disponible. Il vous donne un aperçu de tous les points de terminaison configurés dans l'en-tête Reporting-Endpoints.

Découvrez comment utiliser l'API Reporting pour surveiller les atteintes à 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 Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.