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

Utiliser les outils de développement dans la langue de votre choix

Les outils pour les développeurs Chrome sont désormais disponibles 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 sous Préférences > Menu déroulant Language (Langage) et actualisez les Outils de développement.

Préférences" width="800" hauteur="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 de Nest Hub Max en mode Appareil.

Cliquez sur Toggle Device Toolbar   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

Phases d'évaluation dans la vue "Détails du frame"

Vous pouvez désormais obtenir des informations sur les phases d'évaluation d'un site dans la vue détaillée du frame du panneau "Application".

Les phases d'évaluation vous permettent d'accéder à une fonctionnalité nouvelle ou expérimentale. Elle vous permet de créer des fonctionnalités que vos utilisateurs peuvent tester pendant une durée limitée avant qu'elles ne soient accessibles à tous.

Ouvrez une page contenant des phases d'évaluation (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.

Phases d'évaluation dans la vue "Détails du frame"

Problème Chromium: 607555

Nouveau badge "Requêtes de conteneur CSS"

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

Badge "Requêtes de conteneur CSS"

Problème Chromium: 1146422

Nouvelle case à cocher pour inverser les filtres réseau

Utilisez la nouvelle case Inverser pour inverser les filtres dans le panneau "Network".

Par exemple, vous pouvez saisir "code d'état: 404". pour filtrer les requêtes réseau ayant l'état 404. Cochez la case Inverser pour annuler le filtre (afficher toutes les requêtes réseau qui n'ont pas l'état 404).

Inverser les filtres réseau

Problème Chromium: 1054464

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

La barre latérale de la console sera supprimée, et l'interface utilisateur des filtres sera déplacée vers la barre d'outils. Avez-vous des questions ou des commentaires ? Signalez-nous les problèmes via Issue Tracker.

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

Problème Chromium: 1232937

Afficher les en-têtes bruts Set-Cookie 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 Issues (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". Avec le nouveau filtre response-header-set-cookie ajouté au panneau Network (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 Issues (Problèmes) au panneau Network (Réseau).

"Set-Cookie" brut en-têtes dans l'onglet "Problèmes" et le 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 de manière cohérente les accesseurs natifs en tant que propriétés leurs propres propriétés.

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 s'affichent dans l'aperçu, et les valeurs sont soigneusement évaluées lorsqu'elles sont étendues.

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

Problèmes Chromium: 1076820, 1199247

Traces d'erreurs correctes pour les scripts intégrés avec #sourceURL

Les outils de développement résolvent désormais correctement les scripts intégrés avec #sourceURL et affichent les traces de la pile d'erreurs 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 que par rapport à la balise d'ouverture <script>.

Traces d&#39;erreurs correctes pour les scripts intégrés avec #sourceURL

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 appuyant sur la touche Maj tout en cliquant sur l'aperçu de la couleur.

Maj+Cliquer sur l&#39;aperçu de la couleur pour modifier le format de couleur

Problème Chromium: 1226371

Remplacer des info-bulles personnalisées par des info-bulles en HTML natif

Les outils de développement adoptent désormais les info-bulles HTML natives dans tous les composants. Depuis longtemps, les outils de développement proposent une implémentation d'info-bulle personnalisée en raison de l'absence de style dans une info-bulle HTML native.

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

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

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 les problèmes pour masquer les problèmes dans l'onglet Problèmes. De cette façon, vous pouvez vous concentrer sur les questions importantes qui vous intéressent.

Dans l'onglet Issue (Problème), pointez sur un problème, cliquez sur le menu correspondant Plus à droite, puis sélectionnez Hide issues like this (Masquer les problèmes similaires) pour le masquer.

Menu contextuel pour masquer le problème (version expérimentale)

Problème Chromium: 1175722

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 vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement