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

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

Sofia Emelianova

Nouvelle section pour les propriétés personnalisées dans Éléments > Styles

Le panneau Éléments est désormais compatible avec la règle at-rule CSS@property. Il vous permet de définir explicitement des propriétés CSS personnalisées et de les enregistrer dans une feuille de style sans exécuter de code JavaScript.

Pour inspecter vos propriétés personnalisées enregistrées, accédez à Éléments > Styles, pointez sur le nom de la propriété et consultez ses descripteurs dans une info-bulle. Dans l'info-bulle, cliquez sur le lien pour afficher la propriété enregistrée dans la section réductible @property.

Problèmes Chromium: 1471102, 1471103, 1471105.

Autres améliorations apportées aux forçages locaux

Dans la continuité des améliorations de la version précédente, les remplacements locaux:

Dans Sources > Page, lorsque vous effectuez un clic droit sur un fichier mappé à la source et que vous sélectionnez Remplacer le contenu, les outils de développement affichent une boîte de dialogue qui vous redirige vers la source d'origine. Le contenu des fichiers mappés au niveau de la source ne peut pas être ignoré.
Le panneau Réseau dispose d'une nouvelle colonne Contenant des remplacements et d'un filtre has-overrides:[content|headers|yes|no] correspondant. Pour afficher la colonne Contient des remplacements, effectuez un clic droit sur l'en-tête du tableau, puis sélectionnez-le.
Dans Sources > Remplacements, l'option de menu Supprimer tous les remplacements a été remplacée par l'option Supprimer, qui offre un comportement précis.

L'option précédente Supprimer tous les remplacements était déroutante, car elle ne supprimait que les remplacements actifs dans la session en cours, indiqués par l'icône en forme de point violet .

La nouvelle option Supprimer affiche d'abord un message d'avertissement et vous invite à confirmer la suppression, puis supprime le dossier sur lequel vous avez cliqué avec tout son contenu.

Pour rétablir l'option précédente, cochez Activer "Supprimer temporairement tous les remplacements" dans Paramètres > Tests.

Problèmes Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Recherche avancée

Les résultats de recherche affichent désormais une entrée pour toutes les correspondances trouvées dans une ligne de code. Auparavant, seule la première correspondance par ligne de code était affichée. Ce nouveau comportement est particulièrement utile lorsque vous effectuez des recherches dans des fichiers dont la taille est réduite. Lorsque vous cliquez sur un résultat de recherche, le fichier s'ouvre dans l'éditeur et la correspondance est maintenant affichée non seulement verticalement, mais aussi horizontalement.

La recherche "avant/après" affiche toutes les correspondances par ligne.

De plus, la recherche Google a gagné en rapidité. Voir la comparaison avant (à gauche) et après (à droite) dans la vidéo suivante.

Enfin, vous pouvez désormais ignorer la fiche dans la recherche, et les résultats des fichiers ignorés ne s'affichent pas.

Problèmes Chromium: 1468875, 1472019.

Panneau "Sources" amélioré

Espace de travail simplifié dans le panneau des sources

Nous avons simplifié la fonctionnalité workspace dans le panneau Sources:

Utilisez des noms cohérents. Le volet Sources > Filesystem (Système de fichiers) a notamment été renommé Workspace. Différents textes d'interface utilisateur dans ce volet sont désormais plus clairs et exempts de redondance.
Configuration améliorée. Découvrez comment glisser-déposer des dossiers ou cliquez sur un lien pour sélectionner un dossier.

Sources > Espace de travail vous permet de synchroniser les modifications que vous apportez dans les outils de développement directement avec vos fichiers sources.

Découvrez concrètement la nouvelle configuration et le nouveau workflow:

Problèmes Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Réorganiser les volets dans les sources

Vous pouvez désormais réorganiser les volets sur la gauche du panneau Sources par glisser-déposer, de la même manière que vous pouvez réorganiser d'autres panneaux, onglets et volets.

Problèmes Chromium: 1473758.

Mise en surbrillance de la syntaxe et impression élégante pour d'autres types de scripts

Le panneau Sources peut désormais:

Impression élégante du code JavaScript intégré dans les types de scripts suivants: module, importmap, speculationrules.
Mettez en surbrillance la syntaxe des types de scripts importmap et speculationrules, qui contiennent tous deux des fichiers JSON.

Avant et après l'impression élégante et la coloration syntaxique du type de script des règles de spéculation.

Pour en savoir plus sur les règles de spéculation, consultez Précharger les pages dans Chrome pour la navigation instantanée sur les pages.

Problème Chromium: 1473875.

Émuler la fonctionnalité multimédia "preferreds-reduced-transparency"

Chrome 118 est désormais compatible avec la fonctionnalité multimédia prefers-reduced-transparency. Cette fonctionnalité permet aux développeurs d'adapter le contenu Web aux préférences sélectionnées par l'utilisateur pour réduire la transparence de l'OS, comme le paramètre Réduire la transparence sous macOS.

Pour émuler cette fonctionnalité multimédia, ouvrez l'onglet Rendu et faites défiler la page jusqu'à celui-ci.

Problème Chromium: 1424879.

Lighthouse 11

Le panneau Lighthouse exécute désormais Lighthouse 11. Plus particulièrement, cette version supprime l'ancienne navigation et ajoute de nouveaux audits d'accessibilité, et modifie la façon dont la catégorie d'accessibilité est évaluée.

Consultez également la liste complète des modifications. Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Amélioration de l'accessibilité

Les outils de développement sont désormais compatibles avec davantage de combinaisons de touches de navigation:

CSS Overview (Aperçu CSS) : utilisez les flèches vers le haut et vers le bas pour parcourir les sections de la barre latérale gauche.
Mémoire: dans la barre latérale de gauche, sélectionnez le bouton Enregistrer à côté des instantanés avec la touche Tabulation, puis appuyez sur Entrée pour sélectionner le dossier.

En outre, plusieurs problèmes liés aux annonces du lecteur d'écran ont été résolus.

Problèmes Chromium: 1470401, 1471301, 1474108, 1468631.

Points forts divers

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

Réseau : nouvelles icônes pour les types de ressources courants, à savoir media, wasm, websocket, manifest, fetch/xhr et json (1466298).
Mises à jour des couleurs de Material 3 dans de nombreux éléments d'interface utilisateur, notamment dans les panneaux Éléments et Performances (1456690, 1472243).
La section Problèmes permet désormais de préserver les problèmes de cookies toutes les navigations (1466601).
Diverses améliorations apportées à Application > Préchargement, en particulier pour le tri des grilles et la révision des détails de l'ensemble de règles (1410709).
Diverses améliorations de l'éditeur de commande dans le moniteur de protocole, notamment des avertissements en cas de mauvaise entrée, la modification d'une commande envoyée, un éditeur pour les paramètres d'objet sans clés prédéfinies, la prise en charge des énumérations non définies par des références, les objets sans référence de type, les commandes de filtrage par correspondance de sous-chaîne, etc. (1448050).
Le graphique de type "Performances" est entouré d'une bordure autour de la zone totale du graphique à secteurs (1470147).
Désormais, les sources ne traitent plus les tirets comme des caractères de mot en CSS (1471354).
Désormais, la saisie semi-automatique trie toujours les mots clés CSS à la fin.
Les filtres d'expressions régulières prennent désormais en charge les espaces. (1346936)
Détection de fonctionnalités de requête média fixe Éléments. (1472693)

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.