Nouveautés des outils pour les développeurs, Chrome 134

Sofia Emelianova

Panneau "Confidentialité et sécurité"

L'ancien panneau Sécurité est devenu le panneau Confidentialité et sécurité et comporte une nouvelle section dédiée à la confidentialité. Dans cette section, vous pouvez :

• Lorsque les outils de développement sont ouverts, limitez temporairement les cookies tiers avec ou sans exceptions, et testez le comportement d'un site Web.
• Consultez un tableau contenant des informations sur les cookies tiers, y compris s'ils ont été bloqués ou exemptés par le mode Limite temporaire, et le type de cookies pouvant être concernés.

Problème Chromium : 352364594.

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Préréglages calibrés de limitation du processeur

Vous pouvez désormais calibrer automatiquement votre appareil et obtenir deux préréglages de limitation du processeur supplémentaires qui se rapprochent plus précisément des appareils mobiles de milieu et d'entrée de gamme.

Dans le menu déroulant Performances > Limitation du processeur, sélectionnez Calibrer…, puis dans Paramètres, cliquez sur Calibrer, Continuer et attendez que les outils de développement calculent les taux de ralentissement pour votre appareil. Vous retrouverez les options de limitation calibrée dans le menu déroulant Performances > Limitation du processeur.

Sélectionner différents événements de performances dans le même chat IA

Le panneau Assistance IA vous permet désormais de modifier l'événement sélectionné dans la trace de performances dans le même chat. En d'autres termes, vous n'avez pas besoin de démarrer une nouvelle discussion pour parler d'un autre événement.

Mise en évidence des données propriétaires et tierces dans "Performances"

Le panneau Performances comporte un nouveau tableau dans l'onglet Récapitulatif qui vous permet de distinguer les données first party, tierces et d'extension.

Pointez sur les entrées du tableau pour voir les événements correspondants mis en évidence dans la trace de performances. Cochez Atténuer les tiers pour vous concentrer uniquement sur les données first party.

Vous pouvez également cliquer sur l'icône account_tree à côté d'une entrée mise en surbrillance dans le tableau pour accéder à l'onglet De bas en haut regroupé par tiers.

Données de champ dans les info-bulles et les insights des repères

Si vous avez activé les données de champ, vous pouvez désormais les consulter dans les info-bulles des repères de métriques et dans l'onglet Insights.

Problème Chromium : 368135130.

Insight "Ajustement forcé de la mise en page"

Un nouvel insight, Reflow forcé, a été ajouté à l'ensemble des insights de l'onglet Performances > Insights. Le reflow forcé se produit lorsque le moteur de rendu suspend l'exécution du script pour calculer le style et la mise en page. Les reflows forcés peuvent être des goulots d'étranglement que vous voudrez peut-être éviter.

Lorsque vous pointez sur le nouvel insight, l'appel de fonction principal avec un reflow forcé, sa trace de pile et le temps de reflow total sont mis en évidence.

Problème Chromium : 369766156.

Insight "Optimiser la taille du DOM"

Un autre insight est Optimiser la taille du DOM. Une arborescence DOM volumineuse peut ralentir les performances de votre page.

Cet insight met en évidence les longs ajustements de la mise en page et les nouveaux calculs de style qui ont été affectés par une grande taille du DOM dans la trace de performances. Il fournit des statistiques sur le nombre total d'éléments, la profondeur et le nombre d'enfants.

Étendre la trace des performances avec console.timeStamp

L'API d'extensibilité est désormais compatible avecconsole.timeStamp. En plus de performance.measure et performance.mark, vous pouvez désormais créer des pistes personnalisées dans la trace de performances et capturer des repères personnalisés à l'aide de console.timeStamp. Il s'agit d'une alternative plus légère qui n'ajoute pas d'entrées à la chronologie des performances interne du navigateur, mais les affiche uniquement dans la trace de performances.

Par exemple, vous pouvez utiliser la syntaxe suivante :

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Si vous sélectionnez Paramètres de capture > check_box Afficher les pistes personnalisées, votre piste personnalisée s'affichera dans la trace :

Améliorations apportées au panneau "Elements"

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

Valeurs en temps réel des styles animés

L'onglet Éléments > Styles met désormais à jour les valeurs des styles animés en temps réel.

Compatibilité avec la pseudo-classe :open et divers pseudo-éléments

Le panneau Éléments est désormais compatible avec la pseudo-classe :open dans la section Styles > :hov > Forcer l'état d'un élément spécifique pour certains éléments HTML tels que <details>, <select>, <dialog> et <input>.

De plus, le panneau Éléments est désormais compatible avec plusieurs nouveaux pseudo-éléments : ::checkmark, ::picker-icon et ceux liés aux carrousels ::column, ::scroll-button, ::scroll-marker et ::scroll-marker-group.

Problèmes Chromium : 383157184, 379805728.

Copier tous les messages de la console

Vous pouvez désormais effectuer un clic droit pour copier tous les messages de la console en une seule fois.

Vous trouverez également une option de copie similaire dans le menu contextuel de Réseau > Charge utile de la requête.

Problèmes Chromium : 40206460, 384967020.

Unités d'octets dans le panneau "Mémoire"

Le panneau Mémoire affiche désormais les tailles avec les unités d'octets appropriées au lieu de grands nombres d'octets.

Problème Chromium : 388589515.

Autres points importants

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

• Performances :
  • Annotations : vous pouvez désormais cliquer sur votre libellé pour sélectionner l'entrée correspondante (crbug.com/388224764).
  • Insights : lorsque vous cliquez sur CLS dans l'onglet Insights, le pire cluster est désormais sélectionné au lieu du pire décalage.
• Liste d'exclusion : les éléments internes des nœuds commençant par node: sont désormais ignorés par défaut (crbug.com/382453615).
• Expressions actives : correction d'un bug qui entraînait l'affectation de la commande $_ par les expressions actives (crbug.com/388437265).
• Éléments > Styles : les longueurs relatives disposent désormais d'un pop-up qui affiche la valeur absolue (crbug.com/40778486).
• Accessibilité : les en-têtes de colonne indiquent désormais s'ils peuvent être triés.
• Les icônes des onglets se trouvent désormais à droite des noms d'onglets, et non plus à gauche.

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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.