Slik bruker du Firefox webutviklerverktøy for å se websidestrukturer i 3D

Firefox 11 la til to nye webutviklerverktøy til Firefox allerede imponerende arsenal. Tilt-funksjonen visualiserer nettstedstrukturer i 3D, mens Style Editor kan redigere CSS stilark på fly.

3D-funksjonen, kjent som Tilt, er en måte å visualisere et nettsteds DOM på. Den integreres med den eksisterende dokumentinspektøren og bruker WebGL til å vise rik 3D-grafikk i nettleseren din.

Tilt - 3D Website Visualisering

Du kan få tilgang til Tilt fra Firefox's Page Inspector. For å komme i gang, åpne Page Inspector ved å velge "Inspiser" fra Web Developer-menyen. Du kan også høyreklikke på den aktuelle siden og velge "Inspiser element" for å starte inspektøren ved et bestemt element.

Klikk på "3D" -knappen på inspektørens verktøylinje.

Du vil se sidens struktur etter aktivering av 3D-modus, men det vil se flatt til du roterer det.

Roter modellen ved å venstre-klikke, flytte bildet rundt ved å høyreklikke og zoome inn og ut med musens hjul.

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-tillegget. Når du har, 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

Hvis du vil vise og redigere en sides CSS-stilark, åpner du stilredigereren fra Webutvikler-menyen.

Stileditoren viser stilarkene på gjeldende side. Slå et stilark av eller på ved å klikke på øyepunktet til venstre for stilarket. Rediger et stilark ved å velge det og endre koden.

Endringer reflekteres umiddelbart på siden. Hvis du bytter ut et stilark, vil siden miste stilinformasjonen. Hvis du redigerer et stilark, ser du endringene som vises på siden mens du skriver.

Du kan lagre en kopi av en av stilarkene til datamaskinen din, importere et eksisterende stilark fra datamaskinen din, eller legge til et nytt, blankt stilark med lagre, importer eller nye koblinger i vinduet Style Editor..

3D-visualiseringsfunksjonen overvåker endringer på gjeldende side og merker når endringer oppstår. 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.