这篇文章是一个页面查看器用户界面主要部分的快速导览。
查看器的 UI 包含了三个顶级组件:
- “选择元素”按钮
- HTML面板
- CSS面板
本指南尽量保持简洁。并提供了各种如何使用查看器细节指导的链接。
选择元素按钮
查看器可以给你关于当前选择元素的详细信息,选择元素按钮是你可以选择一个元素进行检查的方式:
注意:该按钮实际上是工具箱工具栏上的一部分,所以你可以马上从任何工具切换到选择模式,不仅仅是查看器。
了解如何选择一个元素,查看指南——选择一个元素。
HTML 面板
查看器被分成两半,左边的一半就是HTML面板:
想要了解更多关于HTML面板的结构,查看指南——检查和编辑HTML。
CSS 面板
占据查看器右边就是CSS面板:
CSS面板分为5个视图:
- 规则视图
- 计算后视图
- 字体视图
- 盒模型
- 动画视图
使用顶部的选项卡在不同视图之间切换。
规则视图
规则视图列出了适用于所选元素的所有规则,规则排列有低级到高级:
查看关于 查看和编辑CSS 的更多细节。
计算后视图
计算后视图显示你所选元素的完整计算CSS。
查看关于 查看和编辑CSS 的更多细节。
字体视图
字体视图显示页面中的所有字体。
查看关于 字体视图 的更多细节。
盒模型视图
盒模型视图提供了一个所选元素的盒模型的可编辑视图。
查看关于 查看和编辑盒模型 的更多细节。
动画视图
动画视图显示所选动画元素的细节和一个暂停控制器:
查看关于 处理动画 的更多细节。
显示/隐藏 CSS 面板
从Firefox 40起,在工具栏增加了一个按钮,您可以使用用它来控制显示或隐藏CSS窗格: