如何在浏览器调试工具中捕获cookie变化？能否设置相关断点

一、用浏览器DevTools直接定位变更触发位置 #

• 针对指定Cookie设置变更断点：打开DevTools切换到「应用（Application）」面板，在左侧导航找到「Cookies」分类，选中当前应用对应的域名条目，在右侧的Cookie列表中找到异常消失的目标Cookie，右键点击对应行，选择「Break on > Cookie change」。后续只要该Cookie被修改、删除，DevTools会自动暂停JS执行，直接跳转到触发变更的代码位置。
• 回溯Cookie变更的时间记录：同个Cookie面板顶部，开启「显示时间戳（Show timestamps）」开关，所有Cookie的新增、修改、删除操作都会留存带时间戳的日志，哪怕断点没有拦住操作，也能通过时间戳缩小排查范围，锁定Cookie最后存在的时间节点。

二、通过全局代码监听全量Cookie变更 #

• 高版本浏览器原生事件监听：在应用入口的JS代码最靠前的位置注册cookiechange全局事件，只要Cookie发生变更就会触发回调，直接输出触发操作的调用栈：

  document.addEventListener('cookiechange', (event) => {
    console.log('检测到Cookie变更', {
      名称: event.name,
      旧值: event.oldValue,
      新值: event.newValue,
      操作类型: event.deleted ? '被删除' : '被修改',
      触发代码栈: new Error().stack
    })
  })
  

• 低版本浏览器兜底拦截：如果使用的浏览器不支持原生cookiechange事件，可以通过重写document.cookie的读写访问器，拦截所有JS对Cookie的写入、删除操作：

  const originalCookieDesc = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');
  Object.defineProperty(document, 'cookie', {
    set(writeValue) {
      const [cookieContent] = writeValue.split(';');
      const [cookieName] = cookieContent.split('=');
      console.log(`捕获到Cookie写入操作：${cookieName}`, writeValue, new Error().stack);
      return originalCookieDesc.set.call(document, writeValue);
    },
    get() {
      return originalCookieDesc.get.call(document);
    }
  })
  

  只要代码把Cookie的Expires/Max-Age参数设置为过去时间，触发浏览器删除Cookie，这个拦截器都会直接记录到对应的触发位置。

三、长有效期Cookie提前消失的常见诱因排查 #

• 排查Cookie的域名、路径配置是否匹配：如果设置Cookie时的域名、路径参数和后续发起删除操作的域不匹配，可能存在两个同名Cookie，被删除的并非你设置的那个长有效期Cookie
• 排查跨域请求的响应头：在DevTools的「网络（Network）」面板，筛选所有响应中带Set-Cookie头的请求，查看是否有接口把同名Cookie的Max-Age设为0（即删除Cookie），这类服务端触发的删除操作不会被前端JS拦截器捕获
• 核对浏览器的Cookie清理策略：检查浏览器是否开启了定期自动清除Cookie、退出时清除所有Cookie、拦截第三方Cookie的隐私设置，这类浏览器层面的清理不受Cookie本身的过期时间控制

内容的提问来源于stack exchange，提问作者Dims