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

Sofia Emelianova
Sofia Emelianova
GitHub

Panneau "Confidentialité et sécurité"

L'ancien panneau Sécurité a évolué pour devenir le panneau Confidentialité et sécurité, qui comprend une nouvelle section dédiée à la confidentialité. Dans cette section, vous pouvez:

  • Lorsque les outils pour les développeurs 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 de limitation temporaire, et le type de cookies pouvant être affectés.

Avant et après l'ajout de la section "Confidentialité" au panneau "Sécurité".

Problème Chromium: 352364594.

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

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

Vous pouvez désormais calibrer automatiquement et obtenir deux préréglages de limitation du processeur supplémentaires qui correspondent plus précisément aux appareils mobiles de niveau bas et moyen.

Dans le menu déroulant Performances > Limitation du processeur, sélectionnez Calibrer. Dans Paramètres, cliquez sur Calibrer, sur Continuer, puis attendez que DevTools calcule les taux de ralentissement de votre appareil. Vous trouverez les options de limitation calibrées dans le menu déroulant Performances > Limitation du processeur.

Avant et après l'ajout de la calibration du débit

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

Le panneau Assistance par IA vous permet désormais de modifier l'événement sélectionné dans la trace des performances dans la même discussion. 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 désormais un nouveau tableau dans l'onglet Résumé 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 pertinents mis en surbrillance dans la trace des performances. Cochez Atténuer les tiers pour vous concentrer uniquement sur les données first party.

Vous pouvez également cliquer sur l'icône à 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 voir dans les info-bulles des repères de métrique et dans l'onglet Insights.

Avant et après avoir ajouté des données de champ aux info-bulles des repères et à l'onglet "Insights".

Problème Chromium: 368135130.

Insight "Ajustement forcé de la mise en page"

L'onglet Performances > Insights a été enrichi d'un nouvel insight: Reflow forcé. Un 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 constituer des goulots d'étranglement que vous pouvez éviter.

Lorsque vous pointez sur le nouvel insight, il met en surbrillance l'appel de fonction le plus important avec un reflow forcé, sa trace de pile et affiche la durée totale du reflow.

Avant et après l'ajout de l'insight "Reflow forcé".

Problème Chromium: 369766156.

Insight "Optimiser la taille du DOM"

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

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

Avant et après l'ajout de l'insight "Optimiser la taille du DOM".

Étendre la trace des performances avec console.timeStamp

L'API Extensibility est désormais compatible avec console.timeStamp. En plus de performance.measure et performance.mark, vous pouvez désormais créer des canaux personnalisés dans la trace des performances et capturer des repères personnalisés à l'aide de console.timeStamp. Cette alternative plus légère n'ajoute pas d'entrées au calendrier des performances interne du navigateur, mais les affiche uniquement dans la trace des 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 > Afficher les canaux personnalisés, votre canal personnalisé s'affiche dans la trace:

Avant et après l'ajout de la prise en charge de console.timeStamp.

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.

Prise en charge de la pseudo-classe :open et de 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>.

Avant et après l&#39;ajout de l&#39;option &#39;:open&#39;.

De plus, le panneau Éléments est désormais compatible avec plusieurs nouveaux pseudo-éléments: ::checkmark, ::picker-icon et les éléments liés au carrousel ::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 copier tous les messages de la console en une fois en effectuant un clic droit.

Avant et après l&#39;ajout de l&#39;option &quot;Copier la console&quot;.

Vous trouverez également une option de copie similaire dans le menu contextuel de Network > Request Payload (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 des unités d'octets appropriées au lieu de grands nombres d'octets.

Avant et après l&#39;affichage des unités d&#39;octets.

Problème Chromium: 388589515.

Autres points forts

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'éléments à ignorer: les éléments internes du nœud commençant par node: sont désormais ignorés par défaut (crbug.com/382453615).
  • Expressions actives: correction d'un bug qui faisait que l'expression active affectait la commande $_ (crbug.com/388437265).
  • Éléments > Styles: les longueurs relatives sont désormais associées à un pop-up affichant la valeur absolue (crbug.com/40778486).
  • Accessibilité: les en-têtes de colonnes indiquent désormais s'ils sont triables.
  • Les icônes des onglets se trouvent désormais à droite, à côté des noms des onglets, et non plus à gauche.

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 concernant les outils pour les développeurs.