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

Sofia Emelianova
Sofia Emelianova
GitHub

La collection officielle d'extensions de l'Enregistreur est disponible

La collection officielle d'extensions de l'Enregistreur pour l'exportation et la relecture est désormais disponible.

Pour ouvrir la collection directement depuis l'enregistreur, sélectionnez Exporter > Obtenir des extensions… dans la barre d'action en haut du panneau Enregistreur.

Améliorations du réseau

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

Motif de l'échec dans la colonne "État"

La colonne État affiche désormais toujours le motif d'un échec. Auparavant, vous deviez cocher Lignes de grandes requêtes ou sélectionner la requête dans le tableau.

Avant et après : le motif de l'échec s'affiche dans la colonne "État".

Problèmes Chromium : 1506760.

Sous-menu "Copier" amélioré

Le sous-menu Copier d'une demande est désormais mieux organisé.

Avant et après l'amélioration du sous-menu "Copier".

De plus, l'option Copier en tant que cURL copie désormais la bonne commande dans le presse-papiers sous Windows.

Problèmes Chromium : 1267033, 1276452, 798498.

Amélioration des performances

Cette version apporte plusieurs améliorations au panneau Performances.

Fil d'Ariane dans la timeline

La chronologie en haut du panneau Performances vous permet désormais de définir des breadcrumbs et de passer de l'un à l'autre.

Pour définir un fil d'Ariane, sélectionnez une plage dans la timeline, pointez dessus, puis cliquez sur le bouton N ms . Vous pouvez créer plusieurs breadcrumbs imbriqués les uns à la suite des autres. Pour passer d'un niveau de zoom à un autre, cliquez sur le breadcrumb correspondant dans la chaîne en haut de la timeline. Regardez la vidéo suivante pour voir les breadcrumbs en action.

Problèmes Chromium : 1467739.

Initiateurs d'événements dans la piste principale

La piste Performances > Principale affiche désormais par défaut des flèches reliant les initiateurs et les événements qu'ils ont déclenchés.

  • Invalidation du style ou de la mise en page : Recalculer les styles ou Mise en page
  • Frame d'animation demandé > Frame d'animation déclenché
  • Demander un rappel à la prochaine période d'inactivité → Déclencher le rappel à la prochaine période d'inactivité
  • Installer un minuteur > Minuteur déclenché
  • Créer un WebSocket > Envoyer… et Recevoir le handshake WebSocket ou Détruire WebSocket

Pour afficher les flèches, recherchez un événement de ce type dans la trace et cliquez dessus. Cette fonctionnalité était auparavant expérimentale.

Flèche entre la requête et le déclenchement d'un rappel d'inactivité.

Problèmes Chromium : 1434596.

Menu du sélecteur d'instance de VM JavaScript pour les outils de développement Node.js

Dans le panneau Performances des outils de développement Node.js, vous pouvez désormais sélectionner une instance de VM JavaScript dans le menu déroulant correspondant de la barre d'actions. Une fonctionnalité similaire était disponible dans le profiler JavaScript, qui sera bientôt obsolète.

Avant et après l'ajout d'un nouveau menu permettant de sélectionner une instance de VM JavaScript.

Problèmes Chromium : 1511813.

Améliorations des éléments

Cette version apporte plusieurs améliorations au panneau Éléments.

En plus des deux fonctionnalités suivantes, le panneau Éléments mémorise désormais le dernier onglet que vous avez ouvert, par exemple Calculé ou Propriétés.

Le pseudo-élément ::view-transition est désormais modifiable dans "Styles"

Vous pouvez désormais modifier les pseudo-éléments CSS ::view-transition dans Styles à l'aide de la feuille de style de l'inspecteur.

Prise en charge des pseudo-éléments de transition de vue avant et après modification.

Pour en savoir plus, consultez Transitions fluides et simples avec l'API View Transitions.

Problèmes Chromium : 1511233.

Compatibilité de la propriété align-content avec les conteneurs de blocs

La propriété align-content fonctionne désormais avec tous les conteneurs de blocs, y compris table-caption et table-cell. Auparavant, il ne fonctionnait qu'avec les grilles et les flexbox.

La prise en charge de l'alignement du contenu avant et après dans les conteneurs de blocs.

Problèmes Chromium : 1500511.

Nouveau raccourci et nouvelle commande dans Sources

Vous pouvez désormais appuyer sur Cmd (Mac) ou Ctrl (Win) + Maj et cliquer sur un numéro de ligne dans Sources pour créer un point de journalisation. Ce raccourci s'ajoute au raccourci Cmd (Mac) / Ctrl (Windows) + clic déjà existant pour les points d'arrêt conditionnels.

Le menu de commandes reçoit la nouvelle commande Afficher le fichier actif dans la barre latérale du navigateur, qui fait la même chose que l'option correspondante dans le menu déroulant de l'éditeur.

Nouvelle commande permettant d'afficher le fichier actif dans la barre latérale du navigateur.

Problèmes Chromium : 1486933, 1467464.

Prise en charge de la position pour les appareils pliables émulés

Le mode Appareil vous permet désormais de définir la position d'un appareil pliable émulé : Continu ou Plié. La posture continue fait référence à une position "à plat", tandis que la posture pliée forme un angle entre les sections de l'écran.

Menu déroulant avec les options de posture.

De plus, la liste Appareils contient désormais un nouvel appareil pliable émulé : l'Asus Zenbook Fold.

Problème Chromium : 1066842.

Thèmes dynamiques

Les outils de développement correspondent désormais automatiquement au thème de couleurs de Chrome. Pour définir un thème :

  1. Ouvrez un nouvel onglet, puis cliquez sur Personnaliser Chrome en bas à droite.
  2. Dans "Apparence", choisissez un thème via Changer de thème ou sélectionnez une palette de couleurs.

Les outils pour les développeurs correspondent au thème de couleur sélectionné dans "Apparence".

Problèmes Chromium : 1483276.

Avertissements concernant la suppression progressive des cookies tiers dans les panneaux "Réseau" et "Application"

Les panneaux Réseau et Application mettent désormais en évidence les cookies concernés par les restrictions tierces de la protection contre le suivi et affichent des avertissements à côté.

Dans Réseau, recherchez une requête avec une icône d', cliquez dessus, puis ouvrez l'onglet Cookies.

Avant et après la capture des cookies tiers dans le panneau "Réseau".

Dans Application, accédez à Stockage > Cookies, puis cliquez sur un domaine. Les cookies surlignés en jaune ne sont pas stockés dans le navigateur.

Avant et après la mise en évidence des cookies tiers dans le panneau "Application".

Pointez sur l'icône d'avertissement pour afficher une info-bulle décrivant les problèmes, puis cliquez sur l'icône pour ouvrir l'onglet Problèmes et obtenir plus d'informations.

De plus, les cookies du tableau sont désormais triés par nom par défaut.

Problèmes Chromium : 1506225, 1503961.

Lighthouse 11.4.0

Le panneau Lighthouse exécute désormais Lighthouse 11.4.0. Consultez la liste complète des modifications. Parmi les changements notables, citons le nouvel audit qui vous permet de détecter si votre site Web utilise encore des cookies tiers.

Audit qui détecte les cookies tiers.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 772558.

Accessibilité

Cette version présente les améliorations d'accessibilité suivantes :

  • Lorsque vous ouvrez Paramètres > Tests, la zone de recherche est désormais automatiquement sélectionnée.
  • Le bouton Effacer l'entrée dans Réseau > Filtre est désormais sélectionnable.
  • L'arborescence des fichiers dans Sources > Page s'affiche désormais correctement en mode Contraste élevé.
  • Les lecteurs d'écran annoncent désormais correctement les éléments suivants :
    • État des cases à cocher dans Sources > Points d'arrêt.
    • Informations sur la position et l'index pour une liste de suggestions.
    • Résultat de l'action lors de l'ajout ou de la suppression d'un lieu dans Paramètres > Lieux.
    • Groupes de règles d'exclusion (générales ou personnalisées) dans Paramètres > Liste des éléments à ignorer.

Problèmes Chromium : 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Autres points importants

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

  • Animations :
    • Correction du bug lié au rendu du pop-up de capture d'écran hors limites (1506991).
    • Correction du bug qui empêchait de marquer comme supprimés les nœuds d'animation supprimés (1506561).
  • Réseau :
    • Remplacements d'en-tête : correction d'un bug avec une fausse icône en forme de point violet dans l'onglet En-têtes (1507856).
    • Aperçu : correction d'un bug lié à un double décodage inutile (1509336).
    • Correction d'un bug qui empêchait l'affichage des demandes de Shorts (1509862).
  • Application > IndexedDB : réorganisation des boutons de la barre d'action pour assurer la cohérence avec les autres panneaux (1393800).
  • Capteurs : correction d'un bug lié à un rappel de réussite incorrect pour une position indisponible (1486859).
  • Performances :
    • Le bouton Collecter les déchets est désormais associé à l'icône appropriée, à savoir une serpillière au lieu d'une poubelle (1507530).
    • La trace des performances conserve désormais les données lors de l'accès à about:blank (1509947).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.