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

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

Sofia Emelianova

Améliorations apportées au panneau "Network"

Remplacer le contenu Web localement encore plus rapidement

La fonctionnalité de remplacement local est désormais simplifiée : vous pouvez facilement simuler des en-têtes de réponse et du contenu Web de ressources distantes depuis le panneau Network, sans y accéder.

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

Options de remplacement dans le menu déroulant d'une demande.

Si des forçages locaux sont configurés, mais 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 invitent à les afficher dans la barre d'action en haut de la page. Sélectionnez le dossier dans lequel stocker les forçages 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 en haut de l'écran.

Une fois les forçages configurés, les outils de développement vous permettent d'accéder à Sources > Remplacements > Éditeur pour 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 est remplacé.

Problèmes Chromium: 1465785, 1470532, 1469359.

Ignorer le contenu des requêtes XHR et de récupération

Vous pouvez désormais ignorer le contenu des requêtes XHR et fetch en plus de leurs en-têtes de réponse. Avec 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.

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 demandes non pertinentes envoyées par des extensions que vous avez peut-être installées dans Chrome, le panneau Réseau dispose d'un nouveau filtre.

Pour filtrer toutes les requêtes envoyées aux URL chrome-extension://, cochez la case Masquer les URL d'extension.

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. Vous pouvez ainsi déterminer plus rapidement ce qui est arrivé à la requête.

L'avant et l'après affichage des codes d'état HTTP lisibles par l'humain.

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

Problème Chromium: 1153956.

Mettre en forme les réponses pour les sous-types JSON

L'onglet Response (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 simuler.

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

Problème Chromium: 406900.

Performances: consulter les changements de 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 du canal Réseau: Priorité initiale et Priorité (finale), au lieu de simplement afficher la seule Priorité. Ce champ supplémentaire vous permet désormais de voir si la priorité d'extraction de l'événement change et d'ajuster 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 apportées à la priorité de récupération.

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

Colonne "Priorité" du panneau "Réseau"

Problèmes Chromium: 1463901, 1380964.

Paramètres des sources activés par défaut: pliage 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 plier des blocs de code.

Pour plier un bloc de code, pointez 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 à 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.

Avec ce paramètre, l'arborescence de fichiers dans Sources > Page sélectionne le fichier actuel 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 rendre le 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 peut assurer un Web sain et financé par la publicité, de sorte que les cookies tiers deviennent obsolètes. La Privacy Sandbox applique un calendrier progressif 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 savoir à quoi sert cet indicateur, consultez Déboguer les cookies.

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

Un avertissement de modification destructive concernant la prochaine suppression.
Problèmes liés aux cookies tiers.

Si vous souhaitez recevoir des avertissements concernant les cookies concernant l'abandon prochain de Chrome en tant qu'utilisateur existant de Chrome, assurez-vous de cocher cette case.

Pour vérifier que cela fonctionne, examinez 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 du 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 réactive le prérendu complet des futures pages auxquelles les utilisateurs sont susceptibles d'accéder. Pour vous permettre de déboguer ce problème, DevTools ajoute la section Preloading au panneau Application. Les nouvelles fonctionnalités de préchargement et de prérendu (désignées collectivement par le terme "préchargement de la navigation") utilisent l'API Speculation Rules plutôt que les suggestions de ressources basées sur des liens.

Sur cette page de démonstration, dans la section Application > Préchargement, vous pouvez vérifier les éléments suivants:

Règles de spéculation : liste de tous les jeux de règles trouvés sur la page active.
Préchargements qui répertorie toutes les URL préchargées et prérendues des jeux de règles.
Cette page 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.

Nouveaux coloris

Comme vous l'avez peut-être déjà remarqué, l'interface des outils de développement a été repensée pour mieux correspondre à celle de Chrome. L'un des facteurs déterminants est le nouveau jeu de couleurs.

L'avant et après l'application de nouvelles couleurs.

Cette version (117) apporte plus d'améliorations à l'expérience utilisateur dans les outils de développement, déjà mentionnées et listées plus en détail, 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 la version 10.4.0. Cette version ajoute notamment de nouveaux audits d'accessibilité pour les éléments suivants:

Exemple :

Échec de la vérification de la couleur des liens, ce 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 C/C++ WebAssembly 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 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 C/C++ WebAssembly.

Découvrez comment créer, exécuter et tester l'extension. N'hésitez pas à apporter votre contribution.

Problème Chromium: 1410709.

Points forts divers

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

Imbrication CSS: le panneau Éléments affiche désormais l'intégralité de la chaîne de sélecteur pour les éléments enfants imbriqués (1172985).
Application > Manifest (Application > Fichier manifeste) dispose désormais d'une section Window Controls Overlay (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) :
- Cette option permet de griser les dossiers si tout 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 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 (MacOs) (1468208).
L'option Animations > Pause all (Tout mettre en pause) conserve désormais son état lors des chargements de page. (1446046)
Application > Stockage > Stockage du cache déplacé vers la section Application > Stockage > Cache (1462622).
Certains textes et info-bulles de l'interface utilisateur ont été améliorés: Info-bulle sur la simultanéité matérielle, Texte de filtre réseau et option de menu principal, utilisation appropriée des majuscules dans l'arborescence de l'application, Réseau > Textes d'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 multimédia CSS prefers-reduced-transparency sur leurs appareils afin d'indiquer qu'ils préfèrent réduire les effets de transparence. Pensez à 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.

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 demandes et réponses CDP émises par les outils de développement, et d'envoyer des commandes CDP.

Le moniteur de protocole bénéficie d'une nouvelle interface qui vous permet de créer et d'envoyer des commandes CDP plus facilement. Désormais, 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 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, indiquez les valeurs de paramètre si nécessaire, 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

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.