Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

Jecelyn Yeen

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

Vous pouvez désormais remplacer les en-têtes de réponse dans le panneau Network (Réseau). Auparavant, vous aviez besoin d'un accès au serveur Web pour tester les en-têtes de réponse HTTP.

Avec les remplacements d'en-tête de réponse, vous pouvez 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, passez la souris sur la valeur d'un en-tête, cliquez sur et modifiez-le.

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

Modification de tous les remplacements.

Problème Chromium: 1288023.

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

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

Dans les traces de la console, sous le lien Afficher N autres frames
Dans Sources > Pile des appels, sous Afficher les frames de la liste des éléments à ignorer.

Trace de la pile avant et après l'activation de la liste d'éléments à ignorer tiers.

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

L'équipe DevTools souhaite exprimer sa gratitude aux équipes Nuxt, Vite et Rollup d'avoir rendu cela possible. Nous apprécions vos efforts et votre collaboration, qui ont été essentiels à la réussite de cette mise en œuvre. Merci encore pour vos contributions !

Améliorations apportées au code CSS dans les é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 est désormais barré:

Une déclaration CSS complète (propriété et valeur) lorsque la propriété CSS n'est pas valide.
Uniquement la valeur lorsque la propriété CSS est valide, mais que la valeur n'est pas valide.

Nom de propriété et valeur de propriété non valides.

L'équipe DevTools aimerait exprimer sa gratitude à Yisi(地丝) d'avoir obtenu cette amélioration.

Liens vers des images clés dans la propriété de raccourci de l'animation

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

Liens vers des images clés dans la propriété de raccourci de l'animation.

Problème Chromium: 1420656.

Nouveau paramètre de la console: saisie semi-automatique lors de la saisie

À partir de la version précédente (112), vous pouvez configurer la console DevTools 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 lorsque vous appuyez sur Entrée.

la case à cocher correspondante dans les paramètres ;

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.

La boîte de dialogue d'ouverture rapide du menu de commandes grise désormais les fichiers tiers listés dans la liste d'ignore pour mettre davantage l'accent sur ceux que vous avez créés.

Script à ignorer dans la boîte de dialogue d'ouverture rapide, avant et après la modification.

Problème Chromium: 1424345.

Abandon du Profileur JavaScript: étape 2

Dès Chrome 58, l'équipe DevTools prévoyait d'abandonner le Profileur JavaScript et de demander aux développeurs Node.js et Deno d'utiliser le panneau Performance pour profiler les performances du processeur JavaScript.

La version 113 des outils de développement lance la phase 2 de l'abandon du Profileur JavaScript en quatre phases. Pendant cette phase, vous pouvez toujours ouvrir le panneau, mais son UI n'est plus disponible.

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

Abandon du Profileur JavaScript.

Problème Chromium: 1354548.

Points importants divers

Voici quelques correctifs importants dans cette version:

Correction d'un bug qui provoquait l'impression élégante dans le panneau Sources de la gestion incorrecte des noms de variables contenant des caractères Unicode (1425055).
Ajout d'un message dans l'onglet Problèmes concernant les problèmes de saisie automatique concernant les valeurs HTML non standards (1399414).

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 > 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.