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

Sofia Emelianova
Sofia Emelianova
GitHub

Barre de filtre simplifiée dans le panneau "Réseau"

La barre de filtres a été repensée pour vous permettre de filtrer plus facilement les requêtes et de désencombrer le panneau Réseau.

Le test correspondant était activé par défaut dans cette version, mais il sera rétabli. Vous pouvez suivre la progression sur crbug.com/1523150.

La nouvelle barre de filtres comporte deux menus déroulants : l'un permet de choisir les types de requêtes, l'autre de masquer les données et les URL d'extension, ou de n'afficher que les cookies et les requêtes bloqués, ainsi que les requêtes tierces. Les deux menus sont compatibles avec la sélection multiple.

Pour rétablir immédiatement l'ancienne barre de filtres, désactivez Nouvelle conception de la barre de filtres dans le panneau "Réseau".

Avant et après la simplification de la barre de filtres dans le panneau "Réseau".

N'hésitez pas à nous faire part de vos commentaires sur cette fonctionnalité sur crbug.com/1500573.

Problème Chromium : 1486431.

Améliorations des éléments

Assistance @font-palette-values

Le panneau "Éléments" est désormais compatible avec la règle CSS at-rule @font-palette-values. Il vous permet de personnaliser les valeurs par défaut de la propriété font-palette.

Dans Styles, cliquez sur la valeur de la propriété font-palette. Les outils de développement vous redirigent vers la section dédiée @font-palette-values, où vous pouvez modifier vos valeurs personnalisées.

Section "@font-palette-values" dans "Styles".

Problème Chromium : 1501781.

Cas pris en charge : propriété personnalisée comme solution de secours pour une autre propriété personnalisée

Éléments > Styles résout désormais une propriété personnalisée qui est une valeur de remplacement d'une autre propriété personnalisée.

Avant et après la résolution d'une propriété personnalisée en tant que solution de secours d'une autre propriété personnalisée.

Problème Chromium : 1499265.

Amélioration de la compatibilité avec les cartes sources

Le Paramètres > Tests > Résoudre les noms de variables dans les expressions à l'aide des cartes sources est activé par défaut.

Les outils de développement utilisent des mappages source pour vous permettre de déboguer votre code d'origine dans Sources et Portée, même après l'avoir combiné, minimisé ou compilé. Ce test vous permet d'évaluer vos noms de variables d'origine de manière cohérente dans les outils pour les développeurs, y compris, mais sans s'y limiter :

Pour en savoir plus, consultez la RFC correspondante.

Problème Chromium : 1444349.

Améliorations apportées au panneau "Performances"

Suivi des interactions améliorées

La piste Performances > Interactions comporte des moustaches qui indiquent les délais d'entrée et de présentation aux limites du temps de traitement.

Avant et après l'ajout de moustaches à la piste "Interactions".

De plus, lorsque vous pointez sur une interaction, une info-bulle utile détaillant les timings s'affiche.

Problème Chromium : 1495751.

Filtrage avancé dans les onglets "De bas en haut", "Arborescence des appels" et "Journal des événements"

Les onglets De bas en haut, Arborescence des appels et Journal des événements du panneau Performances ont été enrichis de trois nouveaux boutons de filtrage avancé :

  •  : Respecter la casse.
  • Expression régulière.
  • Correspondre au mot entier.

Les trois nouveaux boutons de filtrage avancé.

De plus, pour vous aider à conserver le contexte, seuls les éléments de premier niveau correspondent désormais au filtre dans l'onglet De bas en haut. Auparavant, le filtre correspondait à chaque nœud.

Problème Chromium : 1496355.

Marqueurs d'indentation dans le panneau "Sources"

L'éditeur du panneau Sources marque désormais les blocs de code mis en retrait avec des lignes verticales pour plus de commodité.

Avant et après le marquage des blocs de code indentés avec des lignes verticales.

Problème Chromium : 1479986.

Info-bulles utiles pour les en-têtes et le contenu remplacés dans le panneau "Réseau"

Le panneau Réseau affiche désormais des info-bulles lorsque vous pointez sur l'icône en forme de point violet à côté des onglets En-têtes et Réponse d'une requête. Les info-bulles vous indiquent ce qui a été remplacé par les outils de développement.

Les nouvelles info-bulles à côté de l'icône en forme de point violet dans les onglets "En-têtes" et "Réponse".

Problème Chromium : 1469776.

Nouvelles options du menu de commandes pour ajouter et supprimer des schémas de blocage de requêtes

Vous pouvez désormais saisir des commandes pour ajouter ou supprimer des schémas de blocage de requêtes réseau dans le menu de commandes.

Avant et après l'ajout de nouvelles commandes pour ajouter ou supprimer des schémas de blocage de réseau.

La commande Ajouter vous redirige vers la boîte de dialogue permettant de spécifier le schéma, tandis que la commande Supprimer supprime tous les schémas sans ouvrir le panneau Blocage des requêtes réseau.

Le test sur les cas de non-respect de la CSP est supprimé

L'onglet expérimental Violations de la CSP introduit dans la version 89 a été supprimé, car il était redondant.

Pour afficher les détails de la CSP en un coup d'œil, accédez à Application > Frames > Content Security Policy (CSP).

La Content Security Policy dans le panneau "Application".

De plus, le panneau Problèmes signale les cas de non-respect de la CSP.

La Content Security Policy dans le panneau "Application".

Lighthouse 11.3.0

Le panneau Lighthouse exécute désormais Lighthouse 11.3.0. Consultez la liste complète des modifications. Parmi les modifications notables, citons la possibilité de générer des rapports sur les pages 404.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 772558.

Accessibilité

Cette version présente les améliorations d'accessibilité suivantes :

  • Dans Réseau > Charge utile, vous pouvez désormais sélectionner les boutons Afficher la source et Afficher l'URL encodée à l'aide de la touche de tabulation, puis appuyer sur Entrée ou Espace pour déclencher l'action correspondante.
  • Dans la console, pour éviter toute confusion, les liens qui mènent à des scripts qui ne sont plus disponibles dans le débogueur sont désormais grisés et ne peuvent plus être cliqués.
  • Dans les arborescences de navigation, comme celle de Sources > Page, la touche Entrée permet désormais de développer et de réduire les nœuds enfants.

Problèmes Chromium : 1338391, 1500662, 1420362.

Autres points importants

Voici quelques corrections et améliorations importantes apportées à cette version :

  • Performances Si un enregistrement échoue, vous pouvez désormais télécharger les événements de trace bruts et essayer de comprendre ce qui n'a pas fonctionné (commit).
  • Le raccourci Afficher la console (Ctrl+` pour Mac, Ctrl++ pour Windows et Linux) permet désormais d'ouvrir la console, mais aussi de la fermer en appuyant une deuxième fois sur le raccourci.
  • Ressources pour les développeurs. Correction d'un bug qui empêchait de signaler les ressources CSS et leurs problèmes (1420362).
  • Éléments :
    • Correction d'un bug lié à l'inspection des éléments dans les iFrames (1453375).
    • Calculé : Correction d'un bug qui empêchait l'affichage des valeurs par défaut (1499882).
    • Search. Correction d'un bug qui empêchait de calculer le nombre de correspondances pour les requêtes courtes d'un ou deux caractères (1416457).
  • Console L'analyse des expressions régulières se terminant par un caractère d'échappement dans la zone Filtre est désormais correcte (1346936).
  • Paramètres > Espace de travail. Correction d'un bug qui empêchait l'ajout d'un dossier exclu (1503580).
  • Réseau > Aperçu. Les images sont désormais affichées avec des URI data: (1381791).
  • Mémoire Ajout des boutons et dans la barre d'action (1275407).

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 Chrome DevTools

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 de DevTools.