问题:查找和解决问题

索菲亚·埃梅利安诺娃
Sofia Emelianova

Chrome 开发者工具中的 Issues 面板可以减轻控制台的通知疲劳和杂乱现象。 使用该插件可以查找浏览器检测到的问题(例如 Cookie 问题和混合内容)的解决方案。

截至目前,问题面板支持以下功能:

Chrome 的未来版本将支持更多问题类型。

打开“问题”标签页

  1. 访问需要修正问题的网页,例如 samesite-sandbox.glitch.me
  2. 打开开发者工具
  3. 点击操作栏右上角 设置。 设置旁边的 Open Issues(打开问题)按钮。该按钮可能显示红色 错误。、黄色 警告。 或蓝色 信息。 图标,具体取决于问题的严重程度。

    带有红色图标的“打开问题”按钮。

    或者,从 “更多工具”菜单。 更多工具菜单中选择问题

    “更多工具”菜单中的“问题”标签页。

  4. 进入 Issues 面板后,您可能希望重新加载网页以发现更多问题(这次是在网页加载期间发生)。

    重新加载页面后,在“问题”标签页中发现了另外 1 个问题。

控制台可能还会显示浏览器报告的问题。但是,您会发现,此类问题(比如以下屏幕截图中的 Cookie 警告)很难理解。不清楚您需要如何修复此问题。

显示 Cookie 模糊警告的控制台。

另一方面,问题面板为您提供富有实用价值的分析洞见。

查看“问题”标签页中的内容

Issues 面板以结构化、汇总且可操作的方式显示来自浏览器的警告。

  1. 点击 Issues 面板中的项目可展开问题,并获取有关如何解决问题和查找受影响资源的指导。

    展开了包含跨网站 Cookie 问题的“问题”标签页。

    每项内容均包含四个组成部分:

    • 描述问题的标题。
    • 提供背景信息和解决方案的说明。
    • 受影响的资源部分,链接到适当开发者工具上下文中的资源,例如网络来源元素和其他面板。
    • 指向进一步指南的链接。
  2. 点击受影响的资源中的内容可在上下文中查看问题

按种类对问题进行分组

Issues 面板会计算每个问题受影响的资源数量,并将其显示在相应标题旁边。此外,您还可以按问题的严重程度将问题分为三类:

  • 错误。 Chrome 报告的网页错误
  • 警告。 重大变更,例如弃用。
  • 信息。开发者工具建议的改进

如需对问题进行分组,请选中 Issues 面板顶部的操作栏中的 复选框。 Group by kind

问题分为三类:网页错误、重大更改和改进。

包含第三方问题

默认情况下,“问题”标签页会显示第三方 Cookie 问题。

您可以在受影响的资源部分找出缺少链接的第三方 Cookie 问题。

“受影响的资源”部分中没有关联资源的第三方 Cookie。

要隐藏此类问题,请在 Issues(问题)面板顶部的操作栏中清除 清除。 Include third-party cookie issues(包括第三方 Cookie 问题)。

隐藏问题

如需隐藏问题,请从问题旁边的 三点状菜单。(三点状)菜单中选择隐藏此类问题

在问题旁边的三点状菜单中,点击“隐藏此类问题”选项。

如需查看隐藏问题的列表,请向下滚动到隐藏的问题部分并将其展开。

“隐藏的问题”部分。

若要显示所有问题,请点击全部取消隐藏。如需发现特定问题,请从问题旁边的 三点状菜单。(三点状)菜单中选择取消隐藏此类问题

此外,启用分组后,您还可以使用问题组旁边的同一三点状菜单隐藏整组问题。

三点状菜单,其中包含用于隐藏“改进”组的选项。

在上下文中查看问题

如需调查某个问题,请执行以下操作:

  1. 受影响的资源部分中,点击资源链接即可在开发者工具的相应上下文中查看资源项。在此示例中,点击 samesite-sandbox.glitch.me 以显示附加到该请求的 Cookie。该链接会将您转到网络面板。

    “受影响的资源”部分,其中包含指向受影响请求的链接。

  2. 滚动查看存在问题的项目:本例中为 Cookie ck02。将鼠标悬停在右侧的 信息。 信息图标上,即可查看问题及其解决方法。

    当您将鼠标悬停在信息图标上时,“Network”面板会显示一条提示。