Web Inspector 参考 源代码面板

组织资源

默认情况下，资源在导航侧边栏中按类型组织，它将相似类型的资源（例如图像、脚本、样式表等）放在一起，但仅当资源过多以至于以平面列表方式导航会造成混乱时才如此。

可以将组织方式切换为按路径，这将创建与每个资源的路径匹配的文件夹层次结构。

当按路径组织时，每个源都列在顶级，而不是嵌套在主资源下的框架文件夹中。

筛选资源

导航侧边栏底部的筛选栏将根据给定搜索字符串是否存在于该资源的 URL 中来显示/隐藏资源。

启用后， [显示有问题的资源] 将隐藏所有没有警告或错误的资源（包括由console函数创建的资源）。

如果资源类型选择器未设置为全部，则只会显示与所选类型（例如图像、脚本、样式表等）匹配的资源。

理解资源

除了能够在主内容区中查看资源的响应内容外，Web Inspector 还支持显示请求数据（如果存在），并且在适用时还会显示内容的替代表示。

如果请求数据或响应内容是可 JSON 解析的，则会提供对象树视图，就像内容已记录到控制台一样。
如果请求数据或响应内容是有效 XML（包括 HTML 和 SVG），则会提供DOM 树视图，就像内容已在元素面板中显示一样。
如果响应内容是类 XML 或有效的 JavaScript 或有效的 CSS，点击[美化打印]将重新格式化内容以提高可读性。
如果响应内容是有效的 JavaScript，点击[显示类型信息]将切换JavaScript 类型分析。
如果响应内容是有效的 JavaScript，点击[淡化未执行代码]将切换JavaScript 代码覆盖率。
如果响应内容是图像，点击[显示透明网格]将切换图像透明网格。

有关资源的额外信息也显示在详细信息侧边栏中的资源面板中，例如 MIME 类型和请求/响应头。

创建检查器资源

除了显示被检查目标加载的资源外，Web Inspector 还具有三种不同类型的可创建资源：

只要 Web Inspector 打开，就可以使用本地覆盖…来基于 URL 替换任何网络响应的内容和头。

欲了解更多信息，请阅读本地覆盖。

控制台代码段…允许将 JavaScript 代码段保存到资源中，以避免在控制台中重复输入（或复制粘贴）该代码。
- 欲了解更多信息，请阅读控制台代码段。
检查器引导脚本是一个特殊的 JavaScript 代码段，只要 Web Inspector 打开，它就保证在任何页面中的任何其他 JavaScript 以及任何子框架中的任何其他 JavaScript 之前执行。

欲了解更多信息，请阅读检查器引导脚本。

检查器样式表是一个由 Web Inspector 创建并悄悄添加到被检查页面的特殊<style>。

每个框架可以创建一个检查器样式表。
每个检查器样式表都嵌套在其资源树中的所有者框架下。
在元素面板中添加新的 CSS 规则时，如果所有者框架尚未有检查器样式表，则会自动创建一个。
检查器样式表在导航或 Web Inspector 会话之间不会保留。

调试 JavaScript

在导航侧边栏的顶部，有一些可点击的图标控制着 JavaScript 调试器

当断点全局启用时，显示[禁用所有断点]。点击它将全局禁用断点。也可以通过按⌘ Y来切换。
当断点全局禁用时，显示[启用所有断点]。点击它将全局启用断点。也可以通过按⌘ Y来切换。
当 JavaScript 未暂停执行时，显示[暂停脚本执行]。点击它会告诉 JavaScript 调试器在下一条语句上暂停 JavaScript 执行。也可以通过按⌃ ⌘ Y或⌘ \来切换。
当 JavaScript 暂停执行时，显示[继续脚本执行]。点击它会告诉 JavaScript 调试器恢复 JavaScript 执行。也可以通过按⌃ ⌘ Y或⌘ \来切换。
[步过] 总是显示，但仅当 JavaScript 执行暂停时才启用。点击它会告诉 JavaScript 调试器恢复 JavaScript 执行，然后在当前（或父）函数中要执行的下一条语句上暂停 JavaScript 执行。如果执行已到达当前函数的末尾且没有父函数，点击它将表现得与 [继续脚本执行] 完全一样。也可以通过按⌘ '或F6来完成。
[步入] 总是显示，但仅当 JavaScript 执行暂停时才启用。点击它会告诉 JavaScript 调试器恢复 JavaScript 执行，然后在下一个要执行的表达式处暂停 JavaScript 执行，包括在新调用的函数中。如果没有调用这样的函数，点击它的行为将与 [单步执行] 完全一样。如果执行已到达当前函数的末尾且没有父函数，点击它将表现得与 [继续脚本执行] 完全一样。也可以通过按⌘ ;或F7来完成。
[步出] 总是显示，但仅当 JavaScript 执行暂停时才启用。点击它会告诉 JavaScript 调试器恢复 JavaScript 执行，然后在离开当前函数后要执行的第一个表达式处暂停 JavaScript 执行。如果没有父函数，点击它的行为将与 [继续脚本执行] 完全一样。也可以通过按⇧ ⌘ ;或F8来完成。
[单步执行] 总是显示，但仅当 JavaScript 执行暂停时才启用。点击它会告诉 JavaScript 调试器恢复 JavaScript 执行，然后在当前（或父）函数中要执行的下一个表达式处暂停 JavaScript 执行。如果执行已到达当前函数的末尾且没有父函数，点击它的行为将与 [继续脚本执行] 完全一样。也可以通过按⇧ ⌘ '或F9来完成。