Cette page a été traduite par l'API Cloud Translation.

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 du responsive design. La règle at @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 le user-agent pour obtenir des informations, @container interroge le conteneur ancêtre qui correspond à certains critères.

Dans le panneau Elements, cliquez sur un élément DOM avec @container at-rule, les outils de développement affichent désormais les informations @container dans le volet Styles. Cliquez dessus pour modifier la taille. Le volet Styles affiche également les informations correspondantes sur le conteneur. Pointez dessus pour mettre en surbrillance l'élément conteneur sur la page et vérifier sa taille. Cliquez dessus pour sélectionner l'élément conteneur.

La fonctionnalité de requêtes de conteneur est actuellement expérimentale. Veuillez activer l'indicateur #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 "Network"

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

La fonctionnalité du bundle Web est actuellement au stade expérimental. Veuillez activer l'indicateur #enable-experimental-web-platform-features sous chrome://flags pour le tester.

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 le moment où une action de l'utilisateur (un clic sur une annonce ou une vue, par exemple) génère une conversion, sans utiliser d'identifiants intersites.

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

Problème Chromium: 1190735

Meilleure gestion des chaînes dans la console

Le nouveau menu contextuel de la console vous permet de copier n'importe quelle chaîne sous forme de littéral JavaScript ou JSON.

Dans Chrome 90, les outils de développement ont mis à jour la console pour toujours mettre en forme les sorties de chaîne en tant que littéraux JSON valides. Les développeurs nous ont signalé que cette modification pouvait prêter à confusion. Certains estiment que le nombre d'échappements est excessif et rend le résultat illisible.

La console formate désormais les sorties de chaîne en tant que littéraux JavaScript valides et fournit également trois options de copie de chaîne. L'option Copier en tant que littéral JavaScript protège les caractères spéciaux appropriés et encapsule la chaîne entre des guillemets simples, des guillemets doubles ou des accents graves, selon le contenu de la chaîne. À la place, la commande Copy string content (Copier le contenu de la chaîne) copie mot pour mot le contenu de la chaîne brute (y compris les nouvelles lignes et autres caractères spéciaux) 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

Amélioration du débogage CORS

Les erreurs de type CORS dans la console sont désormais liées au panneau "Network" (Réseau) et à l'onglet "Issues" (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 mieux comprendre le message d'erreur et trouver des solutions dans l'onglet "Problèmes".

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

Problème Chromium: 1213393

Lighthouse 8.1

Le panneau Lighthouse utilise à présent Lighthouse 8.1.

Phare

Si votre site expose des mappages sources dans Lighthouse, recherchez le bouton Afficher la carte proportionnelle pour afficher une répartition du code JavaScript envoyé, filtrable par taille et par couverture de charge.

Le rapport inclut également un nouveau filtre de métriques (consultez 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 améliorer cette métrique uniquement.

Les scores de la catégorie de performances ont été modifiés pour s'aligner sur les autres outils dédiés aux performances et mieux refléter l'état du Web.

Consultez les notes de version pour obtenir la liste complète des modifications.

Problème Chromium: 772558

Afficher l'URL de la nouvelle note dans le volet du fichier manifeste

Le volet "Manifest" (Manifeste) affiche désormais la nouvelle URL de la note.

Actuellement, sous ChromeOS (CrOS), les applications Chrome et Android qui déclarent une fonctionnalité de nouvelle note peuvent être sélectionnées comme application de prise de notes dans les paramètres du stylet (cette option s'affiche si l'appareil CrOS a été utilisé avec un stylet). Lorsqu'elle est sélectionnée comme application de prise de notes, elle peut être lancée via le bouton "Créer une note" de la palette de stylet. L'ajout du champ new-note-url dans le fichier manifeste de l'application s'inscrit dans le cadre de l'ajout de fonctionnalités équivalentes aux applications Web.

Nouvelle URL de note dans le volet du fichier manifeste

Problème Chromium: 1185678

Correction des sélecteurs de correspondance CSS

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

Dans le volet Styles, les sélecteurs séparés par une virgule sont de couleur différente selon qu'ils correspondent ou non au nœud DOM sélectionné:

Une partie incohérente est affichée en gris clair.
Une partie correspondante du sélecteur est affichée en noir.

Sélecteurs de correspondance CSS

Problème Chromium: 1219153

Impression élégante des réponses JSON dans le panneau "Network" (Réseau)

Vous pouvez maintenant imprimer l'impression élégante des réponses JSON dans le panneau Network (Réseau).

Ouvrez une réponse JSON dans le panneau Network (Réseau), puis cliquez sur l'icône {} pour l'imprimer.

Impression élégante des réponses JSON dans le panneau "Network" (Réseau)

Bug Chromium: 998674

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.