Sådan bruges Firefox's webudviklerværktøjer til at se webstedsstrukturer i 3D
Firefox 11 tilføjede to nye web-udvikler værktøjer til Firefox allerede imponerende arsenal. Tilt-funktionen visualiserer webstedsstrukturer i 3D, mens Style Editor kan redigere CSS stylesheets på farten.
3D-funktionen, kendt som Tilt, er en måde at visualisere et websites DOM på. Den integreres med den eksisterende dokumentinspektør og bruger WebGL til at vise rig 3D grafik i din browser.
Tilt - 3D Website Visualization
Du kan få adgang til Tilt fra Firefox's Page Inspector. For at komme i gang skal du åbne Page Inspector ved at vælge "Inspect" fra Web Developer-menuen. Du kan også højreklikke på den aktuelle side og vælge "Inspicer element" for at starte inspektøren ved et bestemt element.
Klik på knappen "3D" på inspektørens værktøjslinje.
Du kan se sidens struktur efter aktivering af 3D-tilstand, men det vil se fladt ud, indtil du roterer det.
Drej modellen ved at venstre-klikke, flyt billedet rundt ved at højreklikke og zoom ind og ud ved hjælp af musehjulet.
Denne opfattelse er integreret med de andre værktøjer i inspektøren. Hvis du har HTML- eller Style-panelerne åbne, kan du klikke på et element på hte-siden for at se elementets HTML-kode eller CSS-egenskaber.
Flere 3D-funktioner
3D-visualiseringsfunktionen var baseret på Tilt-udvidelsen, men den har ikke alle funktionerne i Tilt-udvidelsen. hvis du vil tilpasse farverne eller endda eksportere visualiseringen som en 3D-modelfil til brug med et 3D-redigeringsprogram, skal du installere Tilt 3D-tilføjelsen. Når du har, får du en ny "Tilt" indstilling i Webudvikler menuen.
Klik på knappen Annuller for at bruge den gamle version af Tilt, når du bliver bedt om det.
Du finder kontroller til at tilpasse visualiseringen til venstre i vinduet og andre muligheder, herunder eksportfunktionen øverst på siden.
CSS Style Editor
Hvis du vil se og redigere en sides CSS-stilark, skal du åbne Style Editor fra menuen Webudvikler.
Style-editoren viser stilarkene på den aktuelle side. Skift et stylesheet til eller fra ved at klikke på øjenikonet til venstre for stilarkets navn. Rediger et stylesheet ved at vælge det og ændre koden.
Ændringer afspejles øjeblikkeligt på siden. Hvis du skifter et stilark ud, mister siden sin stiloplysninger. Hvis du redigerer et stylesheet, vises redigeringerne på siden, mens du skriver.
Du kan gemme en kopi af en af stilarkene til din computer, importere et eksisterende stylesheet fra din computer eller tilføje et nyt, blankt stilark med Gem, Import eller Nye links i Style Editor-vinduet.
Funktionen 3D visualisering overvåger ændringer på den aktuelle side og meddeler, hvornår der opstår ændringer. Når du bruger Style Editor med 3D-inspektøren åben, vises dine ændringer straks i 3D-visningen. Dette fungerer også med tredjepartsudvidelser, der ændrer websider, f.eks. Firebug.
