使用问题工具查找和修复问题 - Microsoft Edge Development

打开“问题”工具

转到包含要修复的问题的网页。例如，在新选项卡或窗口中打开辅助功能测试演示页。

打开 DevTools。几秒钟后，“ 问题计数器 ( ) 显示在 DevTools 的右上角。

刷新页面，因为某些问题是根据网络请求报告的。请注意 问题计数器 中的更新计数。

选择“ 问题”计数器 。 “ 问题” 工具随即打开，其中的问题分组到不同的类别中。

可通过多种其他方法打开 “问题” 工具：

单击main + 面板或抽屉中的“ 更多工具 () ”菜单，然后选择“ 问题 ”。

选择 “自定义和控制 DevTools > 更多工具 > 问题 ”。

在 “元素” 工具的 DOM 树中，按 Shift ，然后单击带波浪下划线的元素名称。或者，打开带波浪下划线的元素上的上下文菜单，然后选择“ 查看问题 ”。

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

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

在新窗口或选项卡中打开辅助功能测试演示页，然后打开 DevTools。

通过选择 “问题 计数器” (“ 问题计数器 ) 。

选择问题以展开问题。

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

描述问题的标题。

提供更多上下文和建议的解决方案的说明。

链接到 DevTools 中的资源（例如元素、源或网络工具）的 “受影响的资源 ”部分。

指向其他文档的链接。

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

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

如上一部分所述，打开演示页，然后在 “问题” 工具中展开问题。

在 “受影响的资源 > ”“打开”中 ，选择工具名称。受影响的资源显示在所选工具中：

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

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

若要显示 DOM 树中带有波浪下划线的元素的问题，请执行以下操作：

在新窗口或选项卡中打开辅助功能测试演示网页。

右键单击网页中的任意位置，然后选择“ 检查 ”。或者，按 F12 。 DevTools 将在网页旁边打开。

在 DevTools 中，选择“ 元素 ”选项卡。

在 DOM 树中，展开 <body> <article id="cats"> >> <section> > <main> 。请注意， <img> 元素具有波浪下划线。

将鼠标悬停在 <img> 元素上。工具提示显示有关问题的信息。

使用波浪下划线打开元素上的上下文菜单，然后选择“ 查看问题 ”。 “ 问题” 工具将打开并显示与该元素关联的问题。

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。原始页面在此处找到，由 Sam Dutton (Developer Advocate) 创作。此作品在 Creative Commons 署名 4.0 国际许可下获得许可。