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 requête est désormais mieux organisé.

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

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

Problèmes Chromium: 1267033, 1276452 et 798498.

Amélioration des performances

Cette version apporte un certain nombre d'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 fonctionnent les breadcrumbs.

Problèmes Chromium: 1467739.

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

Par défaut, la piste Performances > Principale affiche désormais des flèches reliant les lanceurs et les événements qu'ils ont causés.

  • Invalidation de style ou de 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 voir les flèches, recherchez un événement de ce type dans la trace et cliquez dessus. Auparavant, cette fonctionnalité était en phase de test.

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

Problèmes Chromium: 1434596.

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

Dans le panneau Performance 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 Profileur JavaScript, qui sera bientôt obsolète.

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

Problèmes Chromium: 1511813.

Améliorations des éléments

Cette version apporte un certain nombre d'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.

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 lisses 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 maintenant 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 complète la combinaison de touches Cmd (Mac) / Ctrl (Win) déjà existante + clic pour créer des points d'arrêt conditionnels.

Le menu de commandes obtient la nouvelle commande Afficher le fichier actif dans la barre latérale du navigateur, qui est identique à 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 contenant des options de stratégie.

De plus, la liste Appareils comprend 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", sélectionnez un thème via Changer de thème ou choisissez 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 et affichent des avertissements à côté des cookies concernés par les restrictions tierces de Protection contre le suivi.

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 "Network" (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.

Mise en surbrillance des cookies tiers avant et après 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 accédez à Paramètres > Tests, le champ Rechercher se trouve désormais automatiquement dans le champ de vision.
  • 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 :
    • Remplacements d'en-têtes: correction d'un bug lié à une fausse icône en forme 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 (Récupérez 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 plates-formes 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 sujet lié aux outils de développement.

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.