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

Kayce Basques
Kayce Basques
X GitHub

Nouvelles fonctionnalités pour les cookies

Déboguer le blocage d'un cookie

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 Modifications du comportement par défaut sans SameSite pour comprendre pourquoi vous pouvez voir plus de cookies bloqués dans Chrome 76 et versions ultérieures.

L'onglet "Cookies".

L'onglet Cookies.

  • Les cookies de requête jaunes n'ont pas été envoyés sur le réseau. 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 sur le réseau, mais n'ont pas été stockés.
  • Pointez sur Plus d'informations infos pour savoir pourquoi un cookie a été bloqué.
  • La plupart des données des tableaux Cookies de la requête et Cookies de la réponse proviennent des en-têtes HTTP de la ressource. Les données Domaine, Chemin d'accès et Expiration/Max-Age proviennent du protocole Chrome DevTools.

Problèmes Chromium #856777, #993843

Afficher les valeurs des cookies

Cliquez sur une ligne du 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 mé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 média prefers-color-scheme: dark est vraie, cela signifie que votre utilisateur a défini le mode sombre pour son système d'exploitation et qu'il préfère les UI en mode sombre.

Ouvrez le menu de commandes, 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 (zone du milieu), le volet "Styles" (zone de droite) affiche le CSS appliqué lorsque cette requête média est vraie et que la fenêtre d'affichage affiche les styles du mode sombre (zone 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 remplacer la géolocalisation, mais aussi d'émuler des fuseaux horaires arbitraires et de tester leur impact sur vos applications Web. Cette nouvelle fonctionnalité améliore également la fiabilité de l'émulation de géolocalisation. Auparavant, les applications Web pouvaient détecter l'usurpation de localisation en comparant la localisation à celle du fuseau horaire local de l'utilisateur. Maintenant que l'émulation de la géolocalisation et du fuseau horaire est couplée, cette catégorie de non-concordances est éliminée.

Mises à jour de la couverture du code

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

L'onglet "Couverture" utilise désormais de nouvelles couleurs pour représenter le code utilisé et inutilisé. Il a été prouvé que cette combinaison de couleurs est plus accessible aux personnes souffrant de déficiences de la vision des couleurs. La barre rouge à gauche représente le code inutilisé, et la barre bleuâtre à droite représente le code utilisé.

La nouvelle zone de texte Filtrer par type vous permet de filtrer les informations de couverture par type : n'afficher que 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. Si vous cliquez sur les marques rouges ou bleutées à côté du numéro de ligne, l'onglet "Couverture" s'ouvre et le fichier est mis en surbrillance.

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, 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 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, les outils de développement proposent un paramètre permettant de personnaliser votre préférence d'indentation (2, 4 ou 8 espaces, ou des tabulations). Récemment, ce paramètre était pratiquement inutile, car les panneaux "Console" et "Sources" l'ignoraient. Ce bug est désormais corrigé.

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

Problème Chromium #977394

Nouveaux raccourcis pour la navigation au curseur

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

Problème Chromium #983874

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.