Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

Améliorations du panneau "Network"

Remplacer le contenu Web localement encore plus rapidement

La fonctionnalité Remplacements locaux est désormais simplifiée pour que vous puissiez facilement simuler les en-têtes de réponse et le contenu Web des ressources distantes à partir du 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.

Options de remplacement dans le menu déroulant d'une requête.

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, ils s'affichent 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.

Sélectionnez un dossier et autorisez l'accès à celui-ci dans la barre d'action située en haut.

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 remplacé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, 1469359

Remplacer le contenu de XHR et récupérer des requêtes

Vous pouvez désormais remplacer le contenu de XHR et récupérer des requêtes en plus de leurs en-têtes de réponse. Avec de tels remplacements, vous pouvez simuler les réponses de l'API pour déboguer votre page Web même si le backend et l'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 (par exemple, avif, png), polices, Fetch et XHR, scripts (css et js) et documents (html). Dans les outils de développement, l'option Remplacer le contenu est désormais grisée 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 la case Masquer les URL des extensions.

URL d'extension masquées dans le tableau des requêtes.

Problèmes Chromium: 1257885, 1458803.

Codes d'état HTTP lisibles par l'humain

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, ce qui vous permet de comprendre plus rapidement ce qui est arrivé à la requête.

Valeurs "avant" et "après" affichant les codes d'état HTTP dans un format lisible.

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

Problème Chromium: 1153956.

Impression élégante 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 la réponse correctement et vous permet de la peaufiner.

Analyse avant et après analyse d'un sous-type application/json dans l'aperçu d'une réponse réseau.

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écapitulatif d'un événement du canal Réseau: Priorité initiale et Priorité (finale) au lieu de la seule priorité. Grâce à ce champ supplémentaire, vous pouvez maintenant 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.

Avant et après l'affichage des modifications de la priorité d'extraction.

Vous pouvez également retrouver ces informations dans la colonne Priorité du panneau Network (Réseau), avec le paramètre Big request rows (Lignes de requête volumineuses).

Colonne "Priorité" du panneau "Network" (Réseau).

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 du code) est activée par défaut. Cette option vous permet de plier des blocs de code.

Pour replier un bloc de code, passez la souris sur le numéro de ligne situé à côté du début du bloc, puis cliquez sur l'icône de réduction . Cliquez sur {...} pour développer de 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.

Avec ce paramètre, l'arborescence de fichiers sous Sources > Page sélectionne le fichier actuel 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 à un Web plus respectueux de la confidentialité et parallèlement aux 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 propose un calendrier d'abandon progressif qui vous permet 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 savoir à quoi sert cet indicateur, consultez Déboguer les cookies.

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 une modification destructive à venir.
Problèmes liés aux cookies tiers.

Si vous êtes déjà utilisateur de Chrome et souhaitez voir des avertissements concernant les cookies concernant l'abandon à venir, assurez-vous de cocher cette case.

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

Problèmes liés aux cookies tiers signalés dans l'onglet "Problèmes".

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.

La case à cocher est activée et n'affiche que les requêtes dont les cookies de réponse ont été bloqués.

Problèmes Chromium: 1458839, 1462693, 1466310.

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

L'équipe Chrome relance le préchargement complet des futures pages susceptibles d'être consultées par les utilisateurs. Pour vous permettre de déboguer ce problème, les outils de développement ajoutent la section Préchargement au panneau Application. Les nouveaux processus de préchargement et de prérendu (collectivement appelés "préchargement de la navigation") utilisent l'API Speculation Rules au lieu des suggestions de ressources basées sur des liens.

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

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

Pour en savoir plus, consultez l'article consacré au débogage des règles de spéculation.

Problème Chromium: 1410709.

La nouvelle palette de couleurs

Comme vous l'avez peut-être déjà remarqué, les outils de développement ont un nouveau look qui correspond mieux à Chrome. L'un des facteurs déterminants est le nouveau jeu de couleurs.

Avant et après l'application de nouvelles couleurs.

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 en détail, y compris un certain nombre d'améliorations du texte de l'interface utilisateur.

Problème Chromium: 1456677.

Lighthouse 10.4.0

Le panneau Lighthouse exécute désormais Lighthouse 10.4.0. Cette version comprend notamment de nouveaux audits d'accessibilité pour les éléments suivants:

Exemple :

Échec de la vérification de la couleur des liens, qui les rend impossibles à distinguer.

Consultez également la liste complète des modifications. Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du 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 WebAssembly C/C++ pour les outils de développement est désormais Open Source et se trouve dans le dépôt de l'interface DevTools. Cette extension active les fonctionnalités de débogage dans les outils de développement pour les programmes C++ compilés dans WebAssembly. Pour en savoir plus, consultez Déboguer WebAssembly en C/C++.

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

Problème Chromium: 1410709.

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

Imbriquer les CSS: le panneau Éléments affiche désormais l'ensemble de la chaîne de sélecteur pour les enfants imbriqués (1172985).
Application > Manifeste dispose désormais d'une section Superposition des commandes 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 opérations suivantes, y compris, mais sans s'y limiter (1442863) :
- Les dossiers sont grisés si tout leur contenu figure sur 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 sont désormais masqués 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)
Déplacement de Application > Stockage > Espace de stockage du cache vers Application > Stockage > Section Cache (1462622).
Certaines info-bulles et certains textes de l'interface utilisateur ont été améliorés: info-bulle sur la simultanéité matérielle, Texte du filtre réseau et option de menu principal, majuscules dans l'arborescence de l'application, Réseau > Texte des en-têtes, Sources > Remplacements et Textes du 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é 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 un développeur Chromium ou d'outils de développement, l'outil Moniteur de protocole vous permet d'afficher toutes les requêtes et réponses CDP effectuées par les outils de développement, et d'envoyer des commandes CDP.

Le moniteur de protocole dispose d'une nouvelle interface qui vous permet de créer et d'envoyer des commandes CDP plus facilement. 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.

Dans l'angle inférieur droit de l'onglet du panneau Moniteur de protocole, cliquez sur Afficher l'éditeur de commandes CDP, sélectionnez une cible, commencez à saisir une commande, sélectionnez l'une des suggestions proposées (si nécessaire), spécifiez les valeurs de paramètre, puis cliquez sur Envoyer la commande (Ctrl/Cmd+Entrée).

Spécifier et envoyer une commande CDP

Problème Chromium: 1469345.

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.