浏览器开发者工具提供四种查看Cookie方法：一、Application面板按域名分组显示完整属性；二、Console执行document.cookie获取字符串或解析为对象；三、Network面板检查请求头Cookie和响应头Set-Cookie；四、Application中搜索过滤特定Cookie。
如果您需要在网页开发或调试过程中检查当前页面设置的 Cookie，浏览器开发者工具提供了直接查看和管理 Cookie 的功能。以下是具体操作步骤：
一、通过 Application 面板查看 Cookie
Application 面板集中管理网站的本地存储资源，包括 Cookie、LocalStorage、SessionStorage 等，其中 Cookie 以域名分组展示，支持查看键名、值、过期时间、路径、域及安全属性。
1、在网页任意位置右键，选择“检查”或按快捷键 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS） 打开开发者工具。
2、点击顶部标签栏中的 Application 选项卡。
3、在左侧边栏展开 Cookies 节点，下方会列出当前页面所属协议与域名（如 https://example.com）。
4、点击该域名条目，右侧主区域即显示所有已设置的 Cookie，包含 Name、Value、Domain、Path、Expires/Max-Age、Size、HttpOnly、Secure、SameSite 等列。
二、通过 Console 面板执行 JavaScript 查看 Cookie
document.cookie 是浏览器提供的只读属性，返回当前页面可访问的 Cookie 字符串（不包含 HttpOnly 标记的项），适用于快速验证 Cookie 是否存在或获取其原始格式。
1、打开开发者工具并切换至 Console 面板。
2、输入 document.cookie 并按回车。
3、控制台将输出一个分号分隔的字符串，例如："session_id=abc123; theme=dark; lang=zh"。
4、如需结构化解析，可运行以下代码片段：document.cookie.split('; ').map(x => x.split('=')).reduce((o, [k,v]) => (o[k] = v, o), {})，结果将以对象形式显示键值对。
三、使用 Network 面板捕获 Cookie 传输过程
Network 面板可记录每次 HTTP 请求与响应的完整头信息，用于观察 Cookie 如何随请求发送（Cookie 请求头）及服务器如何设置新 Cookie（Set-Cookie 响应头）。
1、切换到 Network 面板，刷新页面或触发目标请求。
2、在请求列表中选中任意一条请求（如 HTML 文档或 XHR 请求）。
3、在右侧详情区点击 Headers 子标签。
4、向下滚动至 Request Headers 区域，查找 Cookie 行，查看浏览器发送的 Cookie 内容。
5、继续向下查看 Response Headers 区域，查找 Set-Cookie 行，确认服务器是否下发了新的 Cookie 及其属性。
四、过滤与搜索特定 Cookie
当 Cookie 数量较多时，可通过 Application 面板的搜索框快速定位目标项，支持按名称、值或属性进行模糊匹配。
1、确保已在 Application > Cookies 视图下。
2、在面板右上角找到放大镜图标旁的输入框，点击后输入关键词，例如 auth 或 token。
3、列表将实时筛选出名称或值中包含该关键词的所有 Cookie 条目。
4、若需进一步验证某 Cookie 是否生效，可手动双击其 Value 列修改内容（仅限非 HttpOnly 项），然后刷新页面观察行为变化。
