Firefox 11 lade till två nya webbutvecklarverktyg till Firefox redan imponerande arsenal . Tilt-funktionen visualiserar webbplatsstrukturer i 3D, medan Style Editor kan redigera CSS-formatmallar direkt.
3D-funktionen, känd som Tilt, är ett sätt att visualisera en webbplats DOM. Den integreras med den befintliga Document Inspector och använder WebGL för att visa rik 3D-grafik i din webbläsare.
Tilt - 3D-webbplatsvisualisering
Du kan komma åt Tilt från Firefox's Page Inspector. För att komma igång, öppna sidinspektören genom att välja "Inspektera" från webbutvecklarmenyn. 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 i inspektörens verktygsfält.
Du ser sidans struktur efter att du har aktiverat 3D-läge, men det ser platt ut tills du roterar det.
Rotera modellen genom att vänsterklicka, flytta bilden genom att högerklicka och zooma in och ut med mushjulet.
Denna vy är integrerad med de andra verktygen i inspektören. Om du har HTML- eller Style-panelerna öppna kan du klicka på ett element på hte-sidan för att visa elementets HTML-kod eller CSS-egenskaper.
Fler 3D-funktioner
3D-visualiseringsfunktionen baserades på Tilt-tillägget, men den har inte alla funktioner i Tilt-tillägget. 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ägg . När du har gjort får du ett nytt "Tilt" -alternativ i Web Developer-menyn.
Klicka på knappen Avbryt för att använda den gamla versionen av Tilt när du uppmanas till det.
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 sidas CSS-formatmallar öppnar du Style Editor från Web Developer-menyn.
Stilredigeraren listar stilarken på den aktuella sidan. Aktivera eller inaktivera ett formatmall genom att klicka på ögonikonen till vänster om stilmallens namn. Redigera ett formatmall genom att markera det och ändra koden.
Ändringar återspeglas omedelbart på sidan. Om du stänger av ett stilark förlorar sidan sin stilinformation. Om du redigerar ett formatmall visas ändringarna på sidan medan du skriver.
Du kan spara en kopia av ett av formatmallen till din dator, importera ett befintligt formatmall från din dator eller lägga till ett nytt, tomt formatmall med länkarna Spara, Importera eller Nytt i Style Editor-fönstret.
3D-visualiseringsfunktionen bevakar ändringar på den aktuella sidan och märker när förändringar inträffar. När du använder Style Editor med 3D-inspektören öppen återspeglas dina ändringar direkt i 3D-vyn. Detta fungerar också med tillägg från tredje part som ändrar webbsidor, till exempel Firebug.
