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 filtre a été repensée pour vous permettre de filtrer plus facilement les demandes et de désencombrer le panneau Réseau.

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

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

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

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

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

Problème Chromium: 1486431.

Améliorations apportées aux éléments

Assistance @font-palette-values

Le panneau "Elements" prend désormais en charge l'attribut attribut "at-rule" dans 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. Les outils de développement vous permettent d'accéder à la section dédiée @font-palette-values, dans laquelle vous pouvez modifier vos valeurs personnalisées.

Section @font-palette-values dans Styles.

Problème Chromium: 1501781.

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

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

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

Problème Chromium: 1499265.

Meilleure compatibilité avec les cartes sources

Dans la section Paramètres, Paramètres > Tests > check_box L'option Résoudre les noms de variables dans les expressions à l'aide de mappages sources a été activée par défaut.

Les outils de développement utilisent des cartes sources pour vous permettre de déboguer votre code d'origine dans les sources et le champ d'application, 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:

Pour en savoir plus, consultez le document RFC correspondant.

Problème Chromium: 1444349.

Améliorations du panneau "Performances"

Suivi des interactions améliorées

La section Performances > La piste Interactions présente des moustaches qui indiquent les retards d'entrée et de présentation au moment du traitement.

Ajout de moustaches avant et après l'ajout de moustaches au canal "Interactions".

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

Problème Chromium: 1495751.

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

Les onglets Ascendant, Arborescence d'appel et Journal des événements du panneau Performances comportent trois nouveaux boutons de filtrage avancé:

  • match_case Respecte la casse.
  • regular_expression Expression régulière.
  • match_word 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 de l'onglet Ascendant. Auparavant, le filtre correspondait à chaque nœud.

Problème Chromium: 1496355.

Repères de retrait dans le panneau "Sources"

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

Marquage des blocs de code en retrait par des lignes verticales avant et après.

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 (Réseau) 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 indiquent ce qui a été ignoré 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éponse"

Problème Chromium: 1469776.

Nouvelles options du menu de commandes pour l'ajout et la suppression de schémas de blocage des requêtes

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

Les commandes avant et après l'ajout de nouvelles commandes permettent d'ajouter ou de supprimer des modèles de blocage de réseau.

La commande Ajouter vous permet d'afficher la boîte de dialogue permettant de spécifier le format, et la commande Supprimer supprime tous les formats sans ouvrir le panneau Blocage des requêtes réseau.

Le test des 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 il est considéré comme redondant.

Pour consulter les détails de CSP, accédez à Application > Cadres > Content Security Policy (CSP) :

Règle Content Security Policy dans le panneau "Application".

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

Règle 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 changements notables figure la possibilité de générer des rapports sur les pages 404.

Pour découvrir les principes de base 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 comporte les améliorations d'accessibilité suivantes:

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

Problèmes Chromium: 1338391, 1500662, 1420362.

Points importants 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) ouvre non seulement la console, mais se ferme également lorsque vous appuyez une seconde fois sur l'écran.
  • Ressources pour les développeurs Correction d'un bug qui empêchait de signaler des ressources CSS et les problèmes associés (1420362).
  • Éléments: <ph type="x-smartling-placeholder">
      </ph>
    • Correction d'un bug lié à l'inspection d'éléments dans des 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 désormais 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 les URI data:. (1381791)
  • Mémoire : Ajout des boutons d'enregistrement upload et téléchargement appropriés à la barre d'action (1275407).

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 vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement