Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

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é sur toute la page. Actualisez ensuite les outils de développement. Un nouveau bouton d'accessibilité s'affiche dans le panneau Éléments.

Vous pouvez cliquer dessus pour passer à 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 à 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 pour 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 preview. N'hésitez pas à nous faire part de vos commentaires pour nous aider à l'améliorer.

Arborescence d'accessibilité pleine page

Problème Chromium: 887173

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

Les modifications de code dans l'onglet Modifications s'affichent automatiquement sous forme élégante.

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 , 1086491

Définir un délai plus long pour l'enregistrement du flux 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. Cela est particulièrement utile pour les pages comportant des requêtes réseau lentes et de longues animations.

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

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

Si vous le souhaitez, vous pouvez régler le délai avant expiration dans les paramètres de relecture pour toutes les étapes. Développez Paramètres de relecture, puis modifiez la valeur du délai avant expiration.

paramètres de délai d'inactivité pour l'enregistrement du flux utilisateur

Problème Chromium: 1257499

Assurez-vous que vos pages peuvent être mises en cache avec l'onglet "Cache amélioré"

Le cache amélioré (ou bfcache) est une optimisation du navigateur qui permet une navigation vers l'avant et l'avant instantanée.

Le nouvel onglet Cache amélioré peut vous aider à tester vos pages afin de vous assurer qu'elles sont optimisées pour le cache amélioré et à identifier les problèmes qui les empêchent d'être éligibles.

Pour tester une page en particulier, accédez-y dans Chrome, puis dans les outils de développement, accédez à Application > Cache amélioré. Ensuite, cliquez sur le bouton Tester le cache amélioré. Les outils de développement tenteront alors de quitter la page, puis de revenir en arrière pour déterminer si la page 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 cache amélioré dans tous les navigateurs, car cela améliorera considérablement l'expérience de navigation des utilisateurs, en particulier ceux dont les réseaux ou les appareils sont plus lents.

Onglet du 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 propriétés dont vous avez besoin, et donc d'améliorer votre productivité.

Filtre du volet des 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 le user-agent 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 sur la page.

Ouvrez le menu "Command" (Commandes), 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).

Fonctionnalité multimédia CSS de couleurs forcées

Problème Chromium: 1130859

Afficher les règles lors du passage de la souris

Vous pouvez maintenant ouvrir le menu de commandes et exécuter la commande Afficher les règles lorsque l'utilisateur pointe dessus. 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 qu'en cochant la case Paramètres > Afficher les règles.

Afficher les règles lors du passage de la souris

Problème Chromium: 1270562

Prise en charge de `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 relancer XHR et développer tous les résultats de recherche

Raccourcis clavier pour relancer XHR dans le panneau "Network"

Sélectionnez une requête XHR dans le panneau Network (Réseau), puis appuyez sur la touche R du clavier pour répéter la requête XHR. Auparavant, vous ne pouviez relancer la requête XHR qu'à partir du menu contextuel (clic droit > Relancer XHR).

revoir XHR

Problème Chromium: 1050021

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

Un nouveau raccourci est ajouté dans l'onglet Rechercher. Il vous permet 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 de recherche en appuyant sur Esc > menu Esc > Esc. 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 }

Accédez aux raccourcis clavier pour en savoir plus sur les raccourcis clavier dans les outils pour les développeurs Chrome.

Problème Chromium: 1255073

Lighthouse 9 dans le panneau Lighthouse

Le panneau Lighthouse utilise maintenant Lighthouse 9. Lighthouse affiche à présent 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 mises à jour, consultez la page Nouveautés de Lighthouse 9.0.

Un audit Lighthouse pour "Tous les éléments sélectionnables doivent avoir un "id" unique, affichant deux éléments ayant le même "id"

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:

Nettement plus rapide lors de l'ouverture de fichiers volumineux (WASM, JavaScript, etc.)
Plus besoin de faire défiler aléatoirement le code
Amélioration des suggestions de la saisie semi-automatique pour les sources modifiables (extraits, remplacement local, par exemple)

Problème Chromium: 1241848

Points importants divers

Voici quelques correctifs importants dans cette version:

Affichage correct du diagramme en cascade des requêtes réseau. Auparavant, le style ne fonctionnait pas. (1275501).
La mise en surbrillance du code ne fonctionnait pas lors de la recherche de documents comportant de très longues lignes dans le panneau Sources. Ce problème est maintenant résolu. (1275496).
Plus aucun onglet Charge utile en double dans les requêtes réseau. (1273972).
Correction des détails manquants de décalages de mise en page dans la section Summary (Résumé) du panneau Performance. (1259606).
Prise en charge des caractères arbitraires (par exemple, ,, .) dans les requêtes Network Search. (1267196).

[Expérimental] Points de terminaison dans le volet de l'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. Elle offre 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

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.