如何在 Chrome DevTools 中检查和编辑 Cookie
当身份验证失败、会话意外过期或客户端状态表现异常时,Cookie 通常是首先需要检查的地方。Chrome DevTools 为您提供了一个直接查看页面设置的每个 Cookie 的视图——并且允许您在不编写任何代码的情况下修改它们。
以下是如何在开发过程中使用 Chrome DevTools Cookie 面板来检查、添加、编辑和删除 Cookie 的详细说明。
核心要点
- 通过 Chrome DevTools 中的 Application → Storage → Cookies 访问 Cookie 面板,查看给定源的所有 Cookie。
- 每个 Cookie 行都显示关键字段,如 Domain、Path、SameSite、HttpOnly 和 Secure——理解这些字段对于调试身份验证和会话问题至关重要。
- 您可以直接在 Application 面板中添加、编辑和删除 Cookie,无需编写任何代码。
- 使用 Network 面板的 Cookies 选项卡来验证在 HTTP 层级上实际发送的请求和接收的响应中包含哪些 Cookie。
- 第三方 Cookie 在 Application 面板中会显示警告图标,帮助您识别跨站 Cookie 问题,因为浏览器隐私限制正在收紧。
打开 Chrome DevTools Cookie 面板
- 使用
F12(Windows/Linux)或Cmd + Option + I(Mac)打开 Chrome DevTools。 - 点击 Application 选项卡。
- 在左侧边栏中,展开 Storage → Cookies。
- 选择一个源以查看其 Cookie。
您将看到一个表格,列出与该源关联的每个 Cookie。
理解 Cookie 字段
Cookie 表格中的每一行代表一个 Cookie。以下是每列的含义以及在 Chrome DevTools 中调试 Cookie 时为什么重要:
| 字段 | 说明 |
|---|---|
| Name | Cookie 的键名 |
| Value | 存储的数据(勾选 Show URL-decoded 可解码百分号编码的值) |
| Domain | 哪些主机会接收此 Cookie——.example.com 包含子域名,而 sub.example.com 不包含 |
| Path | 浏览器发送 Cookie 所需的 URL 路径范围 |
| Expires / Max-Age | 过期日期,或 Session 表示在浏览器会话结束时清除的 Cookie |
| Size | Cookie 大小(以字节为单位,自动计算,不可编辑) |
| HttpOnly | 如果勾选,JavaScript 无法读取此 Cookie——仅通过 DevTools 或 Network 面板可见 |
| Secure | 如果勾选,Cookie 仅通过 HTTPS 传输 |
| SameSite | Strict、Lax 或 None——控制跨站发送行为 |
| Partition Key | 出现在分区 Cookie(CHIPS)上——显示拥有此 Cookie 存储分区的顶级站点 |
当页面设置了许多 Cookie 时,使用 Filter 框按名称或值搜索。分区 Cookie(CHIPS)是较新的浏览器隐私模型的一部分,其支持状态可以在 https://webstatus.dev/features/partitioned-cookies 上跟踪。
如何添加、编辑和删除 Cookie
添加 Cookie:
- 双击表格底部的空行。
- 输入名称和值,然后按
Enter。 - DevTools 会自动为其他字段填充默认值。
编辑 Cookie:
- 双击任何字段以内联编辑。
- Size 字段会自动更新——其他所有字段都可编辑。
- DevTools 会以红色突出显示无效值。
- 使用 Only show cookies with an issue 过滤掉有效条目,专注于问题。
删除 Cookie:
- 选择一个 Cookie 行,然后点击操作栏中的 Delete selected。
- 点击 Clear all 清除所选源的所有 Cookie。
这在测试登录流程时特别有用——您可以手动使会话 Cookie 过期或更改令牌值,以验证应用程序如何处理边缘情况。
Discover how at OpenReplay.com.
使用 Network 面板调试 Cookie 标头
Application 面板是您编辑 Cookie 的工作区。Network 面板是您验证实际发送和接收内容的地方。
打开 Network 面板,点击任何请求,然后选择 Cookies 选项卡。您将看到两个部分:
- Request Cookies——浏览器发送到服务器的内容。
- Response Cookies——服务器通过
Set-Cookie标头指示浏览器设置的内容。
这种区别很重要,因为 JavaScript 无法直接读取 Set-Cookie 响应标头。如果登录后 Cookie 没有出现,请首先检查 Network 面板以确认服务器确实在设置它。Set-Cookie 标头的行为记录在 MDN Set-Cookie 参考文档中。
识别第三方 Cookie
在 Application 面板中,第三方 Cookie——由与当前顶级页面不同的域设置的 Cookie——会显示警告图标。这些 Cookie 通常带有 SameSite=None 并需要 Secure 属性。将鼠标悬停在图标上可查看详细信息。在现代 Chrome DevTools 中,Cookie 隐私警告和相关诊断信息也可能直接出现在 Console 中。
随着浏览器隐私政策的不断发展,Chrome 和其他浏览器越来越多地限制第三方 Cookie 的行为。在这些限制下测试您网站的 Cookie 行为值得纳入您的常规调试工作流程。
总结
Chrome DevTools Cookie 面板为您提供了在不离开浏览器的情况下检查和编辑 Cookie 所需的一切。使用 Application 面板进行存储检查和手动编辑。使用 Network 面板验证在 HTTP 层级上实际发送和接收的 Cookie。这两个面板共同涵盖了身份验证、会话和客户端状态管理的完整 Cookie 调试工作流程。
如果您想要更深入的参考资料,了解 Chrome 如何在 DevTools 中公开 Cookie 和相关属性,请参阅官方的 Chrome DevTools Cookie 调试指南。
常见问题
服务器可能没有正确发送 Set-Cookie 标头,或者 Cookie 的 Domain 或 Path 属性可能与当前页面不匹配。打开 Network 面板,找到登录请求,并检查 Response Cookies 选项卡以确认标头存在且格式正确。
会话 Cookie 没有 Expires 或 Max-Age 值,在过期列中显示 Session。它在浏览器会话结束时被删除。持久性 Cookie 有特定的过期日期,并保持存储状态直到该日期过去或手动删除 Cookie。
警告图标通常表示第三方 Cookie 或缺少或配置错误的 SameSite 属性的 Cookie。将鼠标悬停在图标上可查看摘要,其他诊断信息可能会出现在 DevTools Console 中。
不可以。HttpOnly Cookie 在设计上对 JavaScript 不可访问,这可以保护它们免受跨站脚本攻击。但是,您可以通过双击相关字段直接在 Chrome DevTools Application 面板中查看和编辑它们。
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.
