Comment inspecter et modifier les cookies dans Chrome DevTools
Lorsque l’authentification échoue, que les sessions expirent de manière inattendue ou que l’état côté client se comporte étrangement, les cookies sont généralement le premier endroit où chercher. Chrome DevTools vous offre une vue directe sur chaque cookie défini par votre page — et vous permet de les modifier sans écrire une seule ligne de code.
Voici exactement comment utiliser le panneau des cookies de Chrome DevTools pour inspecter, ajouter, modifier et supprimer des cookies pendant le développement.
Points clés à retenir
- Accédez au panneau des cookies via Application → Storage → Cookies dans Chrome DevTools pour visualiser tous les cookies d’une origine donnée.
- Chaque ligne de cookie expose des champs critiques comme Domain, Path, SameSite, HttpOnly et Secure — comprendre ces attributs est essentiel pour déboguer les problèmes d’authentification et de session.
- Vous pouvez ajouter, modifier et supprimer des cookies directement dans le panneau Application sans écrire de code.
- Utilisez l’onglet Cookies du panneau Network pour vérifier quels cookies sont réellement envoyés dans les requêtes et reçus dans les réponses au niveau HTTP.
- Les cookies tiers apparaissent avec des icônes d’avertissement dans le panneau Application, vous aidant à identifier les problèmes de cookies intersites alors que les restrictions de confidentialité des navigateurs se renforcent.
Ouvrir le panneau des cookies de Chrome DevTools
- Ouvrez Chrome DevTools avec
F12(Windows/Linux) ouCmd + Option + I(Mac). - Cliquez sur l’onglet Application.
- Dans la barre latérale gauche, développez Storage → Cookies.
- Sélectionnez une origine pour visualiser ses cookies.
Vous verrez un tableau listant chaque cookie associé à cette origine.
Comprendre les champs des cookies
Chaque ligne du tableau des cookies représente un cookie. Voici ce que signifie chaque colonne et pourquoi c’est important lorsque vous déboguez des cookies dans Chrome DevTools :
| Champ | Ce qu’il vous indique |
|---|---|
| Name | La clé du cookie |
| Value | Les données stockées (cochez Show URL-decoded pour décoder les valeurs encodées en pourcentage) |
| Domain | Quels hôtes reçoivent ce cookie — .example.com inclut les sous-domaines, tandis que sub.example.com ne le fait pas |
| Path | La portée du chemin URL requise pour que le navigateur envoie le cookie |
| Expires / Max-Age | Date d’expiration, ou Session pour les cookies qui s’effacent à la fin de la session du navigateur |
| Size | Taille du cookie en octets (calculée automatiquement, non modifiable) |
| HttpOnly | Si coché, JavaScript ne peut pas lire ce cookie — il n’est visible que via DevTools ou le panneau Network |
| Secure | Si coché, le cookie ne se transmet que via HTTPS |
| SameSite | Strict, Lax ou None — contrôle le comportement d’envoi intersite |
| Partition Key | Présent sur les cookies partitionnés (CHIPS) — affiche le site de premier niveau propriétaire de cette partition de stockage |
Utilisez la zone Filter pour rechercher par nom ou valeur lorsqu’une page définit de nombreux cookies. Les cookies partitionnés (CHIPS) font partie des nouveaux modèles de confidentialité des navigateurs et leur statut de prise en charge peut être suivi sur https://webstatus.dev/features/partitioned-cookies.
Comment ajouter, modifier et supprimer des cookies
Ajouter un cookie :
- Double-cliquez sur une ligne vide en bas du tableau.
- Saisissez un nom et une valeur, puis appuyez sur
Entrée. - DevTools remplit automatiquement les valeurs par défaut pour les autres champs.
Modifier un cookie :
- Double-cliquez sur n’importe quel champ pour le modifier en ligne.
- Le champ Size se met à jour automatiquement — tout le reste est modifiable.
- DevTools met en évidence les valeurs invalides en rouge.
- Utilisez Only show cookies with an issue pour filtrer les entrées valides et vous concentrer sur les problèmes.
Supprimer des cookies :
- Sélectionnez une ligne de cookie et cliquez sur Delete selected dans la barre d’action.
- Cliquez sur Clear all pour effacer tous les cookies de l’origine sélectionnée.
Ceci est particulièrement utile lors du test des flux de connexion — vous pouvez manuellement faire expirer un cookie de session ou modifier une valeur de jeton pour vérifier comment votre application gère les cas limites.
Discover how at OpenReplay.com.
Utiliser le panneau Network pour déboguer les en-têtes de cookies
Le panneau Application est votre espace de travail pour modifier les cookies. Le panneau Network est l’endroit où vous vérifiez ce qui est réellement envoyé et reçu.
Ouvrez le panneau Network, cliquez sur n’importe quelle requête, puis sélectionnez l’onglet Cookies. Vous verrez deux sections :
- Request Cookies — ce que le navigateur a envoyé au serveur.
- Response Cookies — ce que le serveur a demandé au navigateur de définir via les en-têtes
Set-Cookie.
Cette distinction est importante car JavaScript ne peut pas lire directement l’en-tête de réponse Set-Cookie. Si un cookie n’apparaît pas après la connexion, vérifiez d’abord le panneau Network pour confirmer que le serveur le définit réellement. Le comportement de l’en-tête Set-Cookie est documenté dans la référence MDN Set-Cookie.
Identifier les cookies tiers
Dans le panneau Application, les cookies tiers — ceux définis par un domaine différent de la page de premier niveau actuelle — apparaissent avec une icône d’avertissement. Ces cookies portent généralement SameSite=None et nécessitent l’attribut Secure. Survolez l’icône pour plus de détails. Dans les versions modernes de Chrome DevTools, les avertissements de confidentialité des cookies et les diagnostics associés peuvent également apparaître directement dans la Console.
Alors que les politiques de confidentialité des navigateurs continuent d’évoluer, Chrome et d’autres navigateurs restreignent de plus en plus le comportement des cookies tiers. Tester le comportement des cookies de votre site sous ces restrictions mérite d’être intégré dans votre flux de travail de débogage régulier.
Conclusion
Le panneau des cookies de Chrome DevTools vous donne tout ce dont vous avez besoin pour inspecter et modifier les cookies sans quitter le navigateur. Utilisez le panneau Application pour l’inspection du stockage et les modifications manuelles. Utilisez le panneau Network pour vérifier quels cookies sont réellement envoyés et reçus au niveau HTTP. Ensemble, ces deux panneaux couvrent le flux de travail complet de débogage des cookies pour l’authentification, les sessions et la gestion de l’état côté client.
Si vous souhaitez un matériel de référence plus approfondi sur la façon dont Chrome expose les cookies et les attributs associés dans DevTools, consultez le guide officiel de débogage des cookies dans Chrome DevTools.
FAQ
Le serveur peut ne pas envoyer correctement l'en-tête Set-Cookie, ou les attributs Domain ou Path du cookie peuvent ne pas correspondre à la page actuelle. Ouvrez le panneau Network, trouvez la requête de connexion et vérifiez l'onglet Response Cookies pour confirmer que l'en-tête est présent et correctement formé.
Un cookie de session n'a pas de valeur Expires ou Max-Age et affiche Session dans la colonne d'expiration. Il est supprimé à la fin de la session du navigateur. Un cookie persistant a une date d'expiration spécifique et reste stocké jusqu'à ce que cette date soit passée ou que le cookie soit supprimé manuellement.
L'icône d'avertissement indique généralement un cookie tiers ou un cookie avec un attribut SameSite manquant ou mal configuré. Survolez l'icône pour un résumé, et des diagnostics supplémentaires peuvent apparaître dans la Console de DevTools.
Non. Les cookies HttpOnly sont inaccessibles à JavaScript par conception, ce qui les protège des attaques de cross-site scripting. Cependant, vous pouvez les visualiser et les modifier directement dans le panneau Application de Chrome DevTools en double-cliquant sur le champ concerné.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
