登录失败时,先把这份浏览器证据记清楚
把登录提交、页面跳转和后续身份确认分开记录,用浏览器证据缩小问题范围。附 Cookie 与跨域线索的检查边界、可脱敏模板,以及分享截图和 HAR 前需要删除的信息。
执行信息
- 测试环境
- Chrome DevTools;网站登录流程;通用排查指南,未做真实账号登录测试
- 输入
- 请查看正文中的输入说明
- 产出
- 请查看正文中的产出说明
- 实测结果
- 请以作者提供的实测记录为准
AgentField 编辑整理|浏览器排查指南。依据官方文档整理;文中的登录过程为虚构示例,未对任何真实账号进行登录测试。
点击登录没反应、跳转后又回到登录页、刷新后退出,可能发生在不同环节。先把一次操作串起来:按钮之后有没有请求、提交得到什么响应、跳转后页面怎样确认身份。本文适合网站维护者收集证据,不需要把密码或会话交给别人。
一、保留现场,录下一次操作
在你有权排查的站点和账号上打开 Chrome 开发者工具,进入 Network。先记下浏览器版本、普通或无痕窗口、发生时间、页面路径和屏幕提示,再清空 Network 的请求列表,勾选 Preserve log,复现一次。它能保留跨页面加载的请求;清空请求列表不等于清除 Cookie。此时先不要删除站点数据,以免丢掉原来的失败条件。Chrome:请求记录与保留日志
涉及验证码或第三方登录时,分别记下“已进入哪个页面、在哪一步停止”。不要连续重放登录请求,也不要把验证码填进排查记录。
二、把提交、跳转和身份确认分开
按实际时间顺序,给每一步留一行:
- 提交:按钮点击后,有没有出现相关请求;记录脱敏路径、方法、HTTP 状态,以及经过删减的业务提示。没有看到时,先确认录制和筛选条件,再检查 Console,不直接断言后端没工作。
- 跳转:保留跳转前后页面路径和顺序。只看 Fetch/XHR 可能漏掉页面导航,可切回 All 或查看 Doc。回调地址的参数、片段可能含临时凭据,不复制完整地址。
- 身份确认:找到应用用于确认当前身份的后续请求或页面结果,记录是否仍提示未登录。接口名称由项目决定,不能假设所有网站都有同一个“当前用户”接口。
选中请求后,Headers 可核对地址和状态,Response 可查看响应内容;只摘录必要信息。登录提交返回 200,并不足以证明后续身份确认成功。Chrome:查看请求与响应
三、有相应信号,再检查 Cookie 或跨域
采用 Cookie 会话的网站,可在请求的 Cookies 页签查看发送情况与响应 Cookie 的阻止提示;遇到提示时记录原因文字。需要核对保存状态时,在 Application → Storage → Cookies 查看对应站点,只记录“是否存在”及必要的 Domain、Path、Secure、SameSite 等属性,不复制 Value。存在 Cookie 也不能证明服务端仍接受该会话。Chrome:Cookie 检查
没有 Cookie 不一定是故障,有些应用使用其他认证方式。先确认项目设计,不要为凑证据去复制本地存储中的令牌。
若 Console 出现 CORS 提示,把它作为一条线索:记录发起页面和接口的来源是否不同,以及浏览器错误摘要。来源需比较协议、主机和端口。浏览器脚本受跨域访问规则限制,泛化的“请求失败”不能自动归因于 CORS,也不要把放开所有来源当作通用修复。MDN:CORS 与错误定位