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

Sofia Emelianova
Sofia Emelianova

La collection officielle des extensions de l'Enregistreur est disponible

La collection officielle des extensions Enregistreur d'exportation et de 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 de l'Enregistreur.

Améliorations du réseau

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

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

La colonne État indique désormais toujours une raison d'échec. Auparavant, vous deviez activer la Lignes de requêtes volumineuses ou sélectionner la requête dans le tableau.

État avant et après l'affichage du motif de l'échec dans la colonne "État".

Problèmes Chromium: 1506760.

Amélioration du sous-menu "Copier"

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 commande appropriée dans le presse-papiers sous Windows.

Problèmes Chromium: 1267033, 1276452 et 798498.

Amélioration des performances

Cette version apporte plusieurs améliorations au panneau Performances.

Fil d'Ariane dans Vos trajets

La chronologie en haut du panneau Performances vous permet désormais de définir des repères 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 fils d'Ariane imbriqués à la suite. Pour passer d'un niveau de zoom à un autre, cliquez sur le fil d'Ariane correspondant dans la chaîne au-dessus de la timeline. Regardez la vidéo suivante pour voir comment les éléments de navigation fonctionnent.

Problèmes Chromium: 1467739.

Déclencheurs d'événements dans la piste principale

Le canal Performances > Principal affiche désormais par défaut des flèches reliant les initiateurs et les événements suivants qu'ils ont provoqués.

  • Invalidation du style ou de la mise en page -> Recalculer les styles ou Mise en page
  • Request Animation Frame -> Animation Frame Fired
  • Request Idle Callback (Demander un rappel à la prochaine période d'inactivité) -> Fire Idle Callback (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 le WebSocket

Pour afficher les flèches, recherchez un tel événement dans la trace, puis cliquez dessus. Auparavant, cette fonctionnalité était un test.

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

Problèmes Chromium: 1434596.

Menu de sélection des instances 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'action. Une fonctionnalité similaire était disponible dans le Profiler JavaScript, qui sera bientôt abandonné.

Avant et après l'ajout d'un 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 se souvient désormais du 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.

La fonctionnalité de prévisualisation avant et après la modification est compatible avec les pseudo-éléments de transition de vue.

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 grid et flex.

La compatibilité avec align-content avant et après est disponible dans les conteneurs de bloc.

Problèmes Chromium: 1500511.

Nouveau raccourci et nouvelle commande dans "Sources"

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

Le menu des commandes reçoit la nouvelle commande Afficher le fichier actif dans la barre latérale du navigateur, qui fonctionne de la même manière 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 des positions 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 position continue fait référence à une position "plate", et la position pliée forme un angle entre les sections de l'écran.

Menu déroulant avec des options de posture.

De plus, la liste Devices (Appareils) inclut un nouvel appareil pliable émulé: l'Asus Zenbook Fold.

Problème Chromium: 1066842.

Thématisation dynamique

Les outils pour les développeurs s'adaptent 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 sur l'abandon 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é d'eux.

Dans Network (Réseau), recherchez une requête associée à une icône d', cliquez dessus, puis ouvrez l'onglet Cookies (Cookies).

Captures 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 surbrillance 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 toujours des cookies tiers.

Audit qui détecte les cookies tiers.

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.

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 la saisie dans Réseau > Filtre est désormais accessible au focus.
  • L'arborescence des fichiers dans Sources > Page s'affiche désormais correctement en mode Contraste élevé.
  • Les lecteurs d'écran énoncent désormais correctement les éléments suivants :
    • État des cases à cocher dans Sources > Points d'arrêt.
    • Informations sur la position et l'index d'une liste de suggestions.
    • Résultat de l'action lorsque vous ajoutez ou supprimez un établissement dans Paramètres > Établissements.
    • Groupes de règles d'exclusion (générales ou personnalisées) dans Paramètres > Liste d'ignorer.

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

Autres points forts

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

  • Animations :
    • Correction du bug lié à l'affichage du pop-up de capture d'écran en dehors des limites (1506991).
    • Correction du bug lié aux nœuds d'animation supprimés qui n'étaient pas marqués comme tels (1506561).
  • Réseau :
    • Forcer des en-têtes: correction d'un bug lié à une fausse icône de point violet dans l'onglet En-têtes (1507856).
    • Preview: Correction d'un bug lié à un double décodage inutile (1509336).
    • Correction d'un bug qui empêchait les requêtes de Shorts d'apparaître (1509862).
  • Application > IndexedDB: réorganisation des boutons dans la barre d'action pour assurer la cohérence avec les autres panneaux (1393800).
  • Capteurs: correction d'un bug lié à un rappel incorrect de succès pour une position indisponible (1486859).
  • Performances :
    • L'icône du bouton Collect garbage (Collecter les déchets) est désormais appropriée (une serpillère au lieu d'une poubelle) (1507530).
    • La trace des performances conserve désormais les données lorsque vous accédez à about:blank (1509947).

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 plate-forme 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.

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.