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

Nouvelles fonctionnalités pour les cookies

Déboguer pourquoi un cookie a été bloqué

Après avoir enregistré l'activité réseau, sélectionnez une ressource réseau, puis accédez à l'onglet Cookies mis à jour pour comprendre pourquoi les cookies de requête ou de réponse de cette ressource ont été bloqués. Consultez la section Modifications du comportement par défaut sans SameSite pour comprendre pourquoi vous voyez peut-être plus de cookies bloqués dans Chrome 76 et les versions ultérieures.

L'onglet "Cookies".

L'onglet Cookies

  • Les cookies de requête jaunes n'ont pas été envoyés par le biais du fil. Elles sont masquées par défaut. Cliquez sur Afficher les cookies de requête filtrés pour les afficher.
  • Des cookies de réponse jaunes ont été envoyés via le fil, mais pas stockés.
  • Pointez sur Plus d'informations infos pour savoir pourquoi un cookie a été bloqué.
  • La plupart des données des tables Cookies de requête et Cookies de réponse proviennent des en-têtes HTTP de la ressource. Les données Domain (Domaine), Path (Chemin) et Expires/Max-Age (Expires/Max-Age) proviennent du protocole Chrome DevTools.

Problèmes Chromium 856777, 993843

Afficher les valeurs des cookies

Cliquez sur une ligne dans le volet "Cookies" pour afficher la valeur de ce cookie.

Afficher la valeur d'un cookie

Afficher la valeur d'un cookie

Problème Chromium 462370

Simuler différentes préférences prefers-color-scheme et prefers-reduced-motion

La requête multimédia prefers-color-scheme vous permet d'adapter le style de votre site aux préférences de vos utilisateurs. Par exemple, si la requête multimédia prefers-color-scheme: dark est vraie, cela signifie que votre utilisateur a défini son système d'exploitation en mode sombre et préfère les UI en mode sombre.

Ouvrez le menu de commande, exécutez la commande Afficher le rendu, puis définissez le menu déroulant Émuler la caractéristique média CSS prefers-color-scheme pour déboguer vos styles prefers-color-scheme: dark et prefers-color-scheme: light.

prefers-color-scheme: dark

Lorsque prefers-color-scheme: dark est défini (cadre du milieu), le volet "Styles" (cadre de droite) affiche le CSS appliqué lorsque cette requête multimédia est vraie, et le viewport affiche les styles du mode sombre (cadre de gauche).

Vous pouvez également simuler prefers-reduced-motion: reduce à l'aide du menu déroulant Émuler la caractéristique média CSS prefers-reduced-motion à côté du menu déroulant Émuler la caractéristique média CSS prefers-color-scheme.

Problème Chromium 1004246

Émulation de fuseau horaire

L'onglet "Capteurs" vous permet désormais non seulement de forcer la géolocalisation, mais aussi d'émuler des fuseaux horaires arbitraires et de tester l'impact sur vos applications Web. De manière surprenante, cette nouvelle fonctionnalité améliore également la fiabilité de l'émulation de la géolocalisation: auparavant, les applications Web pouvaient détecter le spoofing de position en comparant la position à la zone horaire locale de l'utilisateur. Maintenant que la géolocalisation et l'émulation de fuseau horaire sont associées, cette catégorie de différences est éliminée.

Mises à jour de la couverture de code

L'onglet "Couverture" peut vous aider à trouver du code JavaScript et CSS inutilisé.

L'onglet "Couverture" utilise désormais de nouvelles couleurs pour représenter le code utilisé et inutilisé. Cette combinaison de couleurs s'est avérée plus accessible pour les personnes souffrant de déficience de la vision des couleurs. La barre rouge à gauche représente le code inutilisé, et la barre bleutée à droite représente le code utilisé.

La nouvelle zone de texte du filtre de type de couverture vous permet de filtrer les informations de couverture par type : afficher uniquement la couverture JavaScript, uniquement la couverture CSS ou tous les types de couverture.

Onglet "Couverture".

Onglet "Couverture".

Le panneau "Sources" affiche les données de couverture du code lorsqu'elles sont disponibles. Cliquez sur les repères rouges ou bleuâtres à côté du numéro de ligne pour ouvrir l'onglet "Couverture" et mettre en surbrillance le fichier.

Données de couverture dans le panneau "Sources".

Données de couverture dans le panneau "Sources". La ligne 8 est un exemple de code inutilisé. La ligne 11 est un exemple de code utilisé.

Problèmes Chromium 1003671 et 1004185

Déboguer la raison pour laquelle une ressource réseau a été demandée

Après avoir enregistré l'activité réseau, sélectionnez une ressource réseau, puis accédez à l'onglet Initiator (Initiateur) pour comprendre pourquoi la ressource a été demandée. La section Pile d'appel de requête décrit la pile d'appel JavaScript menant à la requête réseau.

Onglet "Initiateur".

L'onglet Initiateur

Problèmes Chromium 963183, 842488

Les panneaux "Console" et "Sources" respectent à nouveau les préférences d'indentation

Depuis longtemps, DevTools propose un paramètre permettant de personnaliser votre préférence d'indentation sur deux espaces, quatre espaces, huit espaces ou des tabulations. Récemment, ce paramètre était essentiellement inutile, car les panneaux "Console" et "Sources" l'ignoraient. Ce bug est maintenant corrigé.

Accédez à Settings (Paramètres) > Preferences (Préférences) > Sources (Sources) > Default Indentation (Indentation par défaut) pour définir votre préférence.

Problème Chromium 977394

Nouveaux raccourcis pour la navigation avec le curseur

Appuyez sur Ctrl+P dans les panneaux "Console" ou "Sources" pour déplacer le curseur vers la ligne du dessus. Appuyez sur Ctrl+N pour déplacer le curseur sur la ligne ci-dessous.

Problème Chromium 983874

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.