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

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.

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.

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.

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 :

• Coloration syntaxique.
• Compatibilité avec les éditeurs intégrés. Ces éditeurs sont semblables à ceux de Éléments > Styles, par exemple Sélecteur de couleur et Éditeur d'interpolation.

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.

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 à > Paramètres > Confidentialité et sécurité > Cookies et autres données des sites > 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 Exécuter de force pour supprimer immédiatement l'é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.

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

Problème Chromium : 772558.

Ignorer les scripts de contenu par défaut

L'option Paramètres > Liste des éléments ignorés > Scripts de contenu injectés par des 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 frames ignorés. Pour désactiver l'option d'ignorer les frames, cochez 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 la section et sur Afficher moins pour la réduire à nouveau.

De plus, le texte des cases à cocher de la liste des éléments ignorés 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.

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

Problèmes Chromium : 1382752, 1385374.

Autres points importants

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

• 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
• Suppression de l'option de menu déroulant Enregistreur > Enregistrement N > Panneau "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 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 débogueur 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 restauré 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 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.