高级 Inspector 架构¶
UI 结构¶
Inspector 面板是工具箱中的一个选项卡。与所有选项卡一样，它位于自己的 iframe 中。
高级层次结构如下所示
服务器依赖¶
Inspector 面板依赖于一系列位于服务器上的 Actor。
一些最重要的 Actor 实际上是由工具箱实例化的，因为这些 Actor 对于其他面板预览和链接到 DOM 节点是必需的。例如，Web 控制台需要输出 DOM 节点，在鼠标悬停时在页面中突出显示它们，并在单击时在 Inspector 中打开它们。这是通过使用 Inspector 面板使用的一些相同的 Actor 来实现的。
参见 Toolbox.prototype.initInspector：此方法在需要时延迟实例化 InspectorActor、WalkerActor 和 HighlighterActor。
面板加载概述¶
与其他面板一样，这从 Toolbox.prototype.loadTool(id) 开始。
但是对于 Inspector，这会调用 Toolbox.prototype.initInspector。
当面板的 open 方法被调用时
它第一次使用 WalkerActor 来了解默认选定的节点（可能是之前在同一页面上选定的节点）。
它开始侦听 WalkerActor 的“new-root”事件，以了解何时显示新的 DOM 树（当发生页面导航时）。
它创建面包屑组件、侧边栏组件、搜索组件和标记视图。
侧边栏
当此组件初始化时，它会加载其子 iframe（规则视图等）。
这些 iframe 中的每个都包含一个面板，该面板依次侦听 Inspector 事件（如“new-node-front”），以了解何时检索有关节点的信息（即规则视图将获取节点的 CSS 规则）。
标记视图
此面板在其 iframe 中初始化，并获取对 WalkerActor 的引用。它使用它来了解要显示的 DOM 树。它知道节点何时更改（标记变异），并知道从哪个根节点开始。
它只显示最初应该可见的节点（通常是 html、head、body 和 body 的直接子节点）。
然后，当您展开节点时，它使用 WalkerActor 延迟获取更多节点。它只了解 UI 中已展开一次的节点的数据。
服务器端结构¶
简化的 Actor 层次结构
InspectorActor
此选项卡级 Actor 是 Inspector 面板连接到的 Actor。除了创建和返回 WalkerActor 和 PageStyleActor 之外，它不做任何其他事情。
WalkerActor
Inspector 面板中最重要的部分。
负责遍历当前页面上的 DOM，但
也遍历 iframe
也查找伪元素 ::before 和 ::after
也查找匿名内容（例如，在 BrowserToolbox 中）
该 Actor 使用 inIDeepTreeWalker 的实例来遍历 DOM。
提供反映 DOM 的 NodeActor 对象的树。
但只对 DOM 有一部分了解（MarkupView 中当前显示/展开的内容）。当您第一次实例化它时，它不需要遍历整个树。
反映了一些常用的 DOM API，例如 querySelector。
请注意，像 querySelector 这样的方法返回任意嵌套的 NodeActor，在这种情况下，WalkerActor 还会发送父节点列表以将返回的节点链接到最近的已知节点，以便 UI 可以正确显示树。
在发生 DOM 变异时发出事件。这些事件被发送到前端，并用于例如刷新标记视图。这使用了 MutationObserver (https://mdn.org.cn/en-US/docs/Web/API/MutationObserver) 的实例，特别是将 chromeOnlyNodes 设置为 true，以便在通过 css 添加/删除伪元素时也发送变异事件。
NodeActor
单个 DOM 节点的表示（标签名、命名空间、属性、父节点、兄弟节点等），面板使用它来显示节点的预览。
还提供有用的方法来
更改属性
滚动到视图中
获取事件侦听器数据
获取图像数据
获取唯一的 CSS 选择器
高亮显示器¶
Inspector 的重要方面之一是高亮显示器。您可以在此处找到更多有关 高亮显示器的文档。
我们不只有一个高亮显示器，我们有一个高亮显示器框架
一个 (chrome-only) 平台 API，用于在内容中的本机匿名节点中注入标记（适用于所有目标）
许多特定的高亮显示器实现（CSS 变换、矩形、选择器、几何、标尺等）
一个 CustomHighlighterActor 来获取特定高亮显示器的实例