掌握如何查看浏览器Cookie是前端调试和安全分析的基础技能。不同浏览器操作略有差异，以下是详细步骤：
🌐 通用快捷键操作（适用于大多数浏览器）
- 在网页上右键点击 → 选择 "检查" (Inspect)
- 打开开发者工具（
Ctrl+Shift+I/Cmd+Opt+I） - 转到 Application/存储 标签 → 左侧选择 Cookies
🧭 各浏览器详细查看路径
🔵 Google Chrome
- 点击右上角 ⋮ → 设置 → 隐私和安全
- 选择 Cookie 及其他网站数据 → 查看所有网站数据和 Cookie
- 搜索框可过滤域名（如
example.com）
开发者工具法（更推荐）：
F12 → Application → Storage → Cookies可查看各Cookie的详细属性：
- Name/Value（内容）
- Domain（作用域）
- Path（路径）
- Expires/Max-Age（过期时间）
- Size（大小）
- HttpOnly（禁止JS读取）
- Secure（HTTPS专属）
🦊 Mozilla Firefox
常规查看：
- 点击右上角 ☰ → 设置
- 左侧菜单选择 隐私与安全 → Cookies 和网站数据 → 管理数据...
- 搜索域名查看对应Cookie
开发者工具法：
F12 → 存储 → Cookie特殊功能：可导出所有Cookie为JSON文件用于分析
🟢 Microsoft Edge
- 点击右上角 ... → 设置 → Cookie 和网站权限
- 选择 管理和删除 Cookie 和网站数据 → 查看所有 Cookie 和网站数据
- 使用顶部搜索框过滤域名
开发者工具：
F12 → Application → Storage → Cookies（操作与Chrome高度一致）
🍎 Safari（macOS/iOS）
macOS操作：
- 菜单栏 Safari → 设置 → 隐私 → 管理网站数据...
- 搜索域名查看明细
开发者工具法（需先启用）：
Safari → 设置 → 高级 → 勾选"在菜单栏显示开发选项"随后：
开发 → 显示 Web 检查器 → 存储 → CookieiOS设备特殊操作：
1. 前往 **设置** → **Safari** → **高级** → **网站数据**
2. 搜索域名 → 点击进入查看详细Cookie⚙️ 进阶操作技巧
- 按域名过滤
- 在开发者工具Cookies面板顶部输入域名（如
.example.com）
- 实时监控变化
- 打开开发者工具 → Network标签
- 刷新页面 → 点击任意请求 → 查看 Request Headers 中的
Cookie发送情况
- 命令行操作（Chrome）
// 控制台直接查看当前域名所有Cookie
console.log(document.cookie);
// 查看特定Cookie
console.log(
document.cookie.split('; ')
.find(row => row.startsWith('sessionId='))
);- 第三方工具扩展
- EditThisCookie（Chrome插件）
- Cookie-Editor（Firefox扩展）
⚠️ 重要注意事项
- HttpOnly Cookie不可见
标记为HttpOnly的Cookie不会出现在document.cookie中，只能在开发者工具的Application面板查看 - 作用域限制
example.com的Cookie无法在sub.example.com查看- Secure Cookie仅通过HTTPS显示
- 隐私模式差异
隐身窗口中的Cookie在关闭后自动清除，无法永久查看
🛡️ 安全警示
浏览器Cookie常包含敏感会话信息，使用时需注意：
- 切勿分享截图：避免暴露包含
session_token等敏感字段的截图 - 禁用恶意插件：某些插件会窃取Cookie，定期检查已安装扩展
- 清除敏感数据：调试完成后使用快捷键
Ctrl+Shift+Del清除浏览数据
🔐 安全提示：在公共电脑调试时，务必勾选"退出时清除Cookie"，防止会话被劫持。
