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 d'instruction @container fonctionne de la même manière qu'une requête multimédia avec @media. Toutefois, au lieu d'interroger le viewport et l'user-agent pour obtenir des informations, @container interroge le conteneur parent qui répond à certains critères.

Dans le panneau Éléments, cliquez sur un élément DOM avec une règle at @container. DevTools affiche désormais les informations @container dans le volet 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 sa taille. Cliquez dessus pour sélectionner l'élément de conteneur.

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

Problème Chromium: 1146422

Aperçu du bundle Web dans le panneau "Network" (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 Network (Réseau).

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

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.

L'API Attribution Reporting est une nouvelle API qui vous aide à mesurer quand une action de l'utilisateur (comme un clic ou un visionnage d'annonce) génère une conversion, sans utiliser d'identifiants intersites.

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 en tant que contenu, littéral JavaScript ou littéral JSON.

Dans Chrome 90, les outils pour les développeurs ont mis à jour la console pour qu'elle formate toujours les sorties de chaîne en tant que littéraux JSON valides. Les développeurs nous ont indiqué que ce changement pouvait être déroutant. Certains estiment que la quantité d'échappement est excessive et rend la sortie illisible.

La console met désormais en forme les sorties de chaîne 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 encadre la chaîne entre guillemets simples, guillemets doubles ou crochets, en fonction du 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 nouvelles lignes et autres caractères spéciaux) dans le presse-papiers. Enfin, 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 TypeError liées à CORS dans la console sont désormais associé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 pour en savoir plus sur le message d'erreur et obtenir des solutions potentielles dans l'onglet "Problèmes".

Problème Chromium: 1213393

Lighthouse 8.1

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

Si votre site expose des cartes sources à Lighthouse, recherchez le bouton Afficher le diagramme en camembert pour obtenir une répartition de votre code JavaScript distribué, filtrable par taille et couverture au chargement.

Le rapport inclut également un nouveau filtre de métrique (voir le filtre Afficher les audits pertinents dans 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.

La catégorie de performances a subi un certain nombre de modifications de notation 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 "Fichier 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 (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 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.

Problème Chromium: 1185678

Correction des sélecteurs de correspondance CSS

DevTools a corrigé les sélecteurs de correspondance CSS, qui ne fonctionnaient pas dans la dernière version.

Les sélecteurs séparés par des virgules dans le volet Styles sont de couleur différente selon qu'ils correspondent ou non au nœud DOM sélectionné:

• Une partie non mise en correspondance s'affiche en gris clair.
• Une partie du sélecteur correspondant s'affiche en noir.

Problème Chromium: 1219153

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

Vous pouvez désormais afficher les réponses JSON de manière formatée 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'afficher de manière lisible.

Bug Chromium: 998674

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.