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 accepte désormais l'attribut @property CSS at-rule. 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 et pointez sur le nom de la propriété. Ses descripteurs s'affichent dans une info-bulle. Dans l'info-bulle, cliquez sur le lien pour afficher la propriété enregistrée dans la section @property réductible.

Problèmes Chromium: 1471102, 1471103, 1471105

Améliorations apportées aux forçages locaux

Dans la continuité des améliorations de la version précédente, les remplacements locaux effectuent désormais les opérations suivantes:

Dans Sources > Page, lorsque vous effectuez un clic droit sur un fichier mappé de source et sélectionnez Override content (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 de mappage source ne peut pas être remplacé.
Le panneau Réseau obtient une nouvelle colonne Comporte des remplacements et le filtre has-overrides:[content|headers|yes|no] correspondant. Pour afficher la colonne Comporte des remplacements, effectuez un clic droit sur l'en-tête du tableau et sélectionnez-le.
Dans Sources > Remplacements, l'option de menu Supprimer tous les remplacements a été remplacée par Supprimer, avec un comportement précis.

La précédente Supprimer tous les forçages était déroutante, car elle ne supprimait que les forçages actifs dans la session en cours, signalés par l'icône en forme de point violet .

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

Pour rétablir l'option précédente, cochez la case 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. Le nouveau comportement est particulièrement utile lorsque vous effectuez des recherches dans des fichiers réduits. Lorsque vous cliquez sur un résultat de recherche, le fichier s'ouvre dans l'éditeur. Désormais, la correspondance s'affiche dans la vue non seulement verticalement, mais aussi horizontalement.

Les options avant et après recherche affichent toutes les correspondances par ligne.

De plus, la recherche a été améliorée en vitesse. Découvrez la comparaison avant (à gauche) et après (à droite) dans la vidéo suivante.

Enfin, la recherche est désormais compatible avec les listes d'éléments à ignorer et n'affiche pas les résultats provenant des fichiers ignorés.

Problèmes Chromium: 1468875, 1472019.

Amélioration du panneau "Sources"

Espace de travail simplifié dans le panneau "Sources"

La fonctionnalité workspace du panneau Sources a été simplifiée:

Nommage cohérent. Plus particulièrement, le volet Sources > Système de fichiers a été renommé Espace de travail. Différents textes d'interface utilisateur dans ce volet sont désormais plus clairs et exempts de redondance.
Configuration améliorée. Découvrez de meilleurs repères pour 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 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 le côté gauche du panneau Sources par glisser-déposer, de la même manière que vous pouvez réorganiser les 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:

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

Mise en forme avant/après et mise en surbrillance de la syntaxe 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 une navigation instantanée sur les pages.

Problème Chromium: 1473875.

Émuler la fonctionnalité multimédia préfères-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 dans l'OS, comme le paramètre Réduire la transparence sous macOS.

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

Problème Chromium: 1424879.

Lighthouse 11

Le panneau Lighthouse est désormais associé à 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 des fonctionnalités d'accessibilité

Les outils de développement prennent désormais en charge davantage de combinaisons de touches de navigation:

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

De plus, plusieurs problèmes d'annonce des lecteurs d'écran ont été résolus.

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

Points importants divers

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

Réseau: nouvelles icônes pour les types de ressources les plus courants: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Modification des couleurs de Material 3 dans de nombreux éléments de l'interface utilisateur, notamment dans les panneaux Éléments et Performances (1456690, 1472243).
La section Issues (Problèmes) conserve désormais les problèmes de cookies d'une navigation à l'autre (1466601).
Diverses améliorations apportées à Application > Préchargement, en particulier des grilles triables et des détails sur les ensembles de règles révisés (1410709).
Diverses améliorations de l'éditeur de commandes dans Protocol monitoring, notamment des avertissements en cas de saisie incorrecte, 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 "flamme" des performances est encadré par une bordure autour du total du graphique à secteurs (1470147).
Désormais, Sources ne traite pas les tirets comme des caractères de mot dans les CSS (1471354).
Désormais, la saisie semi-automatique trie toujours les mots clés basés sur le CSS à la fin.
Les filtres d'expressions régulières sont désormais compatibles avec les espaces (1346936).
Correction de la détection des caractéristiques de requête média par Elements (1472693).

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.