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

Nouveautés des outils de développement, Chrome 127

Sofia Emelianova

Inspecter le positionnement de l'ancrage CSS dans le panneau "Éléments"

Pour vous aider à déboguer plus facilement la fonctionnalité de positionnement des ancres, l'onglet Styles associe désormais des identifiants d'ancrage explicites et des ancres implicites à leurs nœuds.

Association des ancres explicites et implicites avant/après.

De plus, la valeur de l'attribut popovertarget est désormais associée à son élément popover dans le DOM.

Avant et après avoir associé la cible contextuelle à l'élément de fenêtre pop-up

Problème Chromium: 289900232, 330306231.

Améliorations apportées au panneau "Sources"

Cette version apporte plusieurs améliorations au panneau Sources.

Amélioration "Ne jamais mettre en pause ici"

L'option "Ne jamais mettre en veille ici" vous permet d'empêcher le débogueur de s'interrompre sans cesse sur la même ligne. Il est ainsi plus facile de travailler avec des points d'arrêt non pertinents qui se déclenchent de façon répétée. Cette version améliore cette fonctionnalité et fonctionne désormais pour:

Exceptions ou promesses de refus des fonctions intégrées.
Points d'arrêt "Canceling" (Annulation) des DOM, des extractions/XHR et des violations CSP.
Lors du démontage de Wasm.

Découvrez le workflow en action:

Problème Chromium: 40924349.

Nouveaux écouteurs d'événements d'ancrage du défilement

La liste Sources > Points d'arrêt de l'écouteur d'événements > Commande dispose de deux écouteurs liés à scroll-snap: scrollsnapchange et scrollsnapchanging. Ces événements se déclenchent lorsque vous faites défiler le conteneur de défilement d'une manière qui entraîne son alignement sur un nouvel élément.

Avant et après l'ajout d'écouteurs d'événements liés à l'interaction avec le défilement.

Problème Chromium: 40286359.

Améliorations du panneau "Network"

Cette version apporte plusieurs améliorations au panneau Network (Réseau).

Mise à jour des préréglages de limitation de la bande passante réseau

Le panneau Network (Réseau) présente de nouveaux préréglages de limitation: les nouveaux paramètres Fast 4G (4G rapide) et Fast 3G (3G rapide) ont été renommés Slow 4G et Slow 3G par 3G. Cela correspond mieux aux préréglages de Lighthouse.

Préréglages de limitation de bande passante avant et après mise à jour.

Problème Chromium: 342406608.

Informations sur le service worker dans les champs personnalisés au format HAR

Lorsque vous exportez le journal réseau au format HAR, vous pouvez désormais voir les informations sur les service workers, y compris les codes temporels, sous forme de champs personnalisés (préfixés par des traits de soulignement). Par exemple, vous pouvez trouver les nouveaux champs suivants dans le journal:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Problème Chromium: 342406608.

Envoyer et recevoir des événements WebSocket dans le panneau "Performances"

Comme pour les autres événements WebSocket, le panneau Performance capture désormais les événements Send WebSocket Message (Envoyer un message WebSocket) et Receive WebSocket Message (Recevoir un message WebSocket) et les affiche dans la trace des performances. Exemple :

Événement "Recevoir un message WebSocket" capturé dans la trace des performances.

Problème Chromium: 40286129.

Points importants divers

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

Accessibilité: les lecteurs d'écran annoncent désormais le contenu des messages dans la console lorsqu'ils font défiler le journal à l'aide des flèches vers le haut et vers le bas (344484979).
Sources:
- Page: l'option de menu Save as (Enregistrer sous) enregistre désormais les fichiers du module Wasm en tant que binaires Wasm valides au lieu de texte en base64 (40784130).
- Pile d'appel: suppression du suffixe (async) dans les descriptions de frame d'appel asynchrone et mise en gras de la mise en surbrillance (343750870) au lieu d'italique.
Mémoire: suppression de l'InternalNodes inutile de taille nulle dans le résumé des instantanés de segments de mémoire (340200025).
Réseau: correction d'un bug qui empêchait l'aperçu du streaming du contenu des réponses pour les requêtes qui venaient de démarrer sans recevoir d'événement responseReceived (338340752).
Performances :
- Statistiques du sélecteur: ajout d'une info-bulle explicative pour la colonne %-of-Slow-Path-Non-Matches (324282954).
- Mode de configuration du canal: le bouton Terminer la configuration des canaux a été déplacé en bas à droite (345256274).
Console: correction d'un bug qui affichait plusieurs messages identiques dans la console lors de la navigation à l'aide du cache amélioré (40894153).
Paramètres: ajout d'icônes d'assistance à côté de tous les onglets (330213867).

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.