使用问题工具查找和修复问题

“ 问题 ”工具会自动分析当前网页，按类型分组报告问题，并提供文档来帮助解释和解决问题。

“问题”工具提供以下类别的反馈：

问题工具中的反馈由多个源提供，包括Chromium平台、Deque 轴、MDN 浏览器兼容性数据和 Webhint。有关填充问题工具的这些反馈来源的信息，请参阅：

打开“问题”工具

有几种其他方法可以打开 “问题” 工具：

单击主面板或抽屉中的“更多工具 (+) 菜单，然后选择 ”问题”。
选择 “自定义并控制 DevTools > 更多工具 > 问题”。
在 Elements 工具的 DOM 树中，按 Shift 下并单击波浪下划线元素名称。或者，打开波浪下划线元素上的上下文菜单，然后选择 “查看”问题。

在每个问题类别中，首先列出错误，然后列出警告，然后列出提示。

“问题”工具显示按严重性排序的性能问题

“ 问题 ”工具提供其他文档和建议的修补程序，以应用于每个问题。若要展开问题以获取此附加信息，请选择问题，如下所示。

每个显示的问题都有以下组件：

“问题”工具中的问题可能包括打开不同工具的一个或多个链接，例如 “元素”、“源”或 “网络”工具。可以打开其中一个工具来执行其他故障排除步骤。

若要从 “问题 ”工具打开链接的工具，请执行以下操作：

如上一部分所述，打开演示页，然后在“ 问题 ”工具中展开问题。
在 受影响的资源 > 中打开，选择工具名称。受影响的资源显示在所选工具中：

展开的问题可能有 一个网络 链接，用于在网络工具中显示受影响的资源：

如果元素存在关联问题， 则 Elements 工具中的 DOM 树在元素名称下显示波浪下划线。右键单击该元素，然后选择 “查看问题”。或者，按住并按住 Shift ，然后单击带有波浪下划线的元素。

若要在 DOM 树中显示具有波浪下划线的元素的问题：

在新窗口或选项卡中打开辅助功能测试演示网页。
右键单击网页中的任意位置，然后选择 “检查”。或者按 F12。 DevTools 将在网页旁边打开。
在 DevTools 中，选择 “元素” 选项卡。
在 DOM 树中展开<body>``<main> > <article id="cats">``<section> > > 。请注意，该 <img> 元素具有波浪下划线。
将鼠标悬停在元素上 <img> 。工具提示显示有关问题的信息。
使用波浪下划线打开元素上的上下文菜单，然后选择 “查看”问题。 “问题”工具随即打开并显示与该元素关联的问题。