Verwenden der Firefox Web Developer Tools zum Anzeigen von Website-Strukturen in 3D
Firefox 11 fügte Firefoxs bereits beeindruckendes Arsenal um zwei neue Webentwickler-Tools hinzu. Mit der Neigungsfunktion werden Website-Strukturen in 3D visualisiert, während der Stil-Editor CSS-Stylesheets schnell bearbeiten kann.
Die 3D-Funktion, auch Tilt genannt, ist eine Möglichkeit, das DOM einer Website zu visualisieren. Es integriert sich in den vorhandenen Document Inspector und verwendet WebGL, um 3D-Grafiken in Ihrem Browser anzuzeigen.
Tilt - 3D Website-Visualisierung
Sie können im Firefox-Seiteninspektor auf Tilt zugreifen. Öffnen Sie zunächst den Seiteninspektor, indem Sie im Menü "Web Developer" die Option "Inspect" auswählen. Sie können auch mit der rechten Maustaste auf die aktuelle Seite klicken und "Inspect Element" auswählen, um den Inspector an einem bestimmten Element zu starten.
Klicken Sie in der Inspector-Symbolleiste auf die Schaltfläche „3D“.
Nach dem Aktivieren des 3D-Modus wird die Seitenstruktur angezeigt. Sie wird jedoch flach angezeigt, bis Sie sie drehen.
Drehen Sie das Modell durch Klicken mit der linken Maustaste, bewegen Sie das Bild mit der rechten Maustaste und vergrößern oder verkleinern Sie es mit dem Mausrad.
Diese Ansicht ist in die anderen Werkzeuge des Inspektors integriert. Wenn Sie das HTML- oder das Style-Bedienfeld 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-Visualisierungsfunktion basiert auf der Erweiterung Tilt, verfügt jedoch nicht über alle Funktionen der Erweiterung Tilt. Wenn Sie die Farben anpassen oder sogar die Visualisierung als 3D-Modelldatei für die Verwendung mit einem 3D-Bearbeitungsprogramm exportieren möchten, müssen Sie das Tilt 3D-Add-On installieren. Sobald Sie dies getan haben, erhalten Sie im Web Developer-Menü eine neue Option "Tilt".
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 andere Optionen, einschließlich der Exportfunktion, oben auf der Seite.
CSS-Stileditor
Um die CSS-Stylesheets einer Seite anzuzeigen und zu bearbeiten, öffnen Sie den Style-Editor über das Menü Web Developer.
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.
Änderungen werden sofort auf der Seite angezeigt. Wenn Sie ein Stylesheet deaktivieren, verliert die Seite ihre Style-Informationen. Wenn Sie ein Stylesheet bearbeiten, werden die Änderungen während der Eingabe auf der Seite angezeigt.
Sie können eine Kopie eines Stylesheets auf Ihrem Computer speichern, ein vorhandenes Stylesheet von Ihrem Computer importieren oder ein neues leeres Stylesheet mit den Verknüpfungen Save, Import oder New im Style-Editor-Fenster hinzufügen.
Die 3D-Visualisierungsfunktion überwacht die Änderungen auf der aktuellen Seite und benachrichtigt, wenn Änderungen auftreten. Wenn Sie den Stil-Editor bei geöffnetem 3D-Inspector verwenden, werden Ihre Änderungen sofort in der 3D-Ansicht angezeigt. Dies funktioniert auch mit Erweiterungen von Drittanbietern, die Webseiten wie Firebug modifizieren.
