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

Sofia Emelianova
Sofia Emelianova
GitHub

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

La barre de filtre a été repensée pour vous permettre de filtrer plus facilement les requêtes et de désencombrer le panneau Network (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 filtre comporte deux menus déroulants: l'un pour choisir les types de requêtes et l'autre pour masquer les données et les URL des extensions, ou n'afficher que les cookies et les requêtes bloqués, ainsi que les requêtes tierces. Les deux menus sont compatibles avec la multisélection.

Pour rétablir immédiatement l'ancienne barre de filtre, désactivez Settings > Experiments > Redesign of the filter bar in the Network panel (Paramètres > Tests > Refonte de la barre de filtre dans le panneau "Réseau").

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 la 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 @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. DevTools vous redirigera vers la section dédiée à @font-palette-values, où vous pourrez modifier vos valeurs personnalisées.

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

Problème Chromium: 1501781.

Cas accepté: propriété personnalisée comme solution de remplacement d'une autre propriété personnalisée

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

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

Problème Chromium: 1499265.

Amélioration de la compatibilité avec les cartes sources

La Résoudre les noms de variables dans les expressions à l'aide de maps sources a été activée par défaut dans Paramètres > Tests.

DevTools utilise des mappages source pour vous permettre de déboguer votre code d'origine dans Sources et Scope, 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 DevTools, 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"

Trajet "Interactions améliorées"

La trace Performances > Interactions affiche des barbes qui indiquent les retards d'entrée et de présentation aux limites de temps de traitement.

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

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

Problème Chromium: 1495751.

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

Les onglets De bas en haut, Arbre d'appels et Journal des événements du panneau Performances comportent 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 niveau supérieur correspondent désormais au filtre dans l'onglet De bas en haut. Auparavant, le filtre correspondait à tous les nœuds.

Problème Chromium: 1496355.

Repères d'indentation dans le panneau "Sources"

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

État 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 ignoré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é remplacé par DevTools.

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 commande 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 commande.

État avant et après l'ajout de nouvelles commandes pour ajouter ou supprimer des modèles de blocage de réseau.

La commande Ajouter vous permet d'accéder à la boîte de dialogue permettant de spécifier le modèle, tandis que la commande Supprimer supprime tous les modèles sans ouvrir le panneau Blocage des requêtes réseau.

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

L'onglet expérimental Non-respect des règles CSP introduit dans la version 89 a été supprimé, car il était redondant.

Pour consulter les détails du CSP en un coup d'œil, accédez à Application > Cadres > CSP (Content Security Policy).

La Content Security Policy dans le panneau "Application".

En outre, le panneau Problèmes signale les cas de non-respect des 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, vous pouvez désormais générer des rapports sur les pages 404.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 772558.

Accessibilité

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

  • Dans Network > Payload (Réseau > Charge utile), vous pouvez désormais mettre en surbrillance les boutons View source (Afficher la source) et View URL-encoded (Afficher l'URL encodée) à l'aide de la touche 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 pour le débogueur sont désormais grisés et ne sont plus cliquables.
  • 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 avec des enfants.

Problèmes Chromium: 1338391, 1500662, 1420362.

Autres points forts

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

  • Performances Si un enregistrement échoue, vous pouvez désormais télécharger des événements de trace bruts et essayer de comprendre ce qui s'est mal passé (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 lorsqu'il est enfoncé une seconde fois.
  • 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ée. 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 d'échappement dans la zone Filtrer (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 des images avec des URI data: (1381791).
  • Mémoire Ajout des boutons de chargement et d'enregistrement appropriés à la barre d'action (1275407).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 éléments abordés dans la série Nouveautés des outils pour les développeurs.