Cloud und Internet

So verwenden Sie die Webentwickler-Tools von Firefox, um Website-Strukturen in 3D anzuzeigen


Firefox 11 hat dem bereits beeindruckenden Arsenal von Firefox zwei neue Webentwickler-Tools hinzugefügt. Die Tilt-Funktion visualisiert Website-Strukturen 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 lässt sich in den vorhandenen Document Inspector integrieren und verwendet WebGL, um reichhaltige 3D-Grafiken in Ihrem Browser anzuzeigen.

Tilt – 3D-Website-Visualisierung

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

So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Klicken Sie in der Symbolleiste des Inspektors auf die Schaltfläche „3D“.

1622823616 356 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Sie sehen die Struktur der Seite, nachdem Sie den 3D-Modus aktiviert haben, aber sie sieht flach aus, bis Sie sie drehen.

1622823617 200 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Drehen Sie das Modell mit der linken Maustaste, verschieben Sie das Bild mit der rechten Maustaste und zoomen Sie mit dem Mausrad hinein und heraus.1622823617 803 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Diese Ansicht ist in die anderen Tools im Inspektor integriert. Wenn die Bedienfelder HTML oder Stil geöffnet sind, können Sie auf ein Element auf der Seite klicken, um den HTML-Code oder die CSS-Eigenschaften dieses Elements anzuzeigen.

1622823617 752 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Weitere 3D-Funktionen

Die 3D-Visualisierungsfunktion basiert auf der Tilt-Erweiterung, verfügt jedoch nicht über alle Funktionen der Tilt-Erweiterung. Wenn Sie die Farben anpassen oder die Visualisierung sogar als 3D-Modelldatei für die Verwendung mit einem 3D-Bearbeitungsprogramm exportieren möchten, müssen Sie die Tilt-3D-Add-on. Sobald Sie dies getan haben, erhalten Sie eine neue Option „Tilt“ im Web Developer-Menü.

1622823618 314 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

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

1622823618 680 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

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

1622823618 64 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

CSS-Stil-Editor

Um die CSS-Stylesheets einer Seite anzuzeigen und zu bearbeiten, öffnen Sie den Style-Editor über das Web Developer-Menü.

1622823619 130 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Der Style-Editor listet die Stylesheets auf der aktuellen Seite auf. Schalten Sie ein Stylesheet ein oder aus, 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.

1622823619 115 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

Ä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.

1622823619 894 So verwenden Sie die Webentwickler Tools von Firefox um Website Strukturen in

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 Style-Editor-Fenster hinzufügen.


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



Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ähnliche Artikel

Schaltfläche "Zurück zum Anfang"