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

Améliorations apportées au panneau "Réseau"

Remplacer le contenu Web en local encore plus rapidement

La fonctionnalité Remplacements locaux est désormais simplifiée. Vous pouvez ainsi simuler facilement les en-têtes de réponse et le contenu Web des ressources distantes depuis le panneau Réseau sans y avoir accès.

Pour remplacer le contenu Web, ouvrez le panneau Réseau, effectuez un clic droit sur une requête, puis sélectionnez Remplacer le contenu.

Si vous avez configuré des remplacements locaux, mais que vous les avez désactivés, les outils de développement les activent. Si vous ne les avez pas encore configurés, les outils de développement vous y invitent dans la barre d'action en haut de l'écran. Sélectionnez un dossier dans lequel stocker les remplacements et autorisez les outils de développement à y accéder.

Une fois les remplacements configurés, les outils de développement vous redirigent vers Sources > Remplacements > Éditeur pour vous permettre de remplacer le contenu Web.

Notez que les ressources remplacées sont indiquées par dans le panneau Réseau. Pointez sur l'icône pour voir ce qui est remplacé.

Problèmes Chromium : 1465785, 1470532, 1469359.

Remplacer le contenu des requêtes XHR et Fetch

Vous pouvez désormais remplacer le contenu des requêtes XHR et Fetch, en plus de leurs en-têtes de réponse. Grâce à ces remplacements, vous pouvez simuler les réponses de l'API pour déboguer votre page Web, même si votre backend et votre API ne sont pas encore prêts.

Les outils de développement sont actuellement compatibles avec les remplacements de contenu pour les types de requêtes suivants : images (avif, png, par exemple), polices, fetch et XHR, scripts (css et js) et documents (html). Les outils de développement grisent désormais l'option Remplacer le contenu pour les types non compatibles.

Problèmes Chromium : 792101, 1469776.

Masquer les demandes d'extensions Chrome

Pour vous aider à vous concentrer sur le code que vous créez et à filtrer les requêtes non pertinentes envoyées par les extensions que vous avez peut-être installées dans Chrome, le panneau Réseau reçoit un nouveau filtre.

Pour filtrer toutes les requêtes envoyées aux URL chrome-extension://, cochez Masquer les URL des extensions.

Problèmes Chromium : 1257885, 1458803.

Codes d'état HTTP lisibles par l'homme

Le code d'état dans l'en-tête de la requête affiche désormais du texte lisible à côté des codes d'état HTTP, ce qui vous permet de comprendre plus rapidement ce qui s'est passé pour la requête.

Vous pouvez également pointer sur le code d'état dans le tableau des demandes pour afficher le même texte.

Problème Chromium : 1153956.

Mise en forme des réponses pour les sous-types JSON

L'onglet Réponse d'une requête avec un sous-type MIME application/[subtype]+json (par exemple, ld+json, hal+json, etc.) analyse désormais correctement la réponse et vous permet de la mettre en forme.

Problème Chromium : 406900.

Performances : consultez les modifications apportées à la priorité de récupération pour les événements réseau.

Le panneau Performances affiche désormais deux champs de priorité dans le Récapitulatif d'un événement de la piste Réseau : Priorité initiale et Priorité (finale), au lieu d'un seul champ Priorité. Grâce à ce champ supplémentaire, vous pouvez désormais voir si la priorité de récupération de l'événement change et ajuster l'ordre des téléchargements. Pour en savoir plus, consultez Optimiser le chargement des ressources avec l'API Fetch Priority.

Vous pouvez également trouver les mêmes informations dans la colonne Priorité du panneau Réseau, lorsque le paramètre Lignes de requête volumineuse est activé.

Problèmes Chromium : 1463901, 1380964.

Paramètres des sources activés par défaut : pliage du code et affichage automatique des fichiers

L'option Paramètres > Préférences > Pliage de code est désormais activée par défaut. Cette option vous permet de plier les blocs de code.

Pour plier un bloc de code, pointez sur le numéro de ligne à côté du début du bloc, puis cliquez sur l'icône de réduction . Cliquez sur {...} pour développer à nouveau le bloc.

De plus, l'option Paramètres > Préférences > Afficher automatiquement les fichiers dans la barre latérale est désormais également activée par défaut.

Ce paramètre permet à l'arborescence des fichiers sous Sources > Page de sélectionner le fichier actuellement ouvert dans l'Éditeur lorsque vous changez d'onglet.

Problèmes Chromium : 1459193, 1336599.

Amélioration du débogage des problèmes liés aux cookies tiers

Afin de contribuer à la création d'un Web plus respectueux de la confidentialité et en parallèle des mises à jour d'autres navigateurs, Chrome a lancé l'initiative Privacy Sandbox. Cette initiative améliore fondamentalement la confidentialité sur le Web et peut soutenir un Web sain financé par la publicité, de manière à rendre les cookies tiers obsolètes. La Privacy Sandbox prévoit un calendrier de suppression progressive pour vous permettre de vous adapter confortablement aux changements.

Vous pouvez déjà tester le comportement de Chrome après l'abandon des cookies tiers. Pour ce faire, exécutez Chrome à partir de la ligne de commande avec l'option --test-third-party-cookies-phaseout. Pour en savoir plus sur cette option, consultez Déboguer les cookies.

Quelle que soit la façon dont vous exécutez Chrome (avec ou sans le flag), la case à cocher Inclure les problèmes liés aux cookies tiers  de l'onglet Problèmes est désormais activée par défaut pour tous les nouveaux utilisateurs de Chrome. Par conséquent, les rapports :

• Un avertissement concernant une modification destructive liée à l'arrêt progressif.
• Problèmes liés aux cookies tiers.

Si vous êtes déjà un utilisateur de Chrome et que vous souhaitez voir des avertissements concernant la suppression progressive des cookies, veillez à cocher cette case.

Pour tester cela, inspectez les cookies sur cette page de démonstration.

De plus, le filtre Cookies de réponse bloqués  du panneau Réseau a été reformulé pour indiquer clairement qu'il n'affiche que les cookies de réponse bloqués.

Problèmes Chromium : 1458839, 1462693, 1466310.

Déboguer le préchargement dans le panneau "Application"

L'équipe Chrome rétablit le prérendu complet des futures pages auxquelles un utilisateur est susceptible d'accéder. Pour vous permettre de déboguer cela, les outils de développement ajoutent la section Préchargement au panneau Application. La nouvelle fonctionnalité de préchargement et de prérendu (appelée "préchargement de navigation") utilise l'API Speculation Rules au lieu des indications de ressources basées sur les liens.

Sur cette page de démonstration du prérendu, dans la section Application > Préchargement, vous pouvez inspecter les éléments suivants :

• Règles de spéculation, qui liste tous les ensembles de règles trouvés sur la page actuelle.
• Préchargements : liste de toutes les URL préchargées et prérendues à partir des ensembles de règles.
• Cette page, qui liste l'état de prérendu de la page actuelle.

Pour en savoir plus, consultez cet article dédié au débogage des règles de spéculation.

Problème Chromium : 1410709.

La nouvelle palette de couleurs

Vous avez peut-être déjà remarqué que l'interface des outils de développement a été repensée pour mieux s'aligner sur celle de Chrome. Le nouveau jeu de couleurs est l'un des facteurs qui y contribuent.

Cette version 117 apporte d'autres améliorations de l'expérience utilisateur aux outils de développement, déjà mentionnées et listées plus loin, y compris un certain nombre de textes d'interface utilisateur améliorés.

Problème Chromium : 1456677.

Lighthouse 10.4.0

Le panneau Lighthouse exécute désormais Lighthouse 10.4.0. Plus précisément, cette version ajoute de nouveaux audits d'accessibilité pour les éléments suivants :

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Exemple :

Consultez également la liste complète des modifications. 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.

L'extension de débogage WebAssembly C/C++ pour les outils de développement est désormais Open Source

L'extension de débogage C/C++ WebAssembly pour les outils de développement est désormais Open Source et se trouve dans le dépôt frontend des outils de développement. Cette extension permet de déboguer les programmes C++ compilés en WebAssembly dans les outils de développement. Pour en savoir plus, consultez Déboguer WebAssembly C/C++.

Découvrez comment créer, exécuter et tester l'extension, et n'hésitez pas à contribuer.

Problème Chromium : 1410709.

Autres points importants

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

• Emboîtement CSS : le panneau Éléments affiche désormais l'intégralité de la chaîne de sélecteurs pour les enfants imbriqués (1172985).
• Application > Manifest comporte désormais une section Window Controls Overlay (Superposition des contrôles de fenêtre) qui vérifie si une valeur display_override est présente dans le fichier manifeste et fournit des liens vers la documentation pertinente.
• L'arborescence Sources > Page effectue désormais les actions suivantes, y compris, mais sans s'y limiter (1442863) :
  • Grise les dossiers si tout leur contenu est ignoré.
  • Les dossiers sont affichés en orange si tout leur contenu provient d'une carte source.
• Performances : les paramètres de capture sont désormais automatiquement masqués lorsque vous démarrez l'enregistrement (1455498).
• Sources > Éditeur : le comportement de Ctrl+Flèche (Windows) et Opt+Flèche (macOS) a été restauré (1468208).
• Le bouton bascule Animations > Tout mettre en pause conserve désormais son état lors du chargement des pages (1446046).
• Application > Stockage > Stockage du cache déplacé vers Application > Stockage > Section "Cache" (1462622).
• Certains textes et info-bulles de l'UI ont été améliorés : info-bulle sur la concurrence matérielle, textes du filtre réseau et option du menu principal, majuscules dans la vue arborescente de l'application, textes Réseau > En-têtes, textes Sources > Remplacements et système de fichiers.

Nouvelles fonctionnalités expérimentales

Nouvelle émulation de rendu : prefers-reduced-transparency

Les utilisateurs de votre site Web peuvent commencer à activer la nouvelle fonctionnalité média expérimentale prefers-reduced-transparency CSS sur leurs appareils pour indiquer leur préférence pour la réduction des effets de transparence. Vous pouvez tenir compte de cette préférence pour améliorer l'accessibilité de votre site Web. Pour vous aider, l'onglet du tiroir Rendu peut désormais émuler le paramètre prefers-reduced-transparency: reduce. Vous pouvez ainsi prototyper une solution et tester le comportement de votre site Web dans ce cas.

Pour tester cette fonctionnalité dans Chrome, activez Fonctionnalités expérimentales de la plate-forme Web dans chrome://flags.

Problème Chromium : 1424879.

Moniteur de protocole amélioré

Les outils pour les développeurs Chrome utilisent le protocole Chrome DevTools (CDP) pour instrumenter, inspecter, déboguer et profiler les navigateurs Chrome. Si vous êtes un développeur Chromium ou DevTools, le moniteur de protocole vous permet d'afficher toutes les requêtes et réponses CDP effectuées par DevTools, et d'envoyer des commandes CDP.

L'outil de surveillance du protocole bénéficie d'une nouvelle interface qui vous permet de créer et d'envoyer plus facilement des commandes CDP. Vous n'avez plus besoin de rechercher les commandes et leurs paramètres dans la documentation. Les outils de développement vous les suggèrent.

En bas à droite de l'onglet du tiroir Protocol monitor (Surveillance du protocole), cliquez sur Show CDP command editor (Afficher l'éditeur de commandes CDP), sélectionnez une cible, commencez à saisir une commande, sélectionnez l'une des suggestions si nécessaire, spécifiez les valeurs des paramètres, puis cliquez sur Send command (Envoyer la commande) (Ctrl/Cmd + Entrée).

Problème Chromium : 1469345.

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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.