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

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

Sofia Emelianova

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

La barre de filtre a été repensée pour vous permettre de filtrer plus facilement les demandes et de désencombrer le panneau Network.

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

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

Pour l'afficher de nouveau immédiatement, désactivez Paramètres > Paramètres > Tests > check_box_outline_blank Refonte de la barre de filtre dans le panneau "Réseau".

L'avant et après la simplification de la barre de filtre 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 apportées aux éléments

Assistance `@font-palette-values`

Le panneau "Elements" est désormais compatible avec la règle CSS @font-palette-values. Elle 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 pour que les outils de développement vous permettent d'accéder à la section dédiée de @font-palette-values, dans laquelle vous pouvez modifier vos valeurs personnalisées.

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

Problème Chromium: 1501781.

Cas compatible: propriété personnalisée en remplacement d'une autre propriété personnalisée

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

avant et après la résolution d'une propriété personnalisée en remplacement d'une autre propriété personnalisée.

Problème Chromium: 1499265.

Amélioration de la compatibilité avec les cartes sources

La section Paramètres Paramètres > Tests > case à cocher Résoudre les noms de variables dans les expressions à l'aide de mappages sources est activée par défaut.

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

Expressions dans la console et suggestions de saisie semi-automatique
Expressions instantanées
Expressions de contrôle
Points d'arrêt conditionnels et points de journalisation

Pour en savoir plus, consultez le document RFC correspondant.

Problème Chromium: 1444349.

Améliorations apportées au panneau "Performances"

Suivi des interactions améliorées

La piste Performances > Interactions obtient des moustaches qui indiquent les retards d'entrée et de présentation au niveau des limites de temps de traitement.

L'avant et l'après ajout de moustaches à la piste des interactions.

De plus, lorsque vous pointez sur une interaction, une info-bulle indiquant le temps nécessaire s'affiche.

Problème Chromium: 1495751.

Filtrage avancé dans les onglets "Ascendant", "Arborescence d'appel" et "Journal des événements"

Les onglets Bottom-Up (Ascendant), Call Tree (Arborescence d'appel) et Event Log (Journal des événements) du panneau Performance disposent de trois nouveaux boutons de filtrage avancé:

match_case Respectez la casse.
regular_expression Expression régulière.
match_word et correspond au mot entier.

Les trois nouveaux boutons pour le filtrage avancé

De plus, pour vous aider à conserver le contexte, seuls les éléments de niveau supérieur correspondent au filtre de l'onglet Ascendant. Auparavant, le filtre correspondait à chaque nœud.

Problème Chromium: 1496355.

Repères de retrait dans le panneau des sources

Pour plus de commodité, l'éditeur du panneau Sources marque désormais les blocs de code en retrait à l'aide de lignes verticales.

L'avant et après le marquage des blocs de code en retrait 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 Network affiche désormais des info-bulles lorsque vous pointez sur l'icône en forme de point violet à côté des onglets Headers (En-têtes) et Response (Réponse) d'une requête. Les info-bulles vous indiquent ce qui a été remplacé par les outils de développement.

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

Problème Chromium: 1469776.

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

Les commandes avant et après l'ajout de nouvelles commandes permettant d'ajouter ou de supprimer des schémas de blocage de réseau.

La commande Ajouter affiche la boîte de dialogue permettant de spécifier le format. La commande Supprimer supprime tous les formats sans ouvrir le panneau Blocage des requêtes réseau.

Le test de cas de non-respect des CSP a été supprimé

L'onglet expérimental Cas de non-respect des CSP introduit dans la version 89 a été supprimé, car redondant.

Pour afficher un aperçu des informations sur CSP, accédez à Application > Frames > Content Security Policy (CSP).

Content Security Policy dans le panneau "Application"

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

Content Security Policy dans le panneau "Application"

Lighthouse 11.3.0

Le panneau Lighthouse exécute désormais la version 11.3.0 de Lighthouse. Consultez la liste complète des modifications. Parmi les changements 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 de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Accessibilité

Cette version propose les améliorations d'accessibilité suivantes:

Dans Réseau > Charge utile, vous pouvez désormais cibler les boutons Afficher la source et Afficher les valeurs encodées au format URL à l'aide de la touche de tabulation, puis appuyer sur Entrée ou Espace pour déclencher l'action correspondante.
Pour éviter toute confusion dans Console, les liens qui redirigent vers des scripts qui ne sont plus disponibles dans Debugger sont maintenant grisés et ne sont pas cliquables.
Dans les arborescences de navigation, telles que celle de Sources > Page, la touche Entrée permet de développer et de réduire les nœuds enfants.

Problèmes Chromium: 1338391, 1500662, 1420362.

Points forts divers

Voici quelques correctifs et améliorations importants dans cette version:

Performances Si un enregistrement échoue, vous avez désormais la possibilité de télécharger les événements de trace bruts et d'essayer d'identifier le problème (commit).
Désormais, le raccourci Afficher la console (Ctrl+` pour Mac, Ctrl++ pour Windows et Linux) permet non seulement d'ouvrir la console, mais de se fermer lorsque l'utilisateur appuie une deuxième fois.
Ressources pour les développeurs Correction d'un bug qui empêchait de signaler les ressources CSS et les problèmes associés (1420362).
Éléments :
- Correction d'un bug lors de 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 le calcul du nombre de correspondances pour les requêtes courtes d'un ou deux caractères (1416457).
Console : Analyse correctement les expressions régulières qui se terminent par un caractère échappé dans la zone Filtre (1346936).
Paramètres > Espace de travail. Correction d'un bug qui empêchait l'ajout d'un dossier exclu (1503580).
Réseau > Aperçu. Affiche désormais les images avec des URI data: (1381791).
Memory (Mémoire) : Ajout de boutons d'importation et de téléchargement appropriés à la barre d'action. (1275407)

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.