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'accéder 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 divers 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 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 ignorer plusieurs requêtes à l'aide de caractères génériques (*).

Modification de tous les remplacements.

Problème Chromium: 1288023.

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

Pour vous aider à identifier les problèmes plus rapidement 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 les frames suivants:

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 tierce

Pour vous faire bénéficier de 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 aimerait remercier les équipes Nuxt, Vite et Rollup d'avoir rendu tout 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 CSS disponibles 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 est 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é non valide et valeur de propriété non valide.

L'équipe des outils de développement aimerait remercier Yisi(đ丝) d'avoir réussi à améliorer ses performances.

Liens vers les images clés dans la propriété de raccourci d'une animation

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

Liens vers les images clés dans la propriété de raccourci d'une animation.

Problème Chromium: 1420656.

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

À partir de la version précédente (112), vous pouvez configurer la console des outils de développement pour qu'elle applique 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 utiliser également 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: Considérez l'évaluation du code comme une action de l'utilisateur.

Problème Chromium: 1276960.

La boîte de dialogue d'ouverture rapide du menu Commande met désormais en grisé les fichiers tiers répertoriés à la liste d'exclusion pour mettre davantage l'accent sur les fichiers que vous avez créés.

Script de la liste des éléments à ignorer dans la boîte de dialogue d'ouverture rapide avant et après la modification.

Problème Chromium: 1424345.

Abandon du profileur JavaScript: deuxième étape

À partir de Chrome 58, l'équipe DevTools prévoyait d'abandonner le Profileur JavaScript afin 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 Go to Performance panel (Accéder au panneau des performances).

Abandon du Profileur JavaScript.

Problème Chromium: 1354548.

Points forts divers

Voici quelques correctifs importants dans cette version:

Correction d'un bug qui provoquait un mauvais traitement des noms de variables contenant des caractères Unicode dans le panneau Sources (1425055).
L'onglet Problèmes a ajouté un nouveau message pour les problèmes de saisie automatique concernant les valeurs HTML non standards (1399414).

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.