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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Remplacer les en-têtes de réponse réseau

Vous pouvez désormais remplacer les en-têtes de réponse dans le panneau Réseau. Auparavant, vous deviez avoir accès au serveur Web pour tester les en-têtes de réponse HTTP.

Les remplacements d'en-têtes de réponse vous permettent de prototyper localement des correctifs pour différents en-têtes, y compris, mais sans s'y limiter :

Pour remplacer un en-tête, accédez à Réseau > En-têtes > En-têtes de réponse, pointez sur la valeur d'un en-tête, cliquez sur Modifiez-la. et modifiez-la.

Erreur CORS corrigée par un remplacement d'en-tête.

Vous pouvez également ajouter des en-têtes personnalisés.

Ajouter un en-tête personnalisé

Pour modifier tous les remplacements au même endroit, modifiez le fichier .headers dans Sources > Remplacements. Vous pouvez également cliquer sur Ajouter une règle de remplacement pour remplacer plusieurs requêtes à l'aide de caractères génériques (*).

Modifier tous les forçages.

Problème Chromium : 1288023.

Améliorations du débogage de Nuxt, Vite et Rollup

Pour vous aider à identifier plus rapidement les problèmes lors du débogage, la trace de pile améliorée masque désormais les frames provenant de sources générées par Nuxt 3.3 ou version ultérieure. Les outils de développement ignorent ces frames :

  • Dans les traces de la console, sous le lien Afficher N images de plus.
  • Dans Sources > Pile d'appels, sous Case à cocher. Afficher les frames ignorés.

Trace de la pile avant et après l'activation de la liste d'ignorance tierce.

Pour vous proposer ces améliorations, les équipes DevTools, Nuxt, Vite et Rollup ont collaboré afin d'adopter l'extension de carte source x_google_ignoreList :

L'équipe DevTools tient à remercier les équipes Nuxt, Vite et Rollup pour avoir rendu cela possible. Nous vous remercions de vos efforts et de votre collaboration, qui ont été essentiels à la réussite de cette implémentation. Merci encore pour vos contributions !

Améliorations apportées au CSS dans Éléments > Styles

Propriétés et valeurs CSS non valides

Pour vous aider à diagnostiquer plus rapidement les problèmes liés aux CSS, le volet Styles barre désormais :

  • Une déclaration CSS entière (propriété et valeur) lorsque la propriété CSS n'est pas valide.
  • Valeur uniquement lorsque la propriété CSS est valide, mais que la valeur ne l'est pas.

Nom et valeur de propriété non valides.

L'équipe des outils de développement tient à remercier Yisi(一丝) pour cette amélioration.

Liens vers les images clés dans la propriété abrégée d'animation

La propriété CSS abrégée animation contient désormais des liens vers les règles @@keyframes correspondantes, ce qui vous permet de parcourir plus rapidement le volet Styles.

Associe les images clés à la propriété raccourcie de l'animation.

Problème Chromium : 1420656.

Nouveau paramètre de la console : saisie semi-automatique avec la touche Entrée

À partir de la version précédente (112), vous pouvez configurer la console des outils de développement pour appliquer une suggestion de saisie semi-automatique lorsque vous appuyez sur Enter.

Par défaut, pour accepter une suggestion de saisie semi-automatique, vous pouvez appuyer sur Tab ou Arrow right. Pour également utiliser la saisie semi-automatique avec Enter, activez Paramètres. Paramètres > Console > Case à cocher. Accepter la suggestion de saisie semi-automatique avec la touche Entrée.

La case à cocher correspondante dans les paramètres.

De plus, le texte d'un autre paramètre est désormais plus convivial : Case à cocher. Traiter l'évaluation du code comme une action de l'utilisateur.

Problème Chromium : 1276960.

Le menu de commandes met l'accent sur les fichiers créés

La boîte de dialogue "Ouvrir rapidement" du menu de commandes affiche désormais les fichiers tiers ignorés en gris pour mettre davantage l'accent sur les fichiers que vous avez créés.

Script ignoré dans la boîte de dialogue "Ouvrir rapidement" avant et après la modification.

Problème Chromium : 1424345.

Arrêt du profileur JavaScript : deuxième étape

Depuis Chrome 58, l'équipe DevTools prévoyait de supprimer à terme le profileur JavaScript et de demander aux développeurs Node.js et Deno d'utiliser le panneau Performances pour profiler les performances du processeur JavaScript.

La version 113 des outils de développement marque le début de la deuxième phase de l'abandon du profiler JavaScript en quatre phases. Pendant cette phase, vous pouvez toujours ouvrir le panneau, mais son interface utilisateur n'est plus disponible.

Pour profiler les performances du processeur, cliquez sur Accéder au panneau "Performances".

Obsolescence du profileur JavaScript.

Problème Chromium : 1354548.

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

  • Correction d'un bug qui entraînait une gestion incorrecte des noms de variables avec des caractères Unicode par l'impression esthétique dans le panneau Sources (1425055).
  • L'onglet Problèmes a ajouté un nouveau message pour les problèmes de remplissage automatique concernant les valeurs HTML non standards (1399414).

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.

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.