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 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, dans Éléments > Styles, pointez sur le nom de la propriété pour afficher 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 des forçages locaux

Poursuivant la série d'améliorations de la version précédente, les forcements locaux permettent désormais de procéder comme suit:

• Dans Sources > Page, lorsque vous effectuez un clic droit sur un fichier mappé en source et sélectionnez Override content (Ignorer le contenu), DevTools affiche 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 Network (Réseau) reçoit une nouvelle colonne Has overrides (Possède des forçages) et un filtre has-overrides:[content|headers|yes|no] correspondant. Pour afficher la colonne A des forçages, 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 Supprimer, avec un comportement précis.

  

L'option Supprimer tous les forçages précédente était source de confusion, car elle ne supprimait que les forçages 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 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 Activer "Supprimer temporairement tous les forçages" dans Paramètres > Tests.

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

Recherche améliorée

Les résultats de la recherche affichent désormais une entrée pour toutes les correspondances trouvées 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 une recherche dans des fichiers minifiés. Lorsque vous cliquez sur un résultat de recherche, le fichier s'ouvre dans l'éditeur et la correspondance s'affiche désormais non seulement verticalement, mais aussi horizontalement.

De plus, la recherche a été accélérée. 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é Espace de travail du panneau Sources a été simplifiée:

• Noms cohérents Plus particulièrement, le volet Sources > Filesystem (Sources > Système de fichiers) a été renommé Workspace (Espace de travail). Les différents textes de l'interface utilisateur de ce volet sont désormais plus clairs et ne comportent plus de redondances.
• Configuration améliorée. Obtenez de meilleurs repères pour glisser-déposer des dossiers ou cliquez sur un lien pour en sélectionner un.

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 le nouveau processus de configuration et de workflow en action:

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

Réorganiser les volets dans "Sources"

Vous pouvez désormais réorganiser les volets situés sur le côté gauche du panneau Sources par glisser-déposer, comme vous le faites pour réorganiser d'autres panneaux, onglets et volets.

Problèmes Chromium: 1473758.

Mise en surbrillance de la syntaxe et mise en forme pour plus de types de scripts

Le panneau Sources permet désormais de:

• Mise en forme JavaScript intégrée dans les types de script suivants: module, importmap, speculationrules.
• Mettre 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éréndu des pages dans Chrome pour la navigation instantanée sur les pages.

Problème Chromium: 1473875.

Émuler la fonctionnalité multimédia preferences-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 de l'utilisateur en réduisant la transparence 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 jusqu'à ce qu'il s'affiche.

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 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.

Améliorations de l'accessibilité

Les outils de développement sont désormais compatibles avec davantage 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 liés aux annonces du lecteur d'écran ont été corrigés.

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

Autres points forts

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

• Réseau: nouvelles icônes pour les types de ressources populaires: media, wasm, websocket, manifest, fetch/xhr et json (1466298).
• Mise à jour des couleurs vers les couleurs Material 3 dans de nombreux éléments d'interface utilisateur, en particulier 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 les grilles triables et les détails des ensembles de règles révisés (1410709).
• Diverses améliorations apportées à l'éditeur de commandes dans le moniteur de protocole, en particulier les avertissements en cas de mauvaise entrée, la modification d'une commande envoyée, l'é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, le filtrage des commandes par correspondance de sous-chaînes, etc. (1448050).
• Le graphique en flamme Performances comporte une bordure autour de la zone "Total" du graphique à secteurs (1470147).
• Sources ne traite plus les tirets 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).
• Correction de la détection des fonctionnalités de requête média par Elements (1472693).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à 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, des mises à jour ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en sélectionnant more_vert Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.