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 manière semblable à 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 É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 volet Styles. Cliquez dessus pour modifier la taille. Le volet Styles affiche également les informations de conteneur correspondantes. 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 conteneur.

La fonctionnalité des requêtes de conteneur est actuellement en phase 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 "Réseau"

Le 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 bundle Web dans le panneau Network.

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

aperçu du pack 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 permet de déterminer quand une action d'un utilisateur (clic sur une annonce, vue, etc.) 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 contenu, de littéral JavaScript ou de littéral JSON.

Dans Chrome 90, les outils de développement ont mis à jour la console pour toujours formater les sorties de chaîne en tant que littéraux JSON valides. Les développeurs nous ont signalé que cette modification pouvait être déroutante. Certains ont estimé que le nombre d'échappements était excessif et rendait la sortie illisible.

La console met désormais en forme les chaînes de sortie sous forme de littéraux JavaScript valides et propose trois options de copie de chaîne. L'option Copier en tant que littéral JavaScript permet d'échapper les caractères spéciaux appropriés et d'encapsuler la chaîne entre des guillemets simples, des guillemets doubles ou des accents graves, selon le contenu de la chaîne. À la place, l'option Copier le contenu de la chaîne copie le contenu de la chaîne brute (y compris les nouvelles lignes et autres caractères spéciaux) mot à mot 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 "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 comprendre le message d'erreur et obtenir des solutions 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 fonctionne désormais avec la version 8.1 de Lighthouse.

Phare

Si votre site expose des cartes sources à Lighthouse, recherchez le bouton View Treemap (Afficher la carte proportionnelle) pour afficher la répartition du JavaScript envoyé, que vous pouvez filtrer par taille et par couverture en termes de chargement.

Le rapport inclut également un nouveau filtre de métrique (reportez-vous au filtre Afficher les audits pertinents pour de 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 uniquement.

Plusieurs modifications ont été apportées au score de la catégorie de performances afin de s'aligner sur d'autres outils de performances et de 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 "Manifeste"

Le volet "Manifeste" affiche maintenant la nouvelle URL de la note.

Actuellement sur ChromeOS (CrOS), les applications Chrome et Android qui déclarent une capacité "nouvelle note" peuvent être sélectionnées en tant qu'application de prise de notes dans les paramètres du stylet (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 à partir du bouton "Créer une note" de la palette de stylet. L'ajout du champ new-note-url au 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 "Manifeste"

Problème Chromium: 1185678

Correction des sélecteurs de mise en correspondance CSS

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

Les sélecteurs d'éléments séparés par une virgule dans le volet Styles ont une couleur différente selon qu'ils correspondent ou non au nœud DOM sélectionné:

Une partie sans correspondance est affichée en gris clair.
Une partie de sélecteur correspondante est affichée en noir.

Sélecteurs CSS correspondants

Problème Chromium: 1219153

Mettre en forme les réponses JSON dans le panneau "Network" (Réseau)

Vous pouvez maintenant imprimer facilement les réponses JSON du panneau Network.

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

Mettre en forme les réponses JSON dans le panneau "Network" (Réseau)

Bug Chromium: 998674

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.