UI 导览 - Firefox 开发者工具 编辑

这篇文章是一个页面查看器用户界面主要部分的快速导览。

查看器的 UI 包含了三个顶级组件：

• “选择元素”按钮
• HTML面板
• CSS面板

本指南尽量保持简洁。并提供了各种如何使用查看器细节指导的链接。

选择元素按钮

查看器可以给你关于当前选择元素的详细信息，选择元素按钮是你可以选择一个元素进行检查的方式：

注意：该按钮实际上是工具箱工具栏上的一部分，所以你可以马上从任何工具切换到选择模式，不仅仅是查看器。

了解如何选择一个元素，查看指南——选择一个元素。

HTML 面板

查看器被分成两半，左边的一半就是HTML面板：

想要了解更多关于HTML面板的结构，查看指南——检查和编辑HTML。

CSS 面板

占据查看器右边就是CSS面板：

CSS面板分为5个视图：

• 规则视图
• 计算后视图
• 字体视图
• 盒模型
• 动画视图

使用顶部的选项卡在不同视图之间切换。

规则视图

规则视图列出了适用于所选元素的所有规则，规则排列有低级到高级：

查看关于 查看和编辑CSS 的更多细节。

计算后视图

计算后视图显示你所选元素的完整计算CSS。

查看关于 查看和编辑CSS 的更多细节。

字体视图

字体视图显示页面中的所有字体。

查看关于 字体视图 的更多细节。

盒模型视图

盒模型视图提供了一个所选元素的盒模型的可编辑视图。

查看关于 查看和编辑盒模型 的更多细节。

动画视图

动画视图显示所选动画元素的细节和一个暂停控制器：

查看关于 处理动画 的更多细节。

显示/隐藏 CSS 面板

从Firefox 40起，在工具栏增加了一个按钮，您可以使用用它来控制显示或隐藏CSS窗格：