Firefox 11 la til to nye webutviklerverktøy til Firefoxs allerede imponerende arsenal . Tilt-funksjonen visualiserer nettstedstrukturer i 3D, mens Style Editor kan redigere CSS-stilark på farten.
3D-funksjonen, kjent som Tilt, er en måte å visualisere DOM på et nettsted. Den integreres med den eksisterende Document Inspector og bruker WebGL til å vise rik 3D-grafikk i nettleseren din.
Tilt - 3D nettstedvisualisering
Du kan få tilgang til Tilt fra Firefox's Page Inspector. For å komme i gang, åpne Sideinspektør ved å velge "Inspiser" fra Webutvikler-menyen. Du kan også høyreklikke på den gjeldende siden og velge "Inspiser element" for å starte inspektøren ved et bestemt element.
Klikk på “3D” -knappen på inspektørens verktøylinje.
Du ser sidestrukturen etter at du har aktivert 3D-modus, men den vil se flat ut til du roterer den.
Roter modellen ved å venstreklikke, flytt bildet rundt ved å høyreklikke, og zoome inn og ut ved hjelp av mushjulet.
Denne visningen er integrert med de andre verktøyene i inspektøren. Hvis du har HTML- eller stilpanelene åpne, kan du klikke på et element på hte-siden for å se elementets HTML-kode eller CSS-egenskaper.
Flere 3D-funksjoner
3D-visualiseringsfunksjonen var basert på Tilt-utvidelsen, men den har ikke alle funksjonene i Tilt-utvidelsen. Hvis du vil tilpasse fargene eller til og med eksportere visualiseringen som en 3D-modellfil for bruk med et 3D-redigeringsprogram, må du installere Tilt 3D-tillegg . Når du har gjort det, får du et nytt "Tilt" -alternativ i Web Developer-menyen.
Klikk på Avbryt-knappen for å bruke den gamle versjonen av Tilt når du blir bedt om det.
Du finner kontroller for å tilpasse visualiseringen til venstre i vinduet og andre alternativer, inkludert eksportfunksjonen, øverst på siden.
CSS Style Editor
For å vise og redigere CSS-stilark på en side, åpner du Style Editor fra Web Developer-menyen.
Style-editoren viser stilarkene på den gjeldende siden. Slå et stilark på eller av ved å klikke på øyeikonet til venstre for stilarkets navn. Rediger et stilark ved å velge det og endre koden.
Endringer gjenspeiles på siden umiddelbart. Hvis du slår av et stilark, mister siden stilinformasjonen. Hvis du redigerer et stilark, ser du endringene vises på siden mens du skriver.
Du kan lagre en kopi av ett av stilarkene på datamaskinen, importere et eksisterende stilark fra datamaskinen eller legge til et nytt, tomt stilark med Lagre, Importer eller Ny-koblingene i Style Editor-vinduet.
3D-visualiseringsfunksjonen ser etter endringer på den gjeldende siden og merker når endringer skjer. Når du bruker Style Editor med 3D-inspektøren åpen, vil endringene dine gjenspeiles umiddelbart i 3D-visningen. Dette fungerer også med tredjepartsutvidelser som endrer nettsider, for eksempel Firebug.
