Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

Améliorations apportées aux éléments

Nouveau badge de sous-grille CSS

Le panneau Éléments obtient un nouveau badge subgrid pour la sous-grille. Cette fonctionnalité est actuellement au stade expérimental dans Chrome Canary.

Pour inspecter et déboguer une grille imbriquée qui est une sous-grille, et ainsi hériter du nombre et de la taille des pistes de son parent, cliquez sur le badge. Elle active ou désactive une superposition qui affiche les colonnes, les lignes et leurs nombres 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 l'épaisseur 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, passez la souris sur le nom d'une 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 aimerait exprimer sa gratitude à 丝 et Suyan pour ces améliorations.

Problème Chromium: 1380779.

Améliorations des sources

Mise en surbrillance de la syntaxe CSS

Le panneau Sources obtient les informations suivantes 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 la section Éléments > Styles, par exemple, Color Picker (Sélecteur de couleur) et Easing Editor (Éditeur de lissage de vitesse).

Amélioration de la mise en surbrillance de la syntaxe CSS et de la compatibilité avec les éditeurs intégrés dans la section "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 et cliquez sur le numéro de ligne dans la colonne de gauche sous Sources > Éditeur :

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

Problème Chromium: 1405767.

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

Le test 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 grâce à la technique de suivi des rebonds. La page Application > Le volet Services d'arrière-plan comporte un nouvel onglet Atténuation du suivi des rebonds, qui vous permet de forcer manuellement les mesures d'atténuation du suivi et répertorie les sites dont l'état a été supprimé.

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

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

La mesure d'atténuation du suivi des rebonds indique 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. En particulier, la vérification Largest Contentful Paint obtient une table contenant des calculs de phase pour la simulation et la limitation des outils de développement. Consultez également la liste complète des modifications.

Tableau des phases du LCP.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Ignorer les scripts de contenu par défaut

Le menu Paramètres > Liste des éléments à ignorer > Les scripts de contenu injectés par des extensions sont désormais activés par défaut.

Lorsque ce paramètre est activé:

Debugger ignore ces scripts et ne s'arrête pas aux exceptions qu'ils génèrent.
La page Sources > Le volet Call Stack (Pile d'appel) ignore les frames ignorés. Pour désactiver l'option permettant de passer des éléments ici, cochez Afficher les frames de la liste des éléments à ignorer.
La console réduit les cadres ignorés dans les traces de pile. Cliquez sur Afficher N autres frames pour développer et sur Afficher moins pour les réduire.

Scripts de contenu injectés par des extensions activées par défaut. Pour ce faire, accédez aux paramètres, puis à la liste des éléments à ignorer.

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

Problèmes Chromium: 1440958, 1364501.

Réseau > Impression élégante de la réponse par défaut

La page Réseau > Le volet Response (Réponse) affiche désormais de manière élégante les corps de réponse réduits par défaut, comme le panneau Sources.

L'impression élégante est activée dans la fenêtre de réponse de l'onglet "Réseau".

De plus, les fichiers SVG bénéficient d'une coloration syntaxique.

mise en surbrillance de la syntaxe SVG.

Problèmes Chromium: 1382752, 1385374.

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

Paramètres > Appareils: Facebook pour Android v407 sur le Pixel 6 a été ajouté à la liste des chaînes d'agent.
Réseau: ajout du raccourci Effacer le journal réseau (1444991):
- macOS: Commande+K
- Windows/Linux: Ctrl+L
Suppression de l'Enregistreur > Enregistrement N > Menu déroulant du panneau d'insights sur les performances (1414773)
Les feuilles de style dont le chargement a échoué 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 dont le chargement a échoué sont désormais soulignées par des lignes ondulées (1440626).
Debugger n'intervient pas automatiquement dans WebAssembly s'il n'existe aucun plug-in pour le langage concerné (1443342).
Le raccourci qui déplace le curseur d'un mot à la fois est restauré pour les fichiers CSS dans Sources > Éditeur (1241848): <ph type="x-smartling-placeholder">
- macOS: Alt+Flèche
- Windows/Linux: Ctrl+Flèche

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.