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

Sofia Emelianova

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 :

• En-têtes CORS (Cross-Origin Resource Sharing)
• En-têtes Permissions-Policy
• En-têtes d'isolation d'origine croisée

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 et modifiez-la.

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

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 (*).

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 Afficher les frames ignorés.

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 :

• Version 3.3 de Nuxt
• Options du serveur Vite
• Options de configuration du cumul

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 CSS, le volet Styles barre désormais :

• Une déclaration CSS complète (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.

L'équipe DevTools 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. Vous pouvez ainsi parcourir le volet Styles plus rapidement.

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 > Console > Accepter la suggestion de saisie semi-automatique avec la touche Entrée.

De plus, le texte d'un autre paramètre est désormais plus convivial : 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 grise désormais les fichiers tiers ajoutés à la liste des éléments à ignorer pour mettre davantage l'accent sur les fichiers que vous avez créés.

Problème Chromium : 1424345.

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

Depuis Chrome 58, l'équipe des outils pour les développeurs prévoyait de supprimer 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 en quatre phases du Profileur JavaScript. 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".

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 Chrome DevTools

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 pour les développeurs" ou les vidéos YouTube "Conseils sur les 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 de DevTools.