Web Inspector 参考Web Inspector 界面

Web Inspector 分为六个主要区域。

选项卡栏

选项卡栏列出了多个选项卡，每个选项卡都具有特定用途。

选项卡可以通过拖动重新排序，也可以通过右键单击选项卡栏并勾选/取消勾选所需选项卡的项目来添加/删除。

选项卡栏还包含

  • 停靠配置按钮
    • 将 Web Inspector 停靠在被检查页面的左侧。仅当 Web Inspector 停靠在被检查页面的底部/右侧或分离到其独立窗口时显示。
    • 将 Web Inspector 停靠在被检查页面的底部。仅当 Web Inspector 停靠在被检查页面的左侧/右侧或分离到其独立窗口时显示。
    • 将 Web Inspector 停靠在被检查页面的右侧。仅当 Web Inspector 停靠在被检查页面的左侧/底部或分离到其独立窗口时显示。
    • 将 Web Inspector 分离到其独立窗口。仅当 Web Inspector 停靠在被检查页面的左侧/底部/右侧时显示。
    • 关闭 Web Inspector。仅当 Web Inspector 停靠在被检查页面的左侧/底部/右侧时显示。
  • 检查页面中其他功能的控制
  • 控制台指示器
    • 如果控制台选项卡中有任何警告，则显示。点击它将跳转到控制台选项卡并自动设置消息过滤器以仅显示警告。
    • 如果控制台选项卡中有任何错误，则显示。点击它将跳转到控制台选项卡并自动设置消息过滤器以仅显示错误。
  • 固定选项卡

如果 Web Inspector 窗口太窄，选项卡会浓缩成一个[显示隐藏选项卡]，点击它会显示未可见的已启用选项卡列表。

导航侧边栏

导航侧边栏包含与所选选项卡相关的项目列表。选择其中一个项目将更新主内容区和详情侧边栏中任何相关的面板。

每个导航侧边栏底部都有一个过滤栏，它遵循全局搜索设置来过滤项目列表，以便更容易找到正确的项目。

某些选项卡没有导航侧边栏，在这种情况下，主内容区负责选择和显示有关该选项卡的任何已知项目的信息。对于具有导航侧边栏的选项卡，可以通过单击 / 或按 ⇧ ⌘ 0 来展开/折叠。

主内容区

主内容区显示导航侧边栏中所选项目的表示。

如果所选选项卡没有导航侧边栏，则主内容区将显示与所选选项卡相关的项目。

主内容区的顶部可以包含

  • / 展开/折叠导航侧边栏。
  •   历史记录控制。
  • 选择面包屑，显示导航侧边栏中所选项目的路径。点击任何项目将显示一个上下文菜单，其中包含该项目的每个同级项，允许快速的层次选择切换，或当前显示内容的替代表示，例如在资源的请求和响应之间切换。
  • 一个或多个特定于内容的控制，每个都具有独特的功能，例如
    • 创建本地覆盖。
    • / 切换任意文本内容的漂亮打印。
    • / 切换JavaScript 类型分析。
    • / 切换JavaScript 代码覆盖率。
    • / 切换图像透明度网格。
    • 导入以前导出的内容。
    • 导出当前选择/显示的内容。也可以通过按 ⌘ S 完成。
    • 刷新选择/显示内容的可视化。
    • 清除当前内容或删除其后端数据。也可以通过按 ⌘ K 完成。
  • / 展开/折叠详情侧边栏。

详情侧边栏

详情侧边栏包含一个或多个面板，这些面板可以根据导航侧边栏或主内容区中所选的项目有条件地显示，每个面板提供各种类型的附加信息。

某些选项卡没有详情侧边栏，而是将所有信息显示在主内容区中。对于具有详情侧边栏的选项卡，可以通过单击 / 或按 ⌥ ⌘ 0 来展开/折叠。

分体式控制台

分体式控制台是一个可折叠的滚动列表，显示所有日志活动，其内容和状态与控制台选项卡共享。

某些选项卡不允许展开分体式控制台，因为它不适合该选项卡其余部分的布局。对于允许使用分体式控制台的选项卡，可以通过按 esc 展开/折叠，或通过单击[折叠分体式控制台]来折叠。

也可以通过单击[显示控制台选项卡]从分体式控制台打开控制台选项卡。

控制台提示符

控制台提示符是一个输入字段，允许您在被检查页面的任何执行上下文中评估任意 JavaScript。这些评估及其结果将同时出现在分体式控制台和控制台选项卡中。

执行上下文包括 <iframe>、Worker，甚至由浏览器扩展或其他 API 创建的隔离世界。如果被检查页面中有多个执行上下文，则在控制台提示符的右侧会显示一个执行上下文选择器。

可以通过按 esc 或 ⌃ ` 来聚焦控制台提示符。

从上面可以看出，Web Inspector 在广泛的各种主题上拥有大量功能。但遗憾的是，一旦考虑到页面的实际内容，留给链接、按钮和所有其他界面元素的空间就非常有限。因此，Web Inspector 利用工具提示和上下文菜单来添加更长的描述和/或提供可能不那么常用但有用的附加功能。Web Inspector 中的每个图标都有一个工具提示，解释该图标的操作（在这些参考页面中通过 [工具提示文本] 突出显示）。相关位置还包含特别有用的上下文菜单图片，例如在元素选项卡中。Web Inspector 很可能已经能够完成您想要做的事情，因此当有疑问时，尝试悬停以查看工具提示或右键单击以显示上下文菜单，看看那里是否有您需要的功能。

为 Safari Technology Preview 更新。尝试它以获取最新的 Web Inspector 功能，包括上述所有功能及更多内容。

由 Brian Burg、Devin Rousso、Joseph Pecoraro 和 Timothy Hatcher 于 2020 年 6 月 8 日撰写

最后更新于 2022 年 6 月 2 日，作者 Devin Rousso