A Firefox webes fejlesztői eszközeinek használata
A Firefox webfejlesztő menüje az oldalak ellenőrzésére szolgáló eszközöket, tetszőleges JavaScript-kód futtatását és a HTTP-kérések és egyéb üzenetek megtekintését tartalmazza. A Firefox 10 új ellenőrző eszközt adott hozzá, és frissítette a Scratchpad programot.
A Firefox új webes fejlesztői funkciói, kombinálva a fantasztikus web-fejlesztői kiegészítőkkel, mint a Firebug és a Web Developer Toolbar, teszik a Firefoxot a webes fejlesztők ideális böngészőjévé. Minden eszköz elérhető a Web Developer webhelyen a Firefox menüjében.
Oldalfelügyelő
Az egér jobb gombjával rákattintva és kiválasztásával ellenőrizze az adott elemet ellenőriz (vagy nyomja meg Q). Elindíthatja a Ellenőr a Web Developer menüből.
A képernyő alján megjelenik egy eszköztár, amelyet az ellenőr irányítására használhat. A kiválasztott elem kiemelve lesz, és az oldal egyéb elemei elhalványulnak.
Ha új elemet szeretne kiválasztani, kattintson a gombra ellenőriz gombot az eszköztáron, vigye az egeret az oldalra, és kattintson az elemre. A Firefox kiemeli a kurzor alatt lévő elemet.
A szülő- és gyermekelemek között navigálhat az eszköztáron található kenyérhúzóra kattintva.
HTML ellenőr
Kattints a HTML gomb az aktuálisan kiválasztott elem HTML-kódjának megtekintéséhez.
A HTML-ellenőr lehetővé teszi, hogy bővítse és összecsukja a HTML-címkéket, így könnyen áttekinthetővé válik. Ha egy lapos fájlban szeretné látni az oldal HTML-jét, kiválaszthatja Oldal forrásának megtekintése a Web Developer menüből.
CSS ellenőr
Kattints a Stílus gomb a kiválasztott elemre vonatkozó CSS szabályok megtekintéséhez.
Van még egy CSS tulajdonságok panel - a kettő közötti váltás a szabályok és Tulajdonságok gombokat. A speciális tulajdonságok megtalálásához a tulajdonságok panel tartalmaz egy keresőmezőt.
Az elemek CSS-jét módosíthatja a Szabályok panelen. Törölje a jelölőnégyzetek valamelyikét a szabály kikapcsolásához, kattintson a szövegre a szabály módosításához, vagy adja hozzá saját szabályait a panel tetején lévő elemhez. Itt hozzáadtam a font-súly: félkövér; CSS szabály, ami az elem szövegét merészvé teszi.
JavaScript Scratchpad
A Scratchpad egy frissítést is észlelt a Firefox 10-gyel, és most szintaxis-kiemelést tartalmaz. A JavaScript-kódot az aktuális oldalon futtathatja.
Ha már van, kattintson a gombra kivégez menüt, és válassza a lehetőséget Fuss. A kód az aktuális lapon fut.
Webkonzol
A webkonzol helyettesíti a régi hibakonzolt, amely elavult, és eltávolításra kerül a Firefox jövőbeni verziójában.
A konzol négy különböző típusú üzenetet jelenít meg, amelyekkel megváltoztathatja a - hálózati kérések, CSS hibaüzenetek, JavaScript hibaüzenetek és webfejlesztői üzenetek - láthatóságát.
Mi a webes fejlesztői üzenet? Ez az üzenet az ablak.console objektumra lett nyomtatva. Például futtathatjuk a window.console.log („Hello World”); JavaScript-kód a Scratchpad-ban, hogy egy fejlesztői üzenetet nyomtasson a konzolra. A webfejlesztők integrálhatják ezeket az üzeneteket a JavaScript-kódjukba a hibakereséshez.
Frissítse az oldalt, és megjelenik a generált hálózati kérések és egyéb üzenetek.
Az üzenetek szűréséhez használja a keresőmezőt; kattintson egy kérésre, ha további részleteket szeretne látni.
A Firefox 10-től kezdődően a webkonzol párhuzamosan működik az oldalfelügyelővel. A $ 0 változó az aktuálisan kiválasztott objektumot jelenti az ellenőrben. Ha például el szeretné rejteni az aktuálisan kiválasztott objektumot, akkor futtathat $ 0.style.display =”none” a konzolban.
Ha szeretne többet megtudni a konzol használatáról és a beépített funkciókról, nézze meg a Web Console oldalt a Mozilla Fejlesztői Hálózatának honlapján.
További eszközök beszerzése
A További eszközök beszerzése opció a Mozilla Add-Ons webhelyén található webes fejlesztő eszközkészlet-kiegészítő gyűjteményéhez jut. A webes fejlesztőknek a legjobb kiegészítőit tartalmazza, beleértve a Firebugot és a Web Developer Toolbar-ot.
Ha néhány éve használja a Firefoxot, emlékezhet a DOM ellenőrére. A Firefox integrált fejlesztői eszközei azóta hosszú utat tettek.
