Webfejlesztő eszközök – Mozilla Firefox

A Mozilla Firefox-ban csakúgy mint a Google Chrome-ban megtalálható az – immár integrált – webfejlesztő eszköz. A Chrome webfejlesztő eszközökről szóló cikkünket itt olvashatod.

Mozilla Firefox fejlesztői eszközök

Míg a Google a funkcionalitásra, addig a Mozilla inkább a látványra helyezi a hangsúlyt a webfejlesztő eszközében.

Az eszköz ugyanolyan billentyűkombinációval indítható, mint a Chrome-nál: ctrl-shift-i gombokkal. Menüből a Firefox főmenü->Webfejlesztő->Vizsgálat pontban lehet elindítani.

Az egyes elemekre kattintva meg lehet nézni azok kódját, illetve a kódra kattintva megmutatja a hozzá tartozó elemet. A Chromehoz hasonlóan a jobb oldalon megmutatja a megfelelő css kódokat az oldal egyes részeihez, és itt is ki- és bekapcsolhatóak az egyes definiált css kódok. A HTML kódot is nagyrészt kedvünkre módosíthatjuk, csakúgy, mint a Chrome esetében.

Jó tudni!

A Google Chrome-hoz hasonlóan nem végzünk módosítást a szerveren, csak a böngészőben változtatunk a kinézeten, a frissítés gomb megnyomása után minden visszaáll az oldalon eredeti kinézetére.

A 3D-s nézet a leglátványosabb eleme a webfejlesztő eszközöknek. A látványosságon kívül értelme is van: segítséget nyújt megérteni az oldal felépítését. Az egyes rétegekre kattintva megmutatja azok kódjait.

CSS stílusszerkesztő

A shift-F7 gombok megnyomásával indíthatjuk a Stílusszerkesztőt. A stílusszerkesztőben lehet megnézni az oldal CSS kódjait. A szerkesztő ablakban a bal oldalon láthatjuk az egyes css fájlokat, ezeket ki- és bekapcsolhatjuk a szem ikonra kattintva. Példánk egy WordPress oldal, amely stílusának fő css-ét kapcsoltam le. A képen lehet látni a különbséget:

Természetesen a css-t módosítani is lehet, még másolat mentésére is lehetőséget ad a Firefox.

Ha nem lennénk megelégedve a beépített webfejlesztő eszközökkel, lehetőségünk van letölteni különféle egyéb webfejlesztő kiegészítőket, mint pl. a Firebug.

2 Hozzászólás

Hozzászólás küldése

Kövess minket!