Så här använder du Firefox webbutvecklare för att visa webbsidor i 3D

Firefox 11 lade till två nya webbutvecklare verktyg till Firefox redan imponerande arsenal. Tilt-funktionen visualiserar webbstrukturer i 3D, medan Style Editor kan redigera CSS stylesheets på flyg.

3D-funktionen, känd som Tilt, är ett sätt att visualisera en webbplatsens DOM. Den integreras med den befintliga dokumentinspektören och använder WebGL för att visa rik 3D-grafik i din webbläsare.

Tilt - 3D Website Visualization

Du kan komma åt Tilt från Firefox-inspektören. För att komma igång öppnar du Sidinspektören genom att välja "Inspektera" från webbutvecklaren. Du kan också högerklicka på den aktuella sidan och välja "Inspektera element" för att starta inspektören vid ett visst element.

Klicka på "3D" -knappen på inspektörens verktygsfält.

Du kommer att se sidans struktur efter aktivering av 3D-läget, men det ser platt ut tills du roterar det.

Rotera modellen genom att vänster-klicka, flytta bilden runt genom att högerklicka och zooma in och ut med hjälp av mushjulet.

Denna syn är integrerad med de andra verktygen i inspektören. Om du har HTML- eller Style-paneler öppna kan du klicka på ett element på hte-sidan för att se det elementets HTML-kod eller CSS-egenskaper.

Fler 3D-funktioner

Funktionen 3D-visualisering baserades utanför Tilt-förlängningen, men den har inte alla funktioner i Tilt-förlängningen. Om du vill anpassa färgerna eller till och med exportera visualiseringen som en 3D-modellfil för användning med ett 3D-redigeringsprogram, måste du installera Tilt 3D-tillägget. När du har fått en ny "Tilt" -alternativ i Web Developer-menyn.

Klicka på knappen Avbryt om du vill använda den gamla versionen av Tilt.

Du hittar kontroller för att anpassa visualiseringen till vänster i fönstret och andra alternativ, inklusive exportfunktionen, högst upp på sidan.

CSS Style Editor

Om du vill visa och redigera en sids CSS-stilark öppnar du Style Editor från Web Developer-menyn.

Style-redigeraren visar stilarken på den aktuella sidan. Växla eller inaktivera ett stilark genom att klicka på ögonikonen till vänster om stilarkets namn. Redigera ett stilark genom att markera det och ändra koden.

Ändringar återspeglas direkt på sidan. Om du byter ut ett stilark, kommer sidan att förlora sin stilinformation. Om du redigerar ett stilark ser du ändringarna som visas på sidan medan du skriver.

Du kan spara en kopia av en stilark till din dator, importera ett befintligt formatark från din dator eller lägga till ett nytt, blankt stilark med Spara, Importera eller Nya länkar i Style Editor-fönstret.

3D-visualiseringsfunktionen tittar på ändringar på den aktuella sidan och meddelar när förändringar uppstår. När du använder Style Editor med 3D inspektören öppen visas dina ändringar omedelbart i 3D-vyn. Detta fungerar också med tillägg från tredje part som ändrar webbsidor, till exempel Firebug.