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 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, 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 @property réductible.

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 mappés 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 > Forcements, l'option de menu Supprimer tous les forçages a été remplacée par l'option Supprimer, dont le comportement est 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 demande 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 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 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. Pour voir la comparaison avant (à gauche) et après (à droite), regardez la vidéo suivante.

Enfin, la recherche est désormais compatible avec la liste d'ignorement et n'affiche plus les résultats 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.
• Amélioration de la configuration 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 DevTools 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 évidence 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 caractéristique média prefers-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.

Phare 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 principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre 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.
• Mémoire: dans la barre latérale de gauche, placez le focus sur le bouton Enregistrer à côté des instantanés avec la touche Tabulation, puis appuyez sur Entrée pour sélectionner un 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 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 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).
• Problèmes conserve désormais les problèmes liés aux cookies entre les navigations (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, notamment des avertissements en cas de mauvaise saisie, 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, des 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 par ordre CSS à la fin.
• Les filtres d'expression régulière acceptent désormais les espaces (1346936).
• Elements a corrigé la détection des fonctionnalités de requête multimédia (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 plate-forme 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 é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 à l'aide de l'icône more_vert Plus d'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.