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

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

Remplacer le contenu Web localement 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 depuis le 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, les outils de développement vous redirigent vers Sources > Remplacements > Éditeur pour vous permettre de remplacer 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 a été remplacé.

Problèmes Chromium: 1465785, 1470532 et 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, récupération et XHR, scripts (CSS et JS) et documents (HTML). DevTools grisera désormais l'option Ignorer le contenu pour les types non compatibles.

Problèmes Chromium: 792101, 1469776.

Masquer les demandes 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 des extensions que vous avez installées dans Chrome, un nouveau filtre est appliqué au panneau Réseau.

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 afin que vous puissiez 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: consultez les modifications de la priorité d'extraction des é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 la section 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, avec le paramètre Grandes lignes de requête activé.

Problèmes Chromium: 1463901, 1380964.

Paramètres des sources activés par défaut: pliage de 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 Paramètres > Préférences > Afficher automatiquement les fichiers dans la barre latérale est désormais 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 permet de garantir un Web sain, financé par la publicité, tout en rendant obsolètes les cookies tiers. 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 indicateur), la case à cocher Inclure les problèmes liés aux cookies tiers est désormais cochée par défaut pour tous les nouveaux utilisateurs de Chrome dans l'onglet Problèmes. Par conséquent, elle génère les rapports suivants:

• 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 dans le 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 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, les outils de développement ajoutent 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 les éléments suivants:

• 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 DevTools est désormais Open Source et se trouve dans le dépôt de la partie frontale de DevTools. 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 correctifs et améliorations importants dans 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.
  • Colore les dossiers en orange si tout 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 restauré le comportement Ctrl+Flèche (Windows) et Opt+Flèche (MacO) (1468208).
• Le bouton Animations > Pause all (Tout mettre en pause) conserve désormais son état pour tous les 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 fonctionnalité expérimentale CSS prefers-reduced-transparency sur leur appareil pour indiquer qu'ils préfèrent réduire les effets de transparence. Vous pouvez envisager de tenir compte de cette préférence pour améliorer l'accessibilité de votre site Web. Pour vous aider, l'onglet du panneau 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 les fonctionnalités expérimentales de la plate-forme Web dans chrome://flags.

Problème Chromium: 1424879.

Surveillance de protocole améliorée

Les outils pour les développeurs Chrome utilisent le CDP (Chrome DevTools Protocol) 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 plates-formes 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.
• Tweetez à l'adresse @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.