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 vous aide à 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é pleine page. Actualisez ensuite les outils de développement. Un nouveau bouton d'accessibilité s'affiche dans le panneau Elements (Éléments).

Cliquez 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, puis 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 aussi avec 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 sur cette fonctionnalité en preview. N'hésitez pas à nous faire part de vos commentaires pour nous aider à 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 Changes (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 est 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 du flux utilisateur

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

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

Nous pouvons utiliser les nouveaux paramètres de délai avant expiration pour résoudre ce problème. Développez l'étape où nous cliquons sur l'élément de menu. Modifiez l'étape dans le champ Ajouter un délai d'inactivité 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 nouvelle lecture pour toutes les étapes. Développez les paramètres de nouvelle lecture, puis modifiez la valeur Délai avant expiration.

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

Problème Chromium: 1257499

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

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

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

Pour tester une page spécifique, accédez-y dans Chrome, puis dans les outils de développement, accédez à Application > Cache amélioré. Ensuite, cliquez sur le bouton Test back/forward cache (Tester le cache amélioré). Les outils de développement tenteront de revenir en arrière, puis de quitter la page pour déterminer si la page peut être restaurée à partir du cache amélioré.

En tant que développeurs Web, il est essentiel de savoir optimiser vos pages pour le cache amélioré sur tous les navigateurs, car cela améliorera considérablement l'expérience de navigation pour les 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 des 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 qui vous intéressent et ainsi d'améliorer votre productivité.

Filtre du volet des propriétés

Problème Chromium: 1269674

Émuler la caractéristique média CSS "force-colors"

La fonctionnalité média CSS forced-colors permet de détecter si le user-agent a activé un mode de couleurs forcé (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 Commandes, exécutez la commande Show Rendering (Afficher le rendu), puis définissez le menu déroulant Emulate CSS media feature (Émuler les couleurs forcées de la fonctionnalité média CSS).

Fonctionnalité multimédia CSS "force-colors"

Problème Chromium: 1130859

Afficher les règles lors de la commande de survol

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

Afficher les règles lors de la commande de survol

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 répéter XHR et développer tous les résultats de recherche

Raccourcis clavier pour répéter 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 répéter la requête XHR que via le menu contextuel (clic droit > Relancer XHR).

répéter 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 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 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 }

Consultez les 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 fonctionne désormais avec Lighthouse 9. Lighthouse affiche alors tous les éléments ayant le même ID.

Un ID d'élément non unique est un problème d'accessibilité courant. Par exemple, l'identifiant référencé dans un attribut aria-labelledby est utilisé pour 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, montrant deux éléments, tous les deux ayant le même "id"

Problème Chromium: 772558

Panneau "Sources" amélioré

Beaucoup d'améliorations de stabilité dans le panneau Sources suite à sa mise à niveau pour utiliser CodeMirror 6. Voici quelques améliorations notables:

Beaucoup plus rapide lors de l'ouverture de fichiers volumineux (par exemple, WASM, JavaScript)
Plus besoin de faire défiler le code de façon aléatoire
Amélioration des suggestions de saisie semi-automatique pour les sources modifiables (par exemple, extraits ou remplacement local)

Problème Chromium: 1241848

Points forts divers

Voici quelques correctifs importants dans cette version:

Affichage correct du diagramme en cascade des requêtes réseau. Auparavant, le style n'était pas fonctionnel. (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. Le problème est désormais résolu. (1275496).
Il n'y a plus d'onglet Charge utile en double dans les requêtes réseau. (1273972).
Correction des informations manquantes sur les décalages de mise en page dans la section Summary (Résumé) du panneau Performance (Performances). (1259606).
Accepter des caractères arbitraires (par exemple, , et .) 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 vous 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, etc.

Volet API Reporting

Problème Chromium: 1200732

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.