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

Améliorations apportées au panneau "Network" (Réseau)

Remplacer le contenu Web en local encore plus rapidement

La fonctionnalité de forcement local est désormais simplifiée. Vous pouvez ainsi facilement simuler les en-têtes de réponse et le contenu Web des ressources distantes à partir du panneau Network (Réseau) sans y avoir accès.

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

Si vous avez configuré des forçages locaux, mais que vous les avez désactivés, DevTools les active. Si vous ne l'avez pas encore fait, DevTools vous invite à le faire dans la barre d'action en haut de l'écran. Sélectionnez un dossier dans lequel stocker les forçages et autorisez DevTools à y accéder.

Une fois les forçages configurés, DevTools vous redirige vers Sources > Forcements > Éditeur pour vous permettre de forcer le contenu Web.

Notez que les ressources écrasées sont indiquées par dans le panneau Network (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 de récupération

Vous pouvez désormais remplacer le contenu des requêtes XHR et de récupération en plus de leurs en-têtes de réponse. Grâce à ces forçages, 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.

DevTools est actuellement compatible avec les forçages de contenu pour les types de requêtes suivants: images (par exemple, avif, png), polices, requêtes "fetch" et XHR, scripts (CSS et JS) et documents (HTML). DevTools grisera désormais l'option Forcer le contenu pour les types non compatibles.

Problèmes Chromium: 792101, 1469776.

Masquer les requêtes d'extension 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 Network (Réseau) bénéficie d'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 de l'en-tête de la requête affiche désormais un texte lisible à côté des codes d'état HTTP. Vous pouvez ainsi déterminer plus rapidement ce qui s'est passé avec la requête.

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

Problème Chromium: 1153956.

Formater les 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 et d'autres) analyse désormais correctement la réponse et vous permet de l'embellir.

Problème Chromium: 406900.

Performances: voir 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ésumé d'un événement dans le canal 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 modifier l'ordre des téléchargements. Pour en savoir plus, consultez Optimiser le chargement des ressources avec l'API Fetch Priority.

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

Problèmes Chromium: 1463901, 1380964.

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

L'option Settings > Preferences > Code folding (Paramètres > Préférences > Pliage de code) est désormais activée par défaut. Cette option vous permet de replier des blocs de code.

Pour replier 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 Settings > Preferences > Automatically reveal files in the sidebar (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 dans 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

Pour contribuer à créer 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 renforce fondamentalement la confidentialité sur le Web et peut assurer un Web sain et financé par la publicité qui rendra les cookies tiers obsolètes. La Privacy Sandbox prévoit une phase d'abandon progressive pour vous permettre de vous adapter facilement 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 la section Déployer des cookies de débogage.

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

• Avertissement concernant l'abandon à venir
• Problèmes liés aux cookies tiers

Si vous souhaitez voir des avertissements concernant l'abandon prochain des cookies en tant qu'utilisateur Chrome, cochez 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 Network (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 et 1466310.

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

L'équipe Chrome ramène le préchargement complet des pages futures auxquelles un utilisateur est susceptible d'accéder. Pour vous permettre de déboguer ce problème, DevTools ajoute la section Préchargement au panneau Application. Le nouveau préchargement et prérendu (collectivement appelés "préchargement de navigation") utilise l'API Speculation Rules plutôt que les indices de ressources basés sur des liens.

Sur cette page de démonstration, dans la section Application > Préchargement, vous pouvez inspecter:

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

Pour en savoir plus, consultez le post dédié sur le 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 les outils pour les développeurs ont désormais une interface plus moderne, qui s'harmonise mieux avec Chrome. Le nouveau jeu de couleurs en est un facteur.

Cette version (117) apporte d'autres améliorations de l'expérience utilisateur dans DevTools, déjà mentionnées et listées ci-dessous, 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 particulièrement, 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 principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 772558.

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

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

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

Problème Chromium: 1410709.

Autres points forts

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

• Encapsulation CSS: le panneau Éléments affiche désormais l'ensemble de la chaîne de sélecteurs pour les enfants imbriqués (1172985).
• La section Overlay de commandes de fenêtre est désormais disponible dans Application > Fichier manifeste. Elle 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 permet désormais d'effectuer les opérations suivantes, y compris, mais sans s'y limiter (1442863) :
  • Les dossiers sont grisés si l'intégralité de leur contenu figure dans la liste des éléments à ignorer.
  • Colorie les dossiers en orange si l'intégralité de leur contenu provient d'une carte source.
• Performances: les paramètres de capture se cachent désormais automatiquement lorsque vous démarrez l'enregistrement (1455498).
• Sources > Éditeur a rétabli le comportement Ctrl + Flèche (Windows) et Opt + Flèche (macOS) (1468208).
• Le bouton bascule Animations > Tout mettre en pause conserve désormais son état lors des chargements de page (1446046).
• Application > Stockage > Espace de stockage du cache déplacé vers Application > Stockage > Section "Cache" (1462622).
• Certains textes et info-bulles de l'interface utilisateur ont été améliorés: Info-bulle de la simultanéité matérielle, Textes du filtre réseau et d'une option de menu principal, majuscules dans la vue arborescente de l'application, Textes de "Network > Headers" (Réseau > En-têtes), Textes de "Sources > Overrides" (Sources > Forcer) et de "Filesystem" (Fichiers système).

Nouvelles fonctionnalités expérimentales

Nouvelle émulation de rendu: prefers-reduced-transparency

Les utilisateurs de votre site Web peuvent commencer à activer la nouvelle fonction multimédia CSS prefers-reduced-transparency expérimentale sur leurs appareils pour indiquer leur préférence pour réduire les effets transparents. Vous pouvez tenir compte de cette préférence pour améliorer l'accessibilité de votre site Web. Pour vous aider, l'onglet du panneau Rendering (Affichage) peut désormais émuler le paramètre prefers-reduced-transparency: reduce. Vous pouvez ainsi créer un prototype de solution et tester le comportement de votre site Web dans ce cas.

Pour tester cette fonctionnalité dans Chrome, activez les 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 développeur Chromium ou DevTools, le surveillant de protocole vous permet d'afficher toutes les requêtes et réponses CDP effectuées par DevTools, et d'envoyer des commandes CDP.

Le surveillant de 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. DevTools vous les suggère.

En bas à droite de l'onglet du panneau Surveillance des protocoles, cliquez sur  Afficher l'éditeur de commande CDP, sélectionnez une cible, commencez à saisir une commande, sélectionnez l'une des suggestions, le cas échéant, spécifiez les valeurs des paramètres, puis cliquez sur  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 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.