blob: 2126bf44483df6b2de7e28af4a6a89a9e61b6352 (
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
99
100
101
102
|
---
title: 3D view
slug: Tools/3D_View
translation_of: Tools/3D_View
---
<div class="warning">
<p>自 Firefox 47 開始，3D View 不再可用</p>
<p>有個 <a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D </a>套件提供相同功能。但是，請記得這和內建版本一樣，無法在 <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> 使用。</p>
</div>
<p>當您點擊 3D View 按鈕，頁面將進入 3D 檢視模式，在這模式之下，您將看到頁面以 HTML 標籤層次，形成從底部向外突起的 3D 模型。這功能讓您可用更簡單的方式檢視頁面結構。</p>
<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
<p>經由點擊及拖曳，您可以旋轉、重新定位 3D 圖像，以看到不同角度來確定結構。原先於屏幕外的元素將變為可見，如此一來您將可看見他們和可見元素的關係。您可以點擊元素經由 <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML panel</a> 或是 <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel </a>查看 HTML。相反地，您也能點擊導航列去選擇選取 3D View 中的特定元素。</p>
<p>如果您在頁面檢測器沒看到 3D 按鈕，可能是您的顯示卡驅動需要更新。查看<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">無法使用的清單</a>以取得更多資訊</p>
<h2 id="操作_3D_View">操作 3D View</h2>
<p>該怎麼使用鍵盤快速鍵及滑鼠控制 3D View？</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>重設 3D View</td>
<td>r</td>
<td>將縮放、旋轉、位置重設為預設值</td>
</tr>
<tr>
<td>隱藏節點</td>
<td>x</td>
<td>
<p>隱藏選擇的節點，這在您需要找到被遮蓋的節點時很實用</p>
</td>
</tr>
</tbody>
</table>
<h2 id="3D_view_的使用時機">3D view 的使用時機</h2>
<p>下列時機中，3D View 很實用：</p>
<ul>
<li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li>
<li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li>
<li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li>
<li>另外，這看起來<strong>超棒der</strong></li>
</ul>
<h2 id="另見">另見</h2>
<ul>
<li><a href="/zh-TW/Tools/Page_Inspector" title="頁面檢測器">頁面檢測器</a></li>
<li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
<li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li>
<li><a href="/zh-TW/Tools" title="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", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
|
