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.