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
99
100
101
|
---
title: 三维视图
slug: Tools/3D_View
translation_of: Tools/3D_View
original_slug: Tools/Page_Inspector/3D_view
---
<div>{{ToolsSidebar}}</div>
<div class="warning">
<p>三维视图在 Firefox 47 被移除。</p>
</div>
<p>当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.</p>
<p><img alt="3dview.png" class="default internal" src="/@api/deki/files/6123/=3dview.png"></p>
<p>按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 <a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML面板</a>和<a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="Style panel">Style面板</a>显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.</p>
<p>如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a>了解更多信息.</p>
<h2 id="控制三维视图">控制三维视图</h2>
<p>通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.</p>
<table class="standard-table" style="width: auto;">
<tbody>
<tr>
<td class="header">功能</td>
<td class="header">键盘快捷键 </td>
<td class="header">鼠标操作</td>
</tr>
<tr>
<td>放大/缩小</td>
<td>+/- </td>
<td>滚轮向上/向下滚动</td>
</tr>
<tr>
<td>向左/向右旋转</td>
<td>a / d</td>
<td>按住左键向左/向右拖动</td>
</tr>
<tr>
<td>向上/向下旋转</td>
<td>w / s</td>
<td>按住左键向上/向下拖动</td>
</tr>
<tr>
<td>向左/向右平移</td>
<td>← / →</td>
<td>按住右键向左/向右拖动</td>
</tr>
<tr>
<td>向上/向下平移</td>
<td>↑ / ↓</td>
<td>按住右键向上/向下拖动</td>
</tr>
<tr>
<td>重置放大级别到默认状态</td>
<td>0</td>
<td>无</td>
</tr>
<tr>
<td>将焦点转移到当前选择的节点,确保当前选择的节点是可见的</td>
<td>f</td>
<td>无</td>
</tr>
<tr>
<td>重置整个视图到默认状态(放大级别,旋转角度,移动位置等)</td>
<td>r</td>
<td>无</td>
</tr>
<tr>
<td>隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点</td>
<td>x</td>
<td>无</td>
</tr>
</tbody>
</table>
<h2 id="三维视图的用途">三维视图的用途</h2>
<p>三维视图在很多种情形下都会派上用场:</p>
<ul>
<li>如果一些结构不良好的HTML引起了页面的布局问题, 三维视图可能能够帮你找到问题所在. 通常情况下,布局问题是由页面内容的嵌套错误引起的.在三维视图下,嵌套错误的那些元素可以比较明显的被显示出来.</li>
<li>如果一个元素没有显示在页面上,你会希望能够快速的找到问题所在.三维视图提供了缩小页面显示的功能,可以显示出那些正常情况下页面可见区域之外的元素, 所以你可以通过这种方法找到那些游离的无法显示的元素.</li>
<li>可以查看你的页面结构,找到如何优化页面布局的方法.</li>
<li>当然,还有一点,就是它看起来很炫.</li>
</ul>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="/zh-cn/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
<li><a href="/zh-cn/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
<li><a href="/zh-cn/Tools/Page_Inspector/Style_panel" title="zh-cn/Tools/Page_Inspector/Style panel">Style panel</a></li>
<li><a href="/zh-cn/Tools" title="Tools">Tools</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "en": "en/Tools/Page_Inspector/3D_view"} ) }}</p>
|
