blob: be7ac2b66b8596f423a4173123cdd9ffdc5f4530 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: UI 导览
slug: Tools/Page_Inspector/UI_Tour
translation_of: Tools/Page_Inspector/UI_Tour
---
<div>{{ToolsSidebar}}</div><p>这篇文章是一个页面查看器用户界面主要部分的快速导览。</p>
<p>查看器的 UI 包含了三个顶级组件：</p>
<ul>
<li>“选择元素”按钮</li>
<li>HTML面板</li>
<li>CSS面板</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">本指南尽量保持简洁。并提供了各种如何使用查看器细节指导的链接。</p>
<h2 id="选择元素按钮">选择元素按钮</h2>
<p>查看器可以给你关于当前选择元素的详细信息，选择元素按钮是你可以选择一个元素进行检查的方式：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p>
<p>注意：该按钮实际上是<a href="/zh-CN/docs/Tools/Tools_Toolbox#Toolbar">工具箱工具栏</a>上的一部分，所以你可以马上从任何工具切换到选择模式，不仅仅是查看器。</p>
<p>了解如何选择一个元素，查看指南——<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择一个元素</a>。</p>
<h2 id="HTML_面板">HTML 面板</h2>
<p>查看器被分成两半，左边的一半就是HTML面板：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p>
<p>想要了解更多关于HTML面板的结构，查看指南——<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">检查和编辑HTML</a>。</p>
<h2 id="CSS_面板">CSS 面板</h2>
<p>占据查看器右边就是CSS面板：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">CSS面板分为5个视图：</p>
<ul>
<li>规则视图</li>
<li>计算后视图</li>
<li>字体视图</li>
<li>盒模型</li>
<li>动画视图</li>
</ul>
<p>使用顶部的选项卡在不同视图之间切换。</p>
<h3 id="规则视图">规则视图</h3>
<p>规则视图列出了适用于所选元素的所有规则，规则排列有低级到高级：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10017/css-rules.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a> 的更多细节。</p>
<h3 id="计算后视图">计算后视图</h3>
<p>计算后视图显示你所选元素的完整计算CSS。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10013/css-computed.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a> 的更多细节。</p>
<h3 id="字体视图">字体视图</h3>
<p>字体视图显示页面中的所有字体。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts">字体视图</a> 的更多细节。</p>
<h3 id="盒模型视图">盒模型视图</h3>
<p>盒模型视图提供了一个所选元素的盒模型的可编辑视图。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10011/css-box-model.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">查看和编辑盒模型</a> 的更多细节。</p>
<h3 id="动画视图">动画视图</h3>
<p>动画视图显示所选动画元素的细节和一个暂停控制器：</p>
<p> </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
<p>查看关于 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Work_with_animations">处理动画</a> 的更多细节。</p>
<h3 id="显示隐藏_CSS_面板">显示/隐藏 CSS 面板</h3>
<p>从Firefox 40起，在工具栏增加了一个按钮，您可以使用用它来控制显示或隐藏CSS窗格：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10817/inspector-show-hide.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 739px;"></p>
|
