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

Utiliser les outils de développement dans votre langue préférée

Les outils pour les développeurs Chrome sont désormais disponibles dans plus de 80 langues, ce qui vous permet de travailler dans votre langue préférée.

Ouvrez Settings (Paramètres), puis sélectionnez la langue de votre choix dans la liste déroulante Preferences (Préférences) > Language (Langue), puis actualisez DevTools.

Préférences" width="800" height="494">

Problème Chromium: 1163928

Nouveaux appareils Nest Hub dans la liste des appareils

Vous pouvez désormais simuler les dimensions de Nest Hub et Nest Hub Max dans le mode Appareil.

Cliquez sur Activer/Désactiver la barre d'outils de l'appareil   Activer/Désactiver la barre d'outils de l'appareil  , puis sélectionnez Nest Hub ou Nest Hub Max dans la liste des appareils.

Appareil Nest Hub en mode Appareil

Problème Chromium: 1223525

Essais d'origine dans la vue "Détails du frame"

Vous pouvez désormais obtenir des informations sur les tests d'origine d'un site dans la vue d'informations sur le frame sous le panneau "Application".

Les essais Origin Trial vous permettent d'accéder à une fonctionnalité nouvelle ou expérimentale afin de créer une fonctionnalité que vos utilisateurs peuvent essayer pendant une durée limitée avant qu'elle ne soit disponible pour tous.

Ouvrez une page avec des essais d'origine (par exemple, la page de démonstration). Dans le panneau Application, faites défiler la section Cadres vers le bas, puis sélectionnez le cadre supérieur.

Essais d'origine dans la vue "Détails du frame"

Problème Chromium: 607555

Nouveau badge de requêtes de conteneur CSS

Un nouveau badge conteneur est ajouté à côté des éléments de conteneur (les éléments ancêtres qui correspondent aux critères des règles at @container). Cliquez sur le badge pour afficher ou masquer une superposition du conteneur choisi et de tous ses descendants qui interrogent la page.

Badge "Requêtes de conteneur CSS"

Problème Chromium: 1146422

Nouvelle case à cocher pour inverser les filtres de réseau

Utilisez la nouvelle case à cocher Inverser pour inverser les filtres dans le panneau "Réseau".

Par exemple, vous pouvez saisir "code-d'état: 404" pour filtrer les requêtes réseau avec l'état 404. Activez la case à cocher Inverser pour inverser le filtre (afficher toutes les requêtes réseau dont l'état n'est pas 404).

Inverser les filtres réseau

Problème Chromium: 1054464

Abandon prochain de la barre latérale de la console

La barre latérale de la console sera supprimée et l'interface utilisateur du filtre sera déplacée vers la barre d'outils. Avez-vous des questions ou des commentaires ? N'hésitez pas à nous en faire part via cet outil de suivi des problèmes.

Message d'abandon de la barre latérale de la console

Problème Chromium: 1232937

Afficher les en-têtes Set-Cookie bruts dans l'onglet "Issues" (Problèmes) et le panneau "Network" (Réseau)

DevTools affiche désormais les en-têtes Set-Cookie bruts dans l'onglet Problèmes.

Auparavant, les outils de développement n'affichaient pas les cookies mal formés (en-tête Set-Cookie incorrect) dans le panneau "Network" (Réseau). Grâce au nouveau filtre response-header-set-cookie ajouté dans le panneau Network (Réseau), les utilisateurs peuvent filtrer la réponse d'en-tête Set-Cookie brute. Les outils de développement associent les en-têtes Set-Cookie bruts de l'onglet Problèmes au panneau Réseau.

En-têtes "Set-Cookie" bruts dans l'onglet "Issues" (Problèmes) et le panneau "Network" (Réseau)

Problème Chromium: 1179186

Affichage cohérent des accesseurs natifs en tant que propriétés propres dans la console

La console affiche désormais les accésseurs natifs en tant que propriétés propres de manière cohérente.

Par exemple, lors de l'évaluation de l'expression new Int8Array([1, 2, 3]) dans la console, les accésseurs natifs tels que length et byteOffset ne s'affichaient pas dans l'aperçu. Avec cette dernière mise à jour, les accésseurs natifs sont affichés dans l'aperçu et les valeurs sont évaluées de manière anticipée lorsqu'elles sont développées.

Affichage cohérent des accesseurs natifs en tant que propriétés propres dans la console

Problèmes Chromium: 1076820, ​​1199247

Traces de pile d'erreur appropriées pour les scripts intégrés avec #sourceURL

DevTools résout désormais correctement les scripts intégrés avec #sourceURL et affiche les traces de pile d'erreur appropriées pour le débogage.

Auparavant, les outils de développement affichaient une position incorrecte pour les scripts intégrés avec #sourceURL, par rapport au document environnant plutôt qu'à la balise <script> d'ouverture.

Traces de pile d&#39;erreur appropriées pour les scripts intégrés avec #sourceURL

Problèmes Chromium: 1183990, ​​578269

Modifier le format de couleur dans le volet "Comptabilisé"

Vous pouvez désormais modifier le format de couleur de n'importe quel élément du volet "Comptabilisé" en appuyant sur la touche Maj et en cliquant sur l'aperçu de la couleur.

Cliquez en maintenant la touche Maj enfoncée sur l&#39;aperçu de la couleur pour changer de format de couleurs

Problème Chromium: 1226371

Remplacer les info-bulles personnalisées par des info-bulles HTML natives

DevTools adopte désormais des info-bulles HTML natives pour tous les composants. Les outils pour les développeurs disposent depuis longtemps d'une implémentation d'info-bulle personnalisée en raison de l'absence de style d'une info-bulle HTML native.

Malheureusement, la maintenance d'une implémentation d'info-bulle personnalisée est complexe, et nous rencontrons régulièrement des bugs complexes.

Après avoir rééquilibré les avantages des implémentations personnalisées, nous constatons que les info-bulles HTML natives sont suffisantes pour DevTools. L'adoption de ces info-bulles évite à nos utilisateurs de nombreux problèmes.

Info-bulle des outils de développement

Problème Chromium: 1223391

[Expérimental] Masquer les problèmes dans l'onglet "Problèmes"

Activez le test Masquer le menu des problèmes pour masquer les problèmes dans l'onglet Problèmes. Vous pouvez ainsi vous concentrer sur les problèmes importants qui vous intéressent.

Dans l'onglet Problème, pointez sur un problème, cliquez sur le menu du problème Plus à droite, puis sélectionnez Masquer les problèmes comme celui-ci pour le masquer.

Menu contextuel expérimental pour masquer les problèmes

Problème Chromium: 1175722

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.

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.