当然有办法！这是前端调试里超实用的技巧，我平时排查这类问题全靠浏览器开发者工具，下面给你分主流浏览器和手动注入两种方案细说：

这俩浏览器的操作几乎一致，步骤超简单：

• 打开开发者工具：按F12或者右键页面选「检查」就行，快捷键Ctrl+Shift+I也能打开
• 切换到Application标签页，在左侧导航栏展开「Storage」→「Cookies」，找到你要监控的Cookie所属的域名
• 右键点击目标Cookie的名称，选择Break on cookie changes
• 现在刷新页面或者触发可能设置Cookie的操作，只要代码尝试修改/设置这个Cookie，浏览器会自动暂停在执行代码的位置，你看右侧的Call Stack（调用栈）就能一步步回溯到具体的代码段啦

Firefox的逻辑类似，只是标签名略有不同：

• 打开开发者工具（快捷键F12或Ctrl+Shift+I）
• 切换到存储标签页，展开「Cookies」找到目标域名和对应的Cookie
• 右键点击该Cookie，选择Break on change
• 触发相关操作后，代码会在修改Cookie时自动暂停，通过调用栈就能找到设置Cookie的源头代码

如果上面的方法没生效（比如某些框架用特殊方式操作Cookie），可以手动重写document.cookie的赋值逻辑来加断点：

// 保存原始的cookie设置方法
const originalCookieSetter = Object.getOwnPropertyDescriptor(document, 'cookie').set;
// 重写setter逻辑
Object.defineProperty(document, 'cookie', {
  set: function(value) {
    // 替换成你要监控的Cookie名称
    const targetCookieName = '你的Cookie名称';
    // 检查当前设置的是否是目标Cookie
    if (value.startsWith(`${targetCookieName}=`)) {
      // 这里触发断点
      debugger;
    }
    // 执行原始的Cookie设置逻辑
    return originalCookieSetter.call(this, value);
  }
});

• 把代码里的你的Cookie名称替换成实际的Cookie名，然后在开发者工具的Console标签页执行这段代码
• 触发设置Cookie的操作，代码会自动在debugger处暂停，此时查看调用栈就能精准定位到设置代码

哦对了，要是发现Cookie是通过HTTP响应头的Set-Cookie字段设置的（不是JS代码），那你得去Network标签页里找对应的请求，查看响应头就能找到来源啦。

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