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 la sous-grille. Cette fonctionnalité est actuellement en phase 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 canaux de son parent, cliquez sur le badge. Il active une superposition 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 un nom de sélecteur pour afficher son pondération de spécificité dans une info-bulle.

Info-bulle avec 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 un nom de propriété CSS personnalisée pour afficher sa valeur dans une 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

Mise en surbrillance de la syntaxe 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 prise en charge des é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 du point d'arrêt, maintenez la touche Commande (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 dans la boîte de dialogue de point d'arrêt.

Problème Chromium: 1405767.

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

Le test 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 Mitigations du suivi des rebonds qui vous permet de forcer manuellement les mesures d'atténuation du suivi et de lister 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 > 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 particulièrement, la vérification de la plus grande peinture avec contenu obtient un tableau avec des calculs de phase pour le débit limité simulé et DevTools. Consultez également la liste complète des modifications.

Tableau des phases de LCP.

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.

Ignorer les scripts de contenu par défaut

L'option Paramètres. Settings > Ignore List > Case à cocher. Content scripts injected by extensions est désormais activée par défaut.

Lorsque ce paramètre est activé:

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

Les scripts de contenu injectés par des extensions sont activés par défaut. Pour y accéder, accédez à "Paramètres", puis à "Liste d'ignorer".

De plus, le texte des cases à cocher de la section Liste d'ignorer est plus clair.

Problèmes Chromium: 1440958, 1364501.

Réseau > Mise en forme de la réponse par défaut

Le volet Network > Response affiche désormais les corps de réponse minifiés sous forme mise en forme par défaut, comme dans le panneau Sources.

Mise en forme de texte activée dans la fenêtre "Réponse" de l'onglet "Réseau".

De plus, les fichiers SVG bénéficient de la mise en surbrillance de la syntaxe.

Mise en surbrillance de la syntaxe SVG.

Problèmes Chromium: 1382752, 1385374.

Autres points forts

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: Cmd+K
    • Windows/Linux: Ctrl + L
  • Suppression de l'option du menu déroulant Enregistreur > Enregistrement N > Panneau d'insights sur les performances (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 du canal 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 débogueur n'effectue pas automatiquement de pas dans WebAssembly lorsqu'il n'y a pas de plug-in pour le langage concerné (1443342).
  • Le raccourci qui déplace 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 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.