30Jun

A Firefox webes fejlesztői eszközeinek használata a Webhelystruktúrák megtekintéséhez 3D-ben

click fraud protection

A Firefox 11 két új webfejlesztő eszközt adott hozzá a Firefox már meglévő arzenáljához. A Tilt funkció a webhely struktúráit 3D-ben ábrázolja, míg a Style Editor szerkesztheti a CSS stíluslapokat.

A 3D-funkció, a Tilt néven ismert, a webhely DOM vizuális megjelenítésének egyik módja.Összekapcsolódik a meglévő dokumentumellenőrzővel, és a WebGL segítségével böngészőben gazdag 3D grafikát jelenít meg.

Tilt - 3D Honlap Vizualizáció

A Tilt a Firefox Page Inspector oldalán érhető el. Az induláshoz nyissa meg az Oldalfelügyelőt az "Inspect" menüpont kiválasztásával a Web Developer menüből. A jobb oldali egérgombbal az aktuális oldalon is kiválaszthatja az "Elem ellenőrzése" elemet, és elindíthatja a felügyelőt egy adott elemen.

Kattintson a "3D" gombra a felügyelő eszköztárán.

A 3D-mód aktiválása után az oldal struktúrája látható, de lapos lesz, amíg forgatja.

Forgassa el a modellt a bal egérgombbal, mozgassa a képet a jobb egérgombbal, majd a egér kerékkel történő nagyításával és kicsinyítésével.

instagram viewer

Ez a nézet integrálva van az ellenőr többi eszközével. Ha a HTML vagy a Stílus panelek megnyitva van, akkor egy elemre kattintva megtekintheti az elem HTML kódját vagy CSS-tulajdonságait.

További 3D funkciók

A 3D-s vizualizációs funkció a Tilt kiterjesztésen alapult, de nem rendelkezik a Tilt kiterjesztés összes funkciójával. Ha a színeket testreszabhatja, vagy 3D formátumú fájlt szeretné exportálni a 3D-s szerkesztési programhoz, akkor telepítenie kell a Tilt 3D bővítményt. Miután megkapta, új "Tilt" lehetőséget kap a Web Developer menüben.

Kattintson a Mégse gombra a régi Tilt-verzió használatához.

A vezérlőelemek az ablak bal oldalán megjelenő vizualizálások testreszabásához és az oldal tetején található egyéb lehetőségekhez, beleértve az exportálási funkciót is.

CSS stílusszerkesztő

Az oldal CSS stíluslapjának megtekintéséhez és szerkesztéséhez nyissa meg a Stílusszerkesztőt a Webfejlesztő menüből.

A stílusszerkesztő felsorolja az aktuális oldal stíluslapjait. A stíluslap be- vagy kikapcsolása a stíluslap neve bal oldalán található szem ikonra kattintva. Módosítsa a stíluslapot a kiválasztásával és a kód módosításával.

A változtatások azonnal megjelenik az oldalon. Ha ki van kapcsolva egy stíluslap, akkor az oldal elveszíti stílusinformációit. Ha szerkesztesz egy stíluslapot, megjelenik az oldal szerkesztés közben történő szerkesztések.

Az egyik stíluslap egy példányát mentheti számítógépére, importálhat egy meglévő stíluslapot a számítógépről, vagy új, üres stíluslapot adhat hozzá a Stílusszerkesztő ablak Mentés, importálása vagy Új hivatkozásokkal.

A 3D-s vizualizációs funkció figyeli az aktuális oldal változtatásait, és észleli a változások bekövetkeztét. Ha a Stílusszerkesztőt használja a 3D ellenőr megnyitásával, a módosítások azonnal megjelenik a 3D nézetben. Ez olyan külső böngészővel is működik, amely módosítja a weboldalakat, mint például a Firebug.