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

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

Kayce Basques

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 à Cookies pour comprendre pourquoi les cookies de requête ou de réponse de cette ressource ont été bloqués. Voir Modifications du comportement par défaut sans SameSite pour comprendre pourquoi vous pourriez en voir davantage bloqué les cookies dans Chrome 76 et versions ultérieures.

Onglet Cookies

L'onglet Cookies.

Les cookies de demande en jaune n'ont pas été envoyés par fil. Ils sont masqués par défaut. Cliquez sur Afficher les cookies de requête filtrés afin de les afficher.
Des cookies de réponse jaunes ont été envoyés par fil, mais n'ont pas été stockés.
Passez la souris sur Plus d'informations. pour savoir pourquoi un cookie a été bloqué(e).
La plupart des données des tableaux Cookies de requête et Cookies de réponse proviennent du les en-têtes HTTP associés à cette ressource. Les données relatives au domaine, au chemin d'accès et à l'expiration et l'âge maximal proviennent du Protocole des outils pour les développeurs Chrome

Problèmes Chromium : n° 856777, #993843

Afficher les valeurs des cookies

Cliquez sur une ligne du volet Cookies pour afficher la valeur de ce cookie.

Affichage de la valeur d'un cookie.

Problème Chromium n° 462370

Simuler différentes préférences de préférences de couleur et de mouvement réduit

La requête média prefers-color-scheme vous permet d'adapter le style de votre site à celui de l'internaute. préférences. Par exemple, si la requête média prefers-color-scheme: dark est "true", cela signifie que l'utilisateur a défini son système d'exploitation en mode sombre et préfère les interfaces utilisateur en mode sombre.

Ouvrez le menu de commandes, exécutez la commande Show Rendering, puis définissez l'option Emulate CSS media le menu déroulant "features-color-scheme" pour déboguer votre prefers-color-scheme: dark et Styles prefers-color-scheme: light.

préfères-color-scheme: sombre

Lorsque prefers-color-scheme: dark est défini (encadré du milieu), le volet "Styles" (cadre de droite) affiche le code CSS qui est appliqué lorsque cette requête média est vraie et que la fenêtre d'affichage affiche les styles en mode sombre (case de gauche).

Vous pouvez également simuler prefers-reduced-motion: reduce à l'aide de la fonctionnalité d'émulation multimédia CSS. le menu déroulant "prefers-reduced-motion" situé à côté de la fonctionnalité multimédia CSS "prefers-color-scheme" ; liste déroulante.

Problème Chromium n° 1004246

Émulation de fuseau horaire

Désormais, l'onglet "Capteurs" vous permet non seulement de remplacer la géolocalisation, mais aussi d'émuler des fuseaux horaires et tester l'impact sur vos applications Web. Étonnamment, cette nouvelle fonctionnalité améliore de la fiabilité de l'émulation de la géolocalisation. Auparavant, les applications Web pouvaient détecter le spoofing de position en utilisant en faisant correspondre l'emplacement avec le fuseau horaire local de l'utilisateur. Maintenant que la géolocalisation et l'émulation de fuseau horaire sont couplés, cette catégorie de non-concordance est éliminée.

Mises à jour de la couverture de code

L'onglet Couverture peut vous aider à retrouver les codes JavaScript et CSS inutilisés.

L'onglet Couverture utilise à présent de nouvelles couleurs pour représenter le code utilisé et inutilisé. Cette combinaison de couleurs est s'est avéré plus accessible aux personnes malvoyantes des couleurs. La barre rouge sur la gauche qui représente le code non utilisé et la barre bleue à droite représente le code utilisé.

La nouvelle zone de texte Filtre "Type de couverture" vous permet de filtrer les informations en fonction de leur type: afficher uniquement la couverture JavaScript, uniquement du code CSS ou afficher tous les types de couvertures.

Onglet "Couverture"

Le panneau "Sources" affiche les données de couverture de code lorsqu'elles sont disponibles. Cliquer sur les marques rouges ou bleues qui se trouve à côté du numéro de ligne, ouvre l'onglet "Couverture" et met le fichier 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 code utilisé.

Problèmes Chromium : #1003671, #1004185

Déboguer pourquoi 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 à Initiator. pour comprendre pourquoi la ressource a été demandée. La section Pile d'appel des requêtes décrit les pile d'appel JavaScript menant à la requête réseau.

Onglet "Initiateur"

Onglet Initiator (Initiateur)

Problèmes Chromium : 963183, 842488

Les panneaux Console et Sources respectent de nouveau les préférences de retrait.

Depuis longtemps, les outils de développement proposent un paramètre permettant de personnaliser votre préférence en termes de retrait sur 2 espaces, 4 8 espaces ou des tabulations. Récemment, ce paramètre n'a plus vraiment d'utilité, car la console et Les panneaux de sources ignoraient le paramètre. Ce bug est maintenant corrigé.

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

Problème Chromium n° 977394

Nouveaux raccourcis pour la navigation avec le curseur

Appuyez sur Ctrl+P dans le panneau "Console" ou "Sources" pour déplacer le curseur sur la ligne au-dessus. Appuyer Ctrl+N pour placer le curseur sur la ligne en dessous.

Problème Chromium n° 983874

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.