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 Network (Réseau). Auparavant, vous deviez avoir accès au serveur Web pour tester les en-têtes de réponse HTTP.

Avec les forçages 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 à Network (Réseau) > Headers (En-têtes) > Response Headers (En-têtes de réponse), pointez sur la valeur d'un en-tête, cliquez sur Modifier., puis modifiez-la.

Erreur CORS corrigée par un forçage d'en-tête.

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

Ajouter un en-tête personnalisé

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

Modification de tous les forçages.

Problème Chromium: 1288023.

Améliorations apportées au débogage de Nuxt, Vite et Rollup

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

  • Dans les traces de la console, sous le lien Afficher N frames supplémentaires.
  • Dans Sources > Call Stack (Sources > Pile d'appels), sous Case à cocher. Show ignore-listed frames (Afficher les frames de la liste d'ignorer).

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

Pour vous proposer 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 tient à remercier les équipes Nuxt, Vite et Rollup pour avoir rendu cela possible. Nous vous remercions de votre collaboration et de vos efforts, qui ont été essentiels à la réussite de cette implémentation. Merci encore de votre contribution.

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 les éléments suivants:

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

Nom et valeur de propriété non valides.

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 d'attribut @keyframes correspondantes, ce qui vous permet de naviguer plus rapidement dans le volet Styles.

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

Problème Chromium: 1420656.

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

À partir de la version précédente (112), vous pouvez configurer la console des outils pour les développeurs afin d'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 utiliser également la saisie semi-automatique avec Enter, activez Paramètres. Paramètres > Console > Case à cocher. Accepter la suggestion de saisie semi-automatique à 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 commande met en avant les fichiers créés

La boîte de dialogue d'ouverture rapide du menu de commande affiche désormais les fichiers tiers de la liste d'ignorer en gris pour mettre davantage en avant les fichiers que vous avez créés.

Script figurant sur la liste d'ignorement 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

Dès Chrome 58, l'équipe DevTools a prévu d'abandonner 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 pour les développeurs marque le début de la phase 2 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".

Abandon du profileur JavaScript.

Problème Chromium: 1354548.

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

  • Correction d'un bug qui entraînait une mauvaise gestion des noms de variables avec des caractères Unicode dans l'affichage mis en forme du panneau Sources (1425055).
  • L'onglet Problèmes a ajouté un nouveau message pour les problèmes de saisie semi-automatique liés aux valeurs HTML non standards (1399414).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 éléments abordés dans la série Nouveautés des outils pour les développeurs.