A Firefox új webfejlesztő funkciói, a félelmetes webfejlesztő kiegészítőkkel együtt, mint a Firebug és a Web Developer Toolbar, a Firefox-ot a böngészők számára ideális böngészővé teszik. Minden eszköz rendelkezésre áll a Webfejlesztő alatt a Firefox menüjében.
Page Inspector
Ellenőrizze az adott elemet a jobb egérgombbal történő kattintással és kiválasztásával ellenőriz (vagy nyomja meg Q). Elindíthatja a Ellenőr a Webfejlesztő menüből.
Ha új elemet szeretne választani, kattintson a ellenőriz gombra az eszköztáron, húzza az egeret az oldal fölé, és kattintson az elemre. A Firefox kiemeli az elemet a kurzor alatt.
HTML ellenőrző
Kattints a HTML gombra a jelenleg kiválasztott elem HTML kódjának megtekintéséhez.
A HTML-ellenőrző lehetővé teszi a HTML-címkék kibontását és összeomlását, így egyszerűen megjeleníthetők. Ha az oldal HTML-fájlját lapos fájlban szeretné látni, kiválaszthatja Oldal forrásának megtekintése a Webfejlesztő menüből.
CSS Inspector
Kattints a Stílus gombra kattintva megtekintheti a kiválasztott elemre alkalmazott CSS-szabályokat.
Van még egy CSS tulajdonságpanel is - váltson a kettő között a szabályok és Tulajdonságok gombokat. A konkrét tulajdonságok megtalálásához a tulajdonságpanel tartalmaz egy keresőmezőt.
Az elemek CSS-jét szerkesztheti a Szabályok panelen. Törölje a jelölőnégyzetek bármelyikét egy szabály kikapcsolásához, kattintson a szövegre egy szabály megváltoztatásához, vagy adjon hozzá saját szabályokat az ablaktábla tetején található elemhez. Itt adtam hozzá font-weight: bold; CSS szabály, így az elem szövegének vastagsága látható.
JavaScript Scratchpad
A Scratchpad frissítést is látott a Firefox 10 programmal, és most tartalmaz szintaktikai kiemelést. Írhat be JavaScript-kódot az aktuális oldalon való futtatáshoz.
Ha van, kattintson a kivégez menüben és válasszuk ki Fuss. A kód fut az aktuális lapon.
Web konzol
A webes konzol felváltja a régi Error Console-t, amely elavult, és eltávolításra kerül a jövőbeli Firefox-verzióban.
Mi az a webfejlesztő üzenet? Ez egy üzenet az ablak.konzol objektumra nyomtatva. Például futtathatjuk a window.console.log ("Hello World"); JavaScript kódot a Scratchpadon, hogy egy fejlesztői üzenetet nyomtasson a konzolhoz. A webes fejlesztők integrálhatják ezeket az üzeneteket JavaScript kódjukba a hibakereséshez.
A Firefox 10-től kezdve a Web Console együttműködik az Oldalfelügyelővel. A $ 0 változó a jelenleg kiválasztott objektumot jelöli meg az ellenőrben. Tehát például, ha el szeretné rejteni a jelenleg kiválasztott objektumot, futtathatta $ 0.style.display =”none” a konzolban.
További eszközök beszerzése
A További eszközök beszerzése lehetőség a Mozilla Add-Ons weboldalon megjelenik a Web Developer's Toolbox bővítmény gyűjteményéhez. Tartalmaz néhány, a webfejlesztők számára elérhető legjobb kiegészítőket, többek között a Firebug és a Web Developer Toolbar.
Ha néhány éve használja a Firefoxot, akkor emlékezhet a DOM felügyelőre. A Firefox beépített fejlesztői eszközei azóta hosszú utat tettek meg.
