1. 引言：快递单号与隐私信封

想象你寄了一个包裹，快递单上写着收件人地址（Cookie 名）和你的电话（Cookie 值）。如果你把单号写在快递盒外，任何人都能看到。但如果用隐私信封（HttpOnly） 封起来，快递员能扫描到，但路边的人看不到。

浏览器中的 Cookie 也是这样：有些是公开的，有些被特意隐藏了。本文将教你如何查看浏览器中存储的所有 Cookie，并解释为什么有些 Cookie“看不见”。

---

2. Cookie 是什么？（小白必备）

Cookie 是网站存储在浏览器里的一小段文本数据，通常用于记录登录状态、用户偏好等。浏览器会在每次请求时自动携带符合条件的 Cookie，帮助服务器识别用户。

每个 Cookie 包含多个属性：

• Name / Value：键值对，存储具体数据。
• Domain / Path：决定哪些请求会携带这个 Cookie。
• Expires / Max-Age：控制 Cookie 存活时间。
• HttpOnly：如果为 true，JavaScript 无法读取该 Cookie。
• Secure：如果为 true，仅通过 HTTPS 传输。

---

3. 核心问题：为什么有些 Cookie“看不到”？

如果你在浏览器的开发者工具里能看到一个 Cookie，但用 document.cookie 却读不到，很可能是因为它被设置了 HttpOnly 属性。

HttpOnly 的作用：告诉浏览器“这个 Cookie 只能由 HTTP 请求携带，禁止 JavaScript 读取”。这是为了防止 XSS 攻击窃取敏感信息（如 Session ID）。

常见场景：登录后的 JSESSIONID 或 PHPSESSID 通常都会设置 HttpOnly，因此你无法通过 document.cookie 看到它们。

---

4. 如何查看 Cookie？（三种主要方法）

4.1 方法一：浏览器开发者工具（最推荐，能看到所有 Cookie）

无论 Cookie 是否设置了 HttpOnly，开发者工具都能看到。不同浏览器的操作略有差异：

Chrome / Edge

1. 打开目标网站。
2. 按 F12 打开开发者工具。
3. 点击 Application 标签页。
4. 左侧菜单找到 Storage → Cookies，展开后点击当前域名（如 https://example.com）。
5. 右侧表格显示所有 Cookie，包含 Name、Value、Domain、Path、HttpOnly、Secure 等属性。

小技巧：右键点击某一行可以复制 Cookie 的值，或直接删除它。

Firefox

1. 按 F12 打开开发者工具。
2. 点击 存储 标签页。
3. 左侧选择 Cookie，展开域名即可查看。

Safari

1. 先在菜单栏启用“开发”菜单：偏好设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”。
2. 菜单栏选择 开发 → 显示 Web 检查器。
3. 点击 存储 标签页，选择 Cookies。

4.2 方法二：JavaScript 快速查看（有限制）

在浏览器控制台中输入：

console.log(document.cookie);

特点：

• 只能看到没有设置 HttpOnly 的 Cookie。
• 输出的是一串用分号分隔的键值对（如 name1=value1; name2=value2）。
• 适合快速调试自己添加的普通 Cookie。

4.3 方法三：浏览器设置面板（管理存储）

这种方式可以查看某个域名下存了多少 Cookie，但不显示具体值。

• Chrome：地址栏输入 chrome://settings/content/all，搜索域名，点击“删除”或查看详情。
• Firefox：菜单栏 → 选项 → 隐私与安全 → Cookie 和站点数据 → 管理数据。

---

5. 方法对比表

方法	能否看到 HttpOnly	能否看到具体值	适用场景
开发者工具（Application）	✅ 能	✅ 能	调试所有 Cookie，推荐首选
document.cookie	❌ 不能	✅ 能（仅非 HttpOnly）	快速查看自己添加的非敏感 Cookie
浏览器设置面板	✅ 能	❌ 不能（仅统计）	批量清理 Cookie

---

6. 常见误区

误区	正解
“用 document.cookie 看不到的 Cookie 就是没存上”	❌ 可能是 HttpOnly 隐藏了，去开发者工具看。
“所有 Cookie 都能通过 JavaScript 删除”	❌ HttpOnly 的 Cookie 无法通过 JS 删除，只能通过服务端设置过期或浏览器手动清除。
“无痕模式下的 Cookie 开发者工具也看不到”	❌ 仍可看到，但关闭窗口后自动消失。

---

7. 实战建议

1. 调试登录态问题：优先用开发者工具检查 HttpOnly 的 Session Cookie 是否存在、过期时间是否合理。
2. 验证 HttpOnly 配置：如果希望 Cookie 不被 JS 读取，确认服务端设置了 HttpOnly；如果需要 JS 读取（如存储非敏感的用户偏好），则不要设置。
3. 排查跨域问题：查看 Domain 和 Path 是否匹配当前请求。

---

8. 总结

目标	推荐方法
查看所有 Cookie（含 HttpOnly）	开发者工具（Application / 存储）
快速查看非敏感 Cookie	document.cookie
批量清理 Cookie	浏览器设置面板

一句话记住：HttpOnly 的 Cookie 就像“隐私快递单”——快递员（服务器）能扫描，但路人（JavaScript）看不见。想彻底看清所有 Cookie，就用开发者工具的 Application 面板。