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

Jecelyn Yeen

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

Chrome DevTools est désormais disponible dans plus de 80 langues, ce qui vous permet de travailler dans la langue de votre choix.

Ouvrez Paramètres, puis sélectionnez la langue de votre choix dans le menu déroulant Préférences > Langue et rechargez les outils de développement.

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 en mode Appareil.

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

Problème Chromium : 1223525

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

Vous pouvez désormais obtenir des informations sur les origin trials d'un site dans la vue détaillée des frames, sous le panneau "Application".

Les essais Origin Trial vous donnent accès à une fonctionnalité nouvelle ou expérimentale. Vous pouvez ainsi créer des fonctionnalités que vos utilisateurs peuvent tester pendant une durée limitée avant qu'elles ne soient disponibles pour tous.

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

Problème Chromium : 607555

Nouveau badge pour les 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 @@container). Cliquez sur le badge pour afficher ou masquer un calque du conteneur choisi et de tous ses descendants de requête sur la page.

Problème Chromium : 1146422

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

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

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

Problème Chromium : 1054464

Abandon à venir de la barre latérale de la console

La barre latérale de la console sera supprimée au profit du déplacement de l'interface utilisateur du filtre vers la barre d'outils. Avez-vous des questions ou des commentaires ? Faites-le nous savoir via cet outil de suivi des problèmes.

Problème Chromium : 1232937

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

Les outils de développement affichent 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 "Réseau". Avec le nouveau filtre response-header-set-cookie ajouté au panneau Réseau, les utilisateurs peuvent filtrer la réponse brute de l'en-tête Set-Cookie. Les outils de développement associent les en-têtes Set-Cookie bruts de l'onglet Problèmes au panneau 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 accesseurs natifs de manière cohérente en tant que propriétés distinctes.

Par exemple, lors de l'évaluation de l'expression new Int8Array([1, 2, 3]) dans la console, les accesseurs natifs tels que length et byteOffset ne s'affichaient pas dans l'aperçu. Avec cette dernière mise à jour, les accesseurs 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.

Problèmes Chromium : 1076820, 1199247

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

Les outils pour les développeurs résolvent désormais correctement les scripts intégrés avec #sourceURL et affichent des traces de pile d'erreur appropriées pour le débogage.

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

Problèmes Chromium : 1183990, ​​578269

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

Vous pouvez désormais modifier le format de couleur de n'importe quel élément du volet "Calculé" en cliquant sur l'aperçu de la couleur tout en maintenant la touche Maj enfoncée.

Problème Chromium : 1226371

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

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

Malheureusement, il est difficile de maintenir une implémentation d'info-bulle personnalisée, et nous rencontrons régulièrement des bugs complexes.

Après avoir réévalué les avantages des implémentations personnalisées, nous avons constaté que les info-bulles HTML natives suffisent pour les outils de développement et que leur adoption permet d'éviter une grande variété de problèmes pour nos utilisateurs.

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  à droite, puis sélectionnez Masquer les problèmes de ce type pour le masquer.

Problème Chromium : 1175722

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

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.