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
|
---
title: 3D-Untersuchung
slug: Tools/3D_View
translation_of: Tools/3D_View
original_slug: Tools/3D_untersuchung
---
<div>{{ToolsSidebar}}</div>
<div class="warning">
<p>Seit Firefox 47 ist die 3D-Ansicht nicht mehr verfügbar.</p>
<p>Es gibt ein Add-on, das diese Funktionalität erhält: <a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D</a>. Beachten Sie allerdings, dass auch dieses nicht mit dem <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">Multiprocess-Firefox</a> kompatibel ist.</p>
</div>
<p>Mit einem Klick auf die 3D-Untersuchung Schaltfläche gelangst du in in den 3D-Untersuchungsmodus. In diesem Modus werden die HTML Elemente als dreidimensionale Blöcke dargestellt. Die Verschachtelung der Inhalte wird so auf eine eindrückliche Art und Weise virtualisiert, was einem das Studieren des Aufbaus der Seite erleichtert.</p>
<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
<p>Durch Klicken uns Ziehen mit der Maus, kann man die Ansicht in alle Richtungen drehen und so die DOM Struktur von verschiedenen Winkeln aus betrachten. Auch Elemente ausserhalb des Bildschirmrands und solche, die versteckt sind, werden in dieser Ansicht sichtbar. Mit einem Klick auf ein Element, sieht man den entsprächenden Code im <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML panel</a> bzw. dem <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.</p>
<p>Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">Liste blockierter Grafik-Treiber</a> für weitere Informationen.</p>
<h2 id="Steuerung_der_3D-Ansicht">Steuerung der 3D-Ansicht</h2>
<p>Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.</p>
<table class="standard-table" style="width: auto;">
<tbody>
<tr>
<td class="header">Funktion</td>
<td class="header">Tastatur</td>
<td class="header">Maus</td>
</tr>
<tr>
<td>Vergrössern/Verkleinern</td>
<td>+ / -</td>
<td>Scroll wheel up/down</td>
</tr>
<tr>
<td>Nach links/rechts drehen</td>
<td>a / d</td>
<td>Maus nach links/rechtsziehen</td>
</tr>
<tr>
<td>Nach oben/unten kippen</td>
<td>w / s</td>
<td>Maus nach oben/unten ziehen</td>
</tr>
<tr>
<td>Ansicht nach links/rechts verschieben</td>
<td>← / →</td>
<td>-</td>
</tr>
<tr>
<td>Ansicht nach oben/unten verschieben</td>
<td>↑ / ↓</td>
<td>-</td>
</tr>
<tr>
<td>Vergrösserung/Verkleinerung zurücksetzten</td>
<td>0</td>
<td>-</td>
</tr>
<tr>
<td>Ausgewähles Element fokusieren</td>
<td>f</td>
<td>-</td>
</tr>
<tr>
<td>Ansicht (Grösse und Sichtswinkel) zurücksetzten</td>
<td>r</td>
<td>-</td>
</tr>
<tr>
<td>Ausgewähltes Element ausblenden</td>
<td>x</td>
<td>-</td>
</tr>
</tbody>
</table>
<h2 id="Anwendungsbeispiele">Anwendungsbeispiele</h2>
<p>Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:</p>
<ul>
<li>Zur Evaluierung von Fehlern bei der Verschachtelung. Oft schleichen sich Fehler bei der Verschachtelung von Inhalten ein. In der 3D-Ansicht können diese Fehler viel schneller gefunden werden.</li>
<li>Falls Inhalte gar nicht oder nicht vollständig angezeigt werden, kann die 3D-Ansicht helfen, die Fehlerquelle zu finden. Auch Elemente, welche sich ausserhalb des Bildschirmrands befinden, werden dadurch sichtbar.</li>
<li>Du kannst die Struktur deiner Seite genau analysieren und so dein Layout optimieren.</li>
<li>Und zu guter letzt: Es sieht einfach cool aus!</li>
</ul>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Tools/Seiten_Inspektor">Seiteninspektor</a></li>
<li><a href="/de/docs/Tools" title="Tools">Firefox Tools für Webentwickler</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 Eintrag)</li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
|
