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

Tartalomjegyzék:

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

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

Videó: A Firefox webes fejlesztői eszközeinek használata a Webhelystruktúrák megtekintéséhez 3D-ben
Videó: Hacking IP Cameras with master hacker OccupyTheWeb 2024, November
Anonim
A Firefox 11 két új webfejlesztő eszközt adott a Firefox már meglévő arzenáljába. A Tilt funkció a webhely struktúráit 3D-ben ábrázolja, míg a Style Editor szerkesztheti a CSS stíluslapokat.
A Firefox 11 két új webfejlesztő eszközt adott a Firefox már meglévő arzenáljába. A Tilt funkció a webhely struktúráit 3D-ben ábrázolja, míg a Style Editor szerkesztheti a CSS stíluslapokat.

A 3D-s funkció, a Tilt néven ismert módja egy weboldal DOM vizualizálásának. Ö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álás

Hozzáférhet a Tilt-ból a Firefox Page Inspector oldalán. 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.
Kattintson a "3D" gombra a felügyelő eszköztárán.
A 3D-mód aktiválása után megjelenik az oldal szerkezete, de lapos lesz, amíg el nem forgatja.
A 3D-mód aktiválása után megjelenik az oldal szerkezete, de lapos lesz, amíg el nem forgatja.
Forgassa el a modellt a bal egérgombbal, mozgassa a képet a jobb egérgombbal, majd nagyítsa ki és kicsinyítse az egér kereket.
Forgassa el a modellt a bal egérgombbal, mozgassa a képet a jobb egérgombbal, majd nagyítsa ki és kicsinyítse az egér kereket.
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.
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.
Image
Image

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ő 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égsem gombra a régi Tilt-verzió használatához.
Kattintson a Mégsem gombra a régi Tilt-verzió használatához.
A vezérlőelemek az ablak bal oldalán megjelenő vizualizálást és az oldal tetején található egyéb opciókat, köztük az exportálási funkciót testreszabhatja.
A vezérlőelemek az ablak bal oldalán megjelenő vizualizálást és az oldal tetején található egyéb opciókat, köztük az exportálási funkciót testreszabhatja.
Image
Image

CSS stílusszerkesztő

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

A stílusszerkesztő felsorolja a stíluslapokat az aktuális oldalon. 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 stílusszerkesztő felsorolja a stíluslapokat az aktuális oldalon. 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.
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 a számítógépre, 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.
Az egyik stíluslap egy példányát mentheti a számítógépre, 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 módosításait, és észleli a változások bekövetkezésé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.

Ajánlott: