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
103
104
105
106
107
|
---
title: 3D view
slug: Tools/3D_View
tags:
- 3D
- HTML
translation_of: Tools/3D_View
---
<div>{{ToolsSidebar}}</div>
<div class="warning">
<p>Начиная с Firefox 47, "3D view" больше недоступен.</p>
</div>
<p>Когда вы нажимаете на кнопку 3D просмотра, страница переходит в 3D режим. В нем вы можете видеть структуру блоков HTML, когда вложенные блоки находятся выше родительских.</p>
<p>Этот режим позволяет визуализировать структуру вашего контента.</p>
<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
<p><span id="result_box" lang="ru"><span>Нажимая и перетаскивая представление, вы можете поворачивать и переориентировать трёхмерную презентацию иерархии DOM на своей странице, чтобы увидеть её под разными углами, чтобы лучше изучить её структуру.</span> <span>Элементы вне экрана становятся видимыми, чтобы вы могли видеть, где находятся ваши элементы по отношению к видимому контенту.</span> <span>Вы можете щёлкнуть по элементам, чтобы увидеть их HTML на панели HTML или на панели «Стиль».</span> <span>И наоборот, вы можете щёлкнуть элементы на панели поиска, чтобы изменить, какой элемент выбран в 3D-представлении.</span></span></p>
<p><span id="result_box" lang="ru"><span>Если вы не видите кнопку 3D в инспекторе страницы, возможно, что ваш графический драйвер нуждается в обновлении.</span> <span>Дополнительную информацию см. На странице драйверов.</span></span></p>
<h2 id="Управление">Управление</h2>
<p><span id="result_box" lang="ru"><span>Для 3D-просмотра доступны горячие клавиши.</span></span></p>
<table class="standard-table" style="width: auto;">
<tbody>
<tr>
<td class="header">Function</td>
<td class="header">Keyboard</td>
<td class="header">Mouse</td>
</tr>
<tr>
<td>Zoom in/out</td>
<td><kbd>+</kbd> / <kbd>-</kbd></td>
<td>Scroll wheel up/down</td>
</tr>
<tr>
<td>Rotate left/right</td>
<td><kbd>a</kbd> / <kbd>d</kbd></td>
<td>Mouse left/right</td>
</tr>
<tr>
<td>Rotate up/down</td>
<td><kbd>w</kbd> / <kbd>s</kbd></td>
<td>Mouse up/down</td>
</tr>
<tr>
<td>Pan left/right</td>
<td><kbd>←</kbd> / <kbd>→</kbd></td>
<td>Mouse left/right</td>
</tr>
<tr>
<td>Pan up/down</td>
<td><kbd>↑</kbd> / <kbd>↓</kbd></td>
<td>Mouse up/down</td>
</tr>
<tr>
<td>Reset zoom level</td>
<td><kbd>0</kbd></td>
<td>Resets the zoom level to the default</td>
</tr>
<tr>
<td>Focus on selected node</td>
<td><kbd>f</kbd></td>
<td>Makes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}</td>
</tr>
<tr>
<td>Reset view</td>
<td><kbd>r</kbd></td>
<td>Resets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}</td>
</tr>
<tr>
<td>Hide current node</td>
<td><kbd>x</kbd></td>
<td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}</td>
</tr>
</tbody>
</table>
<h2 id="Варианты_использования">Варианты использования</h2>
<p><span id="result_box" lang="ru"><span>Существует множество способов использования 3D-вида:</span></span></p>
<ul>
<li><span id="result_box" lang="ru"><span>Если вы накосячили с HTML-макетом, просмотр 3D-вида поможет найти, где вы налажали.</span> <span>Часто проблемы структур вызваны неправильным вложением содержимого.</span> <span>Это будет более очевидным при использовании 3D-вида.</span></span></li>
<li><span id="result_box" lang="ru"><span>Если контент не отображается, вы можете выяснить, почему;</span> <span>поскольку 3D-вид позволяет вам уменьшить масштаб, чтобы увидеть элементы, которые визуализируются за пределами видимой области страницы.</span></span></li>
<li><span id="result_box" lang="ru"><span>Вы можете посмотреть, как структурирована ваша страница, чтобы понять, стоит ли её оптимизировать.</span></span></li>
<li><strong>Ну и ... это шщ-и-и-и-и-и-карно</strong>.</li>
</ul>
<h2 id="Смотреть_так_же">Смотреть так же:</h2>
<ul>
<li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
<li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
<li>
<div class="threecolumns">
<p><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></p>
</div>
</li>
<li><a href="/en/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>
|
