So verwenden Sie die Webentwicklungswerkzeuge von Firefox zum Anzeigen von Webseitenstrukturen in 3D

Firefox 11 fügte dem bereits beeindruckenden Arsenal von Firefox zwei neue Web-Entwickler-Tools hinzu. Die Tilt-Funktion visualisiert Websitestrukturen in 3D, während der Style-Editor CSS-Stylesheets im Handumdrehen bearbeiten kann.

Die 3D-Funktion, bekannt als Tilt, ist eine Möglichkeit, das DOM einer Website zu visualisieren. Es integriert sich in den vorhandenen Dokumentinspektor und verwendet WebGL, um in Ihrem Browser umfangreiche 3D-Grafiken anzuzeigen.

Tilt - 3D-Website-Visualisierung

Sie können über den Seiten-Inspektor von Firefox auf Tilt zugreifen. Um zu beginnen, öffnen Sie den Page Inspector, indem Sie im Web Developer-Menü auf "Inspect" klicken. Sie können auch mit der rechten Maustaste auf die aktuelle Seite klicken und "Element prüfen" auswählen, um den Inspektor bei einem bestimmten Element zu starten.

Klicken Sie in der Inspektor-Symbolleiste auf die Schaltfläche "3D".

Sie sehen die Struktur der Seite nach dem Aktivieren des 3D-Modus, aber sie wird flach aussehen, bis Sie sie drehen.

Drehen Sie das Modell mit der linken Maustaste, bewegen Sie das Bild mit der rechten Maustaste und vergrößern und verkleinern Sie es mit dem Mausrad.

Diese Ansicht ist mit den anderen Tools im Inspector integriert. Wenn Sie den HTML- oder den Stilbereich geöffnet haben, können Sie auf ein Element auf der Seite klicken, um den HTML-Code oder die CSS-Eigenschaften dieses Elements anzuzeigen.

Weitere 3D-Funktionen

Die 3D-Visualisierung basierte auf der Tilt-Erweiterung, verfügt jedoch nicht über alle Funktionen der Tilt-Erweiterung. Wenn Sie die Farben anpassen oder die Visualisierung als 3D-Modelldatei für ein 3D-Bearbeitungsprogramm exportieren möchten, müssen Sie das Tilt 3D-Add-on installieren. Sobald Sie haben, erhalten Sie eine neue "Tilt" -Option im Web Developer-Menü.

Klicken Sie auf die Schaltfläche Abbrechen, um die alte Version von Tilt zu verwenden, wenn Sie dazu aufgefordert werden.

Auf der linken Seite des Fensters finden Sie Steuerelemente zum Anpassen der Visualisierung und oben auf der Seite weitere Optionen, einschließlich der Exportfunktion.

CSS-Stil-Editor

Zum Anzeigen und Bearbeiten der CSS-Stylesheets einer Seite öffnen Sie den Stil-Editor im Menü Web Developer.

Der Style-Editor listet die Stylesheets auf der aktuellen Seite auf. Sie können ein Stylesheet ein- oder ausschalten, indem Sie auf das Augensymbol links neben dem Namen des Stylesheets klicken. Bearbeiten Sie ein Stylesheet, indem Sie es auswählen und den Code ändern.

Änderungen werden sofort auf der Seite angezeigt. Wenn Sie ein Stylesheet deaktivieren, verliert die Seite ihre Stilinformationen. Wenn Sie ein Stylesheet bearbeiten, werden die Änderungen während der Eingabe auf der Seite angezeigt.

Sie können eine Kopie eines der Stylesheets auf Ihrem Computer speichern, ein vorhandenes Stylesheet von Ihrem Computer importieren oder ein neues, leeres Stylesheet mit den Verknüpfungen Speichern, Importieren oder Neu im Fenster Style-Editor hinzufügen.

Die 3D-Visualisierungsfunktion überwacht Änderungen auf der aktuellen Seite und benachrichtigt Sie, wenn Änderungen auftreten. Wenn Sie den Style-Editor mit geöffnetem 3D-Inspektor verwenden, werden Ihre Änderungen sofort in der 3D-Ansicht angezeigt. Dies funktioniert auch mit Erweiterungen von Drittanbietern, die Webseiten wie Firebug ändern.