Version 544203 von 3D-Untersuchung

  • Adressname der Version: Tools/3D_untersuchung
  • Titel der Version: 3D-Untersuchung
  • ID der Version: 544203
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Ja
  • Kommentar

Inhalt der Version

{{ fx_minversion_header("11") }}

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.

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 HTML panel bzw. dem Style panel. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.

Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe Liste blockierter Grafik-Treiber für weitere Informationen.

Steuerung der 3D-Ansicht

Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.

Funktion Tastatur Maus
Vergrössern/Verkleinern + / - Scroll wheel up/down
Nach links/rechts drehen a / d Maus nach links/rechtsziehen
Nach oben/unten kippen w / s Maus nach oben/unten ziehen
Ansicht nach links/rechts verschieben ← / → -
Ansicht nach oben/unten verschieben ↑ / ↓ -
Vergrösserung/Verkleinerung zurücksetzten 0 -
Ausgewähles Element fokusieren {{ fx_minversion_inline("13.0") }} f -
Ansicht (Grösse und Sichtswinkel) zurücksetzten {{ fx_minversion_inline("12.0") }} r -
Ausgewähltes Element ausblenden  {{ fx_minversion_inline("12.0") }} x -

Anwendungsbeispiele

Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:

  • 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.
  • 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.
  • Du kannst die Struktur deiner Seite genau analysieren und so dein Layout optimieren.
  • Und zu guter letzt: Es sieht einfach cool aus!

Siehe auch

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

Quelltext der Version

<p>{{ fx_minversion_header("11") }}</p>
<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="internal default" 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="Controlling_the_3D_view">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 {{ fx_minversion_inline("13.0") }}</td>
   <td>f</td>
   <td>-</td>
  </tr>
  <tr>
   <td>Ansicht (Grösse und Sichtswinkel) zurücksetzten {{ fx_minversion_inline("12.0") }}</td>
   <td>r</td>
   <td>-</td>
  </tr>
  <tr>
   <td>Ausgewähltes Element ausblenden&nbsp; {{ fx_minversion_inline("12.0") }}</td>
   <td>x</td>
   <td>-</td>
  </tr>
 </tbody>
</table>
<h2 id="Use_cases_for_the_3D_view">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="See_also">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>
Zu dieser Version zurücksetzen