devtools application面板是唯一能完整查看cookie所有属性（secure、samesite、expires、httponly）的地方；document.cookie仅返回非httponly的键值对字符串；network面板用于排查set-cookie响应头与cookie请求头是否匹配。
直接看 document.cookie 只能拿到非 HttpOnly 的 Cookie，且是拼接字符串；真要完整、可编辑、带属性的查看，必须用 DevTools 的 Application 面板——这是唯一能同时看到 Secure、SameSite、Expires 和是否 HttpOnly 的地方。
Application 面板里找 Cookie 列表
打开 DevTools 后不点 Console，先切到 Application 标签页，左侧展开 Cookies 节点，下面列出的是当前页面协议 + 域名（比如 https://example.com），不是所有域名都自动显示，只显示当前页面实际访问过的源。
- 如果点开后右侧空白，说明该域名下没存任何 Cookie，或当前页面没触发过相关请求（比如跳转前还没加载完）
- 同个域名可能有多个条目，例如
https://api.example.com和https://www.example.com是分开的，不能互相看到对方的 Cookie - 点击某一条后，右侧表格里字段含义：
Name是键名，Value是值（可能被截断，鼠标悬停可看全量），Domain表示该 Cookie 允许发送到哪些域名，Path是路径前缀，Expires/Max-Age决定是否为会话 Cookie（显示为Session） -
HttpOnly列为 ✅ 时，document.cookie读不到它；Secure✅ 表示仅 HTTPS 下生效，HTTP 页面里这个 Cookie 直接被浏览器忽略
Console 里快速验证非 HttpOnly Cookie
在 Console 输入 document.cookie 回车，返回的是分号分隔的原始字符串，比如："auth_token=abc123; theme=light"。它不包含 HttpOnly 项，也不体现域、路径等元信息，但适合做简单存在性检查或调试前端逻辑。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 想转成对象方便取值？粘贴这行代码：
document.cookie.split('; ').map(x => x.split('=')).reduce((o, [k,v]) => (o[k] = v, o), {}) - 注意：如果值里含空格或特殊字符（如
=、;），这个简单拆分会出错，生产环境别依赖它解析 - 刷新页面后
document.cookie仍可读，但前提是 Cookie 没过期、没被清除、且当前 URL 匹配其Domain和Path
Network 面板抓 Set-Cookie 和 Cookie 请求头
当你怀疑 Cookie 没发出去、或服务器没正确下发，就得看 Network 面板。选中任意一个请求（比如登录接口），在右侧 Headers 里分别找两行：
-
Request Headers下的Cookie字段：浏览器实际发了哪些 Cookie 过去（同样不显示HttpOnly项） -
Response Headers下的Set-Cookie字段：服务器返回的设置指令，每条对应一个新 Cookie 或更新，里面明确写了Max-Age、Domain、Path、Secure、SameSite等属性 - 常见坑：
Set-Cookie的Domain写成.example.com却在sub.example.com发起请求，或者Path是/admin却在/user页面下访问，都会导致 Cookie 不携带
真正容易被忽略的是 SameSite 属性——现代浏览器默认按 Lax 处理，跨站 POST 请求（比如从 A 站提交表单到 B 站）若没显式设为 SameSite=None; Secure，Cookie 就不会带上，且 DevTools 不会高亮警告，只能靠比对 Network 里的 Set-Cookie 值和实际请求头是否一致来发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
