UI 导览

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

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

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

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

选择元素按钮

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

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

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

HTML 面板

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

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

CSS 面板

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

CSS面板分为5个视图:

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

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

规则视图

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

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

计算后视图

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

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

字体视图

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

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

盒模型视图

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

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

动画视图

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

 

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

显示/隐藏 CSS 面板

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

文档标签和贡献者

 此页面的贡献者: c_king
 最后编辑者: c_king,