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

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@property CSS. Il vous permet de définir explicitement des propriétés personnalisées CSS 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, dans Éléments > Styles, pointez sur le nom de la propriété pour afficher ses descripteurs dans un 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.

Améliorations supplémentaires des remplacements locaux

Dans la continuité des améliorations apportées à la version précédente, les remplacements locaux permettent désormais de :

• Dans Sources > Page, lorsque vous effectuez un clic droit sur un fichier mappé à la source et 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 source ne peut pas être remplacé.

  

• Le panneau Réseau comporte une nouvelle colonne A des remplacements et un filtre has-overrides:[content|headers|yes|no] correspondant. Pour afficher la colonne A des remplacements, effectuez un clic droit sur l'en-tête du tableau, puis sélectionnez-la.

  

• 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, marqués par l'icône en forme de point violet .

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

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

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

Recherche améliorée

Les résultats de la recherche affichent désormais une entrée pour chaque correspondance trouvée dans une ligne de code. Auparavant, il n'affichait que la première correspondance par ligne de code. Ce nouveau comportement est particulièrement utile lorsque vous effectuez des recherches dans des fichiers minimisés. Lorsque vous cliquez sur un résultat de recherche, le fichier s'ouvre dans l'éditeur et le résultat correspondant est désormais visible non seulement verticalement, mais aussi horizontalement.

De plus, la recherche a été accélérée. Regardez la vidéo suivante pour comparer l'image avant (à gauche) et après (à droite).

Enfin, la recherche est désormais compatible avec la fonctionnalité Ignorer la liste et ne vous affichera pas les résultats des fichiers ignorés.

Problèmes Chromium : 1468875, 1472019.

Panneau "Sources" amélioré

Espace de travail simplifié dans le panneau "Sources"

La fonctionnalité espace de travail du panneau Sources a été simplifiée :

• Cohérence des noms : Plus précisément, le volet Sources > Système de fichiers a été renommé Espace de travail. Divers textes de l'UI de ce volet sont désormais plus clairs et non redondants.
• Configuration améliorée : Des repères plus clairs pour glisser-déposer des dossiers ou cliquer 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 en action :

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

Réorganiser les volets dans "Sources"

Vous pouvez désormais réorganiser les volets sur la gauche du panneau Sources par glisser-déposer, comme vous pouvez réorganiser d'autres panneaux, onglets et volets.

Problèmes Chromium : 1473758.

Coloration syntaxique et mise en forme pour davantage de types de scripts

Le panneau Sources peut désormais :

• Mise en forme du code JavaScript intégré dans les types de script suivants : module, importmap, speculationrules.
• Mettez en surbrillance la syntaxe des types de script importmap et speculationrules, qui contiennent tous deux du code JSON.

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

Problème Chromium : 1473875.

Émuler la caractéristique média prefers-reduced-transparency

Chrome 118 est désormais compatible avec la fonctionnalité média prefers-reduced-transparency. Cette fonctionnalité permet aux développeurs d'adapter le contenu Web à la préférence sélectionnée par l'utilisateur pour une transparence réduite dans l'OS, comme le paramètre Réduire la transparence sur macOS.

Pour émuler cette fonctionnalité multimédia, ouvrez l'onglet Rendering (Rendu) et faites-le défiler vers le bas.

Problème Chromium : 1424879.

Lighthouse 11

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

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.

Améliorations de l'accessibilité

Les outils de développement sont désormais compatibles avec davantage de frappes au clavier pour la navigation :

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

Plusieurs problèmes liés aux annonces du lecteur d'écran ont également été corrigés.

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

Autres points importants

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

• Réseau : nouvelles icônes pour les types de ressources populaires : media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Mise à jour des couleurs Material 3 dans de nombreux éléments de l'UI, en particulier dans les panneaux Éléments et Performances (1456690, 1472243).
• L'onglet Problèmes conserve désormais les problèmes de cookies lors des navigations (1466601).
• Diverses améliorations apportées à Application > Préchargement, notamment des grilles triables et des détails révisés sur l'ensemble des règles (1410709).
• Diverses améliorations de l'éditeur de commandes dans le moniteur de protocole, 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, des objets sans référence de type, le filtrage des commandes par correspondance de sous-chaîne, et plus encore (1448050).
• Un bord est ajouté autour de la boîte "Total" du graphique à secteurs du graphique en flammes Performances (1470147).
• Dans Sources, les tirets ne sont plus traités comme des caractères de mot dans le CSS (1471354).
• La saisie semi-automatique trie désormais toujours les mots clés CSS à la fin.
• Les filtres d'expression régulière acceptent désormais les espaces (1346936).
• Éléments : correction de la détection des fonctionnalités de requête média (1472693).

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.