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

Jecelyn Yeen

Requêtes de conteneur CSS modifiables dans le volet "Styles"

Vous pouvez désormais afficher et modifier les requêtes de conteneur CSS dans le volet Styles.

Les requêtes de conteneur offrent une approche beaucoup plus dynamique de la conception responsive. La règle @@container fonctionne de la même manière qu'une requête média avec @media. Toutefois, au lieu d'interroger la fenêtre d'affichage et l'agent utilisateur pour obtenir des informations, @container interroge le conteneur ancêtre qui correspond à certains critères.

Dans le panneau Éléments, cliquez sur un élément DOM avec une règle @container. Les outils de développement affichent désormais les informations @container dans le panneau Styles. Cliquez dessus pour modifier la taille. Le volet Styles affiche également les informations sur le conteneur correspondant. Pointez dessus pour mettre en surbrillance l'élément de conteneur sur la page et vérifier la taille du conteneur. Cliquez dessus pour sélectionner l'élément de conteneur.

La fonctionnalité de requêtes de conteneur est actuellement expérimentale. Veuillez activer le flag #enable-container-queries sous chrome://flags pour le tester.

Requêtes de conteneur CSS modifiables dans le volet "Styles"

Problème Chromium : 1146422

Aperçu du bundle Web dans le panneau "Réseau"

Un bundle Web est un format de fichier permettant d'encapsuler une ou plusieurs ressources HTTP dans un seul fichier. Vous pouvez désormais prévisualiser le contenu du bundle Web dans le panneau Réseau.

La fonctionnalité de bundle Web est actuellement expérimentale. Pour le tester, veuillez activer l'option #enable-experimental-web-platform-features sous chrome://flags.

Aperçu du bundle Web

Problème Chromium : 1182537

Débogage de l'API Attribution Reporting

Les erreurs de l'API Attribution Reporting sont désormais signalées dans l'onglet Problèmes.

Attribution Reporting est une nouvelle API qui vous aide à mesurer quand une action de l'utilisateur (comme un clic ou une vue d'annonce) entraîne une conversion, sans utiliser d'identifiants multisites.

Erreurs de l'API Attribution Reporting dans l'onglet "Problèmes"

Problème Chromium : 1190735

Meilleure gestion des chaînes dans la console

Un nouveau menu contextuel dans la console vous permet de copier n'importe quelle chaîne en tant que contenu, littéral JavaScript ou littéral JSON.

Nouveau menu contextuel dans la console

Dans Chrome 90, les outils pour les développeurs ont mis à jour la console pour toujours mettre en forme les sorties de chaîne en tant que littéraux JSON valides. Nous avons reçu des commentaires de développeurs qui ont trouvé ce changement déroutant. Certains ont estimé que le nombre de caractères d'échappement était excessif et rendait le résultat illisible.

La console met désormais en forme les chaînes de sortie en tant que littéraux JavaScript valides et vous propose trois options de copie de chaîne. L'option Copier en tant que littéral JavaScript échappe les caractères spéciaux appropriés et encapsule la chaîne entre guillemets simples, guillemets doubles ou accents graves, selon le contenu de la chaîne. L'option Copier le contenu de la chaîne copie le contenu brut de la chaîne (y compris les sauts de ligne et autres caractères spéciaux) tel quel dans le presse-papiers. Enfin, l'option Copier en tant que littéral JSON met en forme la chaîne en tant que littéral JSON valide et la copie dans le presse-papiers.

Problème Chromium : 1208389

Débogage CORS amélioré

Les TypeErrors liés à CORS dans la console sont désormais associés au panneau "Réseau" et à l'onglet "Problèmes".

Cliquez sur les deux nouvelles icônes à côté du message d'erreur lié à CORS pour afficher la requête réseau, ou pour mieux comprendre le message d'erreur et obtenir des solutions potentielles dans l'onglet "Problèmes".

Icônes à côté du message d'erreur lié à CORS

Problème Chromium : 1213393

Lighthouse 8.1

Le panneau Lighthouse exécute désormais Lighthouse 8.1.

Phare

Si votre site expose des source maps à Lighthouse, recherchez le bouton Afficher le TreeMap pour afficher une répartition de votre code JavaScript fourni, filtrable par taille et couverture au chargement.

Le rapport inclut également un nouveau filtre de métriques (voir le filtre Afficher les audits pertinents pour sur la capture d'écran). Choisissez une métrique pour vous concentrer sur les opportunités et les diagnostics les plus pertinents pour l'améliorer.

La catégorie de performances a subi plusieurs modifications de score pour s'aligner sur d'autres outils de performances et mieux refléter l'état du Web.

Pour obtenir la liste complète des modifications, consultez les notes de version.

Problème Chromium : 772558

Afficher l'URL de la nouvelle note dans le volet "Manifeste"

Le volet "Manifeste" affiche désormais l'URL de la nouvelle note.

Actuellement, sur ChromeOS (CrOS), les applications Chrome et Android qui déclarent une fonctionnalité "new-note" peuvent être sélectionnées comme application de prise de notes dans les paramètres du stylet (elles s'affichent si l'appareil CrOS a été utilisé avec un stylet). Lorsqu'elle est sélectionnée comme application de prise de notes, l'application peut être lancée à partir du bouton "Créer une note" de la palette du stylet. L'ajout du champ new-note-url dans le fichier manifeste de l'application fait partie des efforts visant à ajouter des fonctionnalités équivalentes aux applications Web.

URL de nouvelle note dans le volet "Manifeste"

Problème Chromium : 1185678

Sélecteurs CSS correspondants fixes

Les outils de développement ont corrigé les sélecteurs CSS correspondants, qui ne fonctionnaient pas dans la dernière version.

Dans le volet Styles, les sélecteurs séparés par des virgules sont colorés différemment selon qu'ils correspondent ou non au nœud DOM sélectionné :

  • Une partie non associée est affichée en gris clair.
  • La partie correspondante du sélecteur est affichée en noir.

Sélecteurs CSS correspondants

Problème Chromium : 1219153

Mise en forme des réponses JSON dans le panneau "Réseau"

Vous pouvez désormais imprimer les réponses JSON au format "pretty print" dans le panneau Réseau.

Ouvrez une réponse JSON dans le panneau Réseau, puis cliquez sur l'icône {} pour la mettre en forme.

Mise en forme des réponses JSON dans le panneau "Réseau"

Bug Chromium : 998674

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

Nouveautés des outils pour les développeurs

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