Firefox 11 hat zwei neue Webentwickler-Tools hinzugefügt Das bereits beeindruckende Arsenal von Firefox . Die Neigungsfunktion visualisiert Website-Strukturen in 3D, während der Stil-Editor CSS-Stylesheets im laufenden Betrieb bearbeiten kann.
Die als Tilt bezeichnete 3D-Funktion dient zur Visualisierung des DOM einer Website. Es lässt sich in den vorhandenen Dokumenteninspektor integrieren und verwendet WebGL, um umfangreiche 3D-Grafiken in Ihrem Browser anzuzeigen.
Tilt - 3D-Website-Visualisierung
Sie können über den Seiteninspektor von Firefox auf Tilt zugreifen. Öffnen Sie zunächst den Seiteninspektor, indem Sie im Webentwickler-Menü die Option „Inspizieren“ auswählen. Sie können auch mit der rechten Maustaste auf die aktuelle Seite klicken und "Element prüfen" auswählen, um den Inspektor an einem bestimmten Element zu starten.
Klicken Sie in der Inspektor-Symbolleiste auf die Schaltfläche „3D“.
Nach dem Aktivieren des 3D-Modus wird die Seitenstruktur angezeigt. Sie sieht jedoch flach aus, bis Sie sie drehen.
Drehen Sie das Modell durch Klicken mit der linken Maustaste, verschieben Sie das Bild durch Klicken mit der rechten Maustaste und zoomen Sie mit dem Mausrad hinein und heraus.
Diese Ansicht ist in die anderen Tools des Inspektors integriert. Wenn Sie die HTML- oder Stilfenster 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 Tilt-Erweiterung, verfügt jedoch nicht über alle Funktionen der Tilt-Erweiterung. Wenn Sie die Farben anpassen oder die Visualisierung sogar als 3D-Modelldatei zur Verwendung mit einem 3D-Bearbeitungsprogramm exportieren möchten, müssen Sie die installieren Kippen Sie das 3D-Add-On . Sobald Sie dies getan haben, erhalten Sie im Webentwickler-Menü eine neue Option "Neigen".
Klicken Sie auf die Schaltfläche Abbrechen, um die alte Version von Tilt zu verwenden, wenn Sie dazu aufgefordert werden.
Sie finden Steuerelemente zum Anpassen der Visualisierung auf der linken Seite des Fensters und andere Optionen, einschließlich der Exportfunktion, oben auf der Seite.
CSS Style Editor
Öffnen Sie zum Anzeigen und Bearbeiten der CSS-Stylesheets einer Seite den Style-Editor im Web Developer-Menü.
Der Stileditor 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 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 Links Speichern, Importieren oder Neu im Fenster Stileditor hinzufügen.
Die 3D-Visualisierungsfunktion überwacht Änderungen auf der aktuellen Seite und erkennt, wenn Änderungen auftreten. Wenn Sie den Stileditor bei geöffnetem 3D-Inspektor verwenden, werden Ihre Änderungen sofort in der 3D-Ansicht angezeigt. Dies funktioniert auch mit Erweiterungen von Drittanbietern, die Webseiten ändern, z. B. Firebug.
