chrome中查看cookie有三种方式:一、application面板可结构化查看编辑所有cookie;二、network面板捕获请求头中的cookie及响应头的set-cookie;三、console执行document.cookie读取非httponly cookie。

如果您希望查看Chrome浏览器中当前网站的Cookie数据,最直接的方式是通过内置的开发者工具。以下是具体操作步骤:
一、使用Application面板查看Cookie
Application面板专用于管理网站资源,包括存储在本地的Cookie、LocalStorage、SessionStorage等。它提供结构化视图,支持查看、编辑、删除和过滤Cookie。
1、在Chrome中打开目标网站(例如 https://example.com)。
2、按下 F12 或 Ctrl+Shift+I(Windows/Linux)或 Cmd+Option+I(macOS)打开开发者工具。
3、点击顶部标签栏中的 Application 选项卡。
4、在左侧边栏中展开 Storage,然后点击 Cookies。
5、右侧将显示当前域名下的所有Cookie条目,包括名称、值、域、路径、过期时间、HttpOnly、Secure等字段。
二、通过Network面板捕获并查看请求Cookie
Network面板可实时记录HTTP请求与响应头,其中包含请求时携带的Cookie(Request Headers中的 Cookie 字段)及服务器设置的Set-Cookie响应头,适用于调试登录态或跨域Cookie行为。
1、打开开发者工具(F12)并切换至 Network 标签页。
2、勾选 Preserve log(防止页面跳转后清空日志)。
3、刷新当前页面或执行触发网络请求的操作(如点击登录按钮)。
4、在请求列表中找到任意一个主文档请求(通常为第一行,Name列为页面URL),点击选中。
5、在下方详情区域切换到 Headers 子标签,向下滚动至 Request Headers 部分,查找 Cookie: 行,其后即为本次请求携带的Cookie字符串。
6、继续向下查看 Response Headers,可找到 Set-Cookie: 字段,用于确认服务器是否下发了新Cookie及其属性。
三、使用Console面板执行JavaScript读取document.cookie
该方法仅能读取未标记 HttpOnly 的Cookie,适合快速验证前端可访问的Cookie内容,但存在安全限制和编码问题(如中文值被URL编码)。
1、打开开发者工具并切换至 Console 标签页。
2、输入以下命令并回车:document.cookie。
3、控制台将返回一个以分号分隔的字符串,格式为 name1=value1; name2=value2。
4、如需解析为对象形式,可粘贴并执行以下代码:
Object.fromEntries(document.cookie.split('; ').map(pair => pair.split('=').map(decodeURIComponent)))。











