Chrome 开发工具如何显示 cookie答案

【问题标题】：How Chrome dev tools shows cookiesChrome 开发工具如何显示 cookie
【发布时间】：2023-03-18 05:30:01
【问题描述】：

当我打开 Chrome 开发工具的资源面板时，我看到跨多个域设置的大量 cookie。我了解第一方和第三方 cookie 之间的定义差异，但我仍然理解它的含义。

Chrome 如何显示第一方 cookie 和第三方 cookie？例如，当我访问 Vice.com 时，我会在左侧栏中看到许多域（www.vice.com、platform.tumblr.com 等）；如果我在左侧栏中选择 www.vice.com，我会看到更多域（.google.com、.ads.pubmatic.com、.scorecardresearch.com 等）。

我应该如何解释这个？

【问题讨论】：

标签： google-chrome cookies google-chrome-devtools

【解决方案1】：

Chrome DevTools documentation 提供了更多相关信息：

Cookie 按域列出。这包括主文档以及所有嵌套框架。选择其中一个“框架组”会显示该组中所有框架的所有资源的所有 cookie。这种分组有两个后果需要注意：

来自不同域的 Cookie 可能出现在同一帧组中。

同一个 cookie 可能出现在多个框架组中。

【讨论】：

【解决方案2】：

我相信@matt 的评论更正确地回答了它：

我做了更多的研究，发现了这个页面： developer.mozilla.org/en-US/docs/Tools/Storage_Inspector 它是关于 Mozilla 开发者工具，但仍然是相同的概念。看着那（这页面顶部附近的信息。看来你是对的。左侧的列表是 iframe，右侧列出的所有内容是该 iframe 中保存的 cookie。 – 马特 18 小时前

【讨论】：

【解决方案3】：

如果我的解释正确，我相信右侧的值显示了与您在左侧选择的域相关的所有 cookie。在这种情况下，您选择了蓝色的 www.vice.com。下面列出的其他域是在vice.com 上找到的所有cookie 的源域（这就是为什么您会在右侧看到与左侧相似的域名）。

如果您单击左侧栏中的其他域，您将找到该特定域在vice.com 上的所有cookie。

我希望这会有所帮助！

【讨论】：

此外，如果您要访问 .edu 或 .gov 网站，您将不会在左栏中找到几乎一样多的 cookie 域，通常只有几个，可能与 twitter 或Facebook。通常有更多与 .com 网站相关的 cookie，因为这些 cookie 通常有广告等。
“相关”是什么意思？左列中的域是否来自 iframe？
我做了一些研究，发现了这个页面：developer.mozilla.org/en-US/docs/Tools/Storage_Inspector 这是关于 Mozilla 开发人员工具的，但仍然是相同的概念。查看页面顶部附近的信息。看来你是对的。左侧的列表是 iframe，右侧列出的所有内容都是该 iframe 中保存的 cookie。