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

Sofia Emelianova
Sofia Emelianova
GitHub

Améliorations des éléments

Nouveau badge de sous-grille CSS

Le panneau Éléments reçoit un nouveau badge subgrid pour subgrid. Cette fonctionnalité est actuellement expérimentale dans Chrome Canary.

Pour inspecter et déboguer une grille imbriquée qui est une sous-grille et qui hérite donc du nombre et de la taille des pistes de son parent, cliquez sur le badge. Il active ou désactive un calque qui affiche les colonnes, les lignes et leurs numéros au-dessus de l'élément dans la fenêtre d'affichage.

Badge de sous-grille et superposition dans la fenêtre d'affichage.

Pour obtenir la liste de tous les badges du panneau Éléments, consultez la documentation de référence sur les badges.

Problème Chromium : 1442536.

Spécificité du sélecteur dans les info-bulles

Dans Éléments > Styles, pointez sur le nom d'un sélecteur pour afficher son poids de spécificité dans un info-bulle.

Info-bulle indiquant la pondération de spécificité d'un sélecteur.

Problème Chromium : 1204932.

Valeurs des propriétés CSS personnalisées dans les info-bulles

Dans Éléments > Styles, pointez sur le nom d'une propriété CSS personnalisée pour afficher sa valeur dans un info-bulle.

Info-bulle avec la valeur de la propriété CSS personnalisée.

L'équipe DevTools tient à remercier 一丝 et Suyan pour cette amélioration.

Problème Chromium : 1380779.

Améliorations des sources

Coloration syntaxique CSS

Le panneau Sources obtient les éléments suivants pour les fichiers CSS prétraités, tels que SASS, SCSS et LESS :

Amélioration de la coloration syntaxique CSS et de la compatibilité avec les éditeurs intégrés dans Sources.

Problèmes Chromium : 1302261, 1392085.

Raccourci pour définir des points d'arrêt conditionnels

Vous pouvez désormais définir des points d'arrêt conditionnels plus rapidement à l'aide d'un raccourci. Pour ouvrir la boîte de dialogue des points d'arrêt, maintenez la touche Cmd (macOS) ou Ctrl (Windows / Linux) enfoncée, puis cliquez sur le numéro de ligne dans la colonne de gauche de Sources > Éditeur.

Numéro de ligne dans la colonne de gauche et boîte de dialogue du point d'arrêt.

Problème Chromium : 1405767.

Application > Mesures d'atténuation du suivi des rebonds

L'expérience Mesures d'atténuation du suivi des rebonds dans Chrome vous permet d'identifier et de supprimer l'état des sites qui semblent effectuer un suivi intersites à l'aide de la technique de suivi des rebonds. Le volet Application > Services en arrière-plan comporte un nouvel onglet Mesures d'atténuation du suivi des rebonds qui vous permet de forcer manuellement les mesures d'atténuation du suivi et liste les sites dont les états ont été supprimés.

Découvrez cette fonctionnalité de sécurité :

  1. Bloquer les cookies tiers dans Chrome Accédez à Menu à trois points. > Paramètres > ou de la sécurité. Confidentialité et sécurité > Cookies et autres données des sites > Case d'option cochée. Bloquer les cookies tiers, puis activez cette option.
  2. Dans chrome://flags, définissez le test Mesures d'atténuation du suivi des rebonds sur Activé avec suppression.
  3. Inspectez cette page de démonstration, ouvrez Application > Services en arrière-plan > Mesures d'atténuation du suivi des rebonds, cliquez sur un lien de rebond sur la page, attendez (10 secondes) que Chrome enregistre le rebond, puis cliquez sur Forcer l'exécution pour supprimer immédiatement l'état.

Les mesures d'atténuation du suivi des rebonds indiquent une suppression d'état.

De plus, l'onglet Problèmes vous avertit de la suppression prochaine de l'état.

Problème Chromium : 1432303.

Lighthouse 10.2.0

Le panneau Lighthouse exécute désormais Lighthouse 10.2.0. Plus précisément, le contrôle Largest Contentful Paint obtient un tableau avec des calculs de phase pour la simulation et la limitation du débit des outils de développement. Consultez également la liste complète des modifications.

Table des phases LCP.

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

Problème Chromium : 772558.

Ignorer les scripts de contenu par défaut

L'option Paramètres. Paramètres > Liste des éléments ignorés > Case à cocher. Scripts de contenu injectés par des extensions est désormais activée par défaut.

Lorsque ce paramètre est activé :

  • Le Debugger ignore ces scripts et ne s'arrête pas aux exceptions qu'ils imposent.
  • Le volet Sources > Pile d'appel ignore les frames ignorés. Pour désactiver l'option de désactivation ici, cochez Case à cocher. Afficher les frames de la liste des éléments à ignorer.
  • La console réduit les frames ignorés dans les traces de pile. Cliquez sur Afficher N images de plus pour développer et sur Afficher moins pour réduire à nouveau.

Les scripts de contenu injectés par les extensions sont activés par défaut. Pour les trouver, accédez à Paramètres, puis à Liste des expéditeurs ignorés.

De plus, le texte des cases à cocher de la liste Ignorer est plus clair.

Problèmes Chromium : 1440958, 1364501.

Réseau > Mise en forme des réponses par défaut

Le volet Réseau > Réponse affiche désormais par défaut les corps de réponse minimisés dans un format lisible, comme le volet Sources.

L'impression esthétique est désormais activée dans la fenêtre "Réponse" de l'onglet "Réseau".

De plus, les fichiers SVG bénéficient de la coloration syntaxique.

Mise en surbrillance de la syntaxe SVG.

Problèmes Chromium : 1382752, 1385374.

Autres points importants

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

  • Paramètres. Paramètres > Appareils : ajout de Facebook pour Android v407 sur Pixel 6 à la liste des chaînes d'agent.
  • Réseau : ajout du raccourci Effacer le journal réseau (1444991) :
    • macOS : Command+K
    • Windows/Linux : Ctrl+L
  • L'option de menu déroulant Enregistreur > Enregistrement N > Panneau "Insights sur les performances" a été supprimée (1414773).
  • Les feuilles de style qui n'ont pas pu être chargées sont désormais masquées dans l'arborescence du navigateur (1386059).
  • Performances : correction de l'affichage incorrect de la piste Interactions extensible (1432510).
  • Éléments : les feuilles de style qui n'ont pas pu être chargées sont désormais soulignées par des lignes ondulées (1440626).
  • Le Debugger n'intervient pas automatiquement dans WebAssembly lorsqu'il n'y a pas de plug-in pour la langue concernée (1443342).
  • Le raccourci qui permet de déplacer le curseur d'un mot à la fois est rétabli pour les fichiers CSS dans Sources > Éditeur (1241848) :
    • macOS : Alt+flèche
    • Windows/Linux : Ctrl+flèche

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.