13Sep
A Firefox Web Developer menüje az oldalak ellenőrzésére szolgáló eszközöket, tetszőleges JavaScript kódot végrehajt, valamint a HTTP-kérelmek és egyéb üzenetek megtekintését. A Firefox 10 új felügyeleti eszközt és frissített Scratchpad-ot adott hozzá.
A Firefox új webfejlesztői funkciói, a félelmetes webfejlesztő kiegészítőkkel, például a Firebug-kal és a Web Developer Toolbar-kal együtt, a Firefox ideális böngészője a webfejlesztőknek. Minden eszköz rendelkezésre áll a Webfejlesztő alatt a Firefox menüjében.
Oldal ellenőrző
Megvizsgálni egy adott elemet a jobb egérgombbal történő kattintással és az ellenőrzése ( vagy az Q megnyomásával).Az felügyelőt is elindíthatja a Web Developer menüből.
A képernyő alján egy eszköztár jelenik meg, amelyet az ellenőr vezérléséhez használhat. A kijelölt elem kiemelve lesz, és az oldalon lévő más elemek elhalványulnak.
Ha új elemet szeretne választani, kattintson az Inspect gombra az eszköztáron, vigye az egeret az oldal fölé, és kattintson az elemre. A Firefox kiemeli az elemet a kurzor alatt.
A szülő és a gyermek elemek között az eszköztáron található rágógumikra kattintva navigálhat.
HTML ellenőrző
Kattintson az HTML gombra az aktuálisan 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 formátumát egy lapos fájlban szeretné látni, kiválaszthatja az Az oldalforrás megjelenítése a Web Developer menüből.
CSS ellenőrző
Kattintson az stílus gombra, hogy megjelenítse a kiválasztott elem CSS szabályait.
Van egy CSS tulajdonságpanel is - váltson a kettő között az szabályok és tulajdonságai gombjára kattintva. 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á az font-weight: bold; CSS szabály, az elem szövegének vastagsága.
JavaScript Scratchpad
A Scratchpad egy frissítést is látott a Firefox 10 programmal, és most tartalmaz szintaxiskiemelést.Írhat be JavaScript-kódot az aktuális oldalon való futtatáshoz.
Ha van ilyen, kattintson az Execute menüre, és válassza az Run parancsot. A kód fut az aktuális lapon.
Web konzol
A Web 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.
A konzol négy különböző típusú üzenetet jelenít meg, amelyek segítségével átválthatja a hálózati kérések, CSS hibaüzenetek, JavaScript hibaüzenetek és webfejlesztő üzenetek láthatóságát.
Mi az a webfejlesztő üzenet? Ez egy üzenet az ablak.konzol objektumra nyomtatva. Például futtathatnánk az ablakot.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.
Frissítse az oldalt, és megjelenik a generált hálózati kérelmek és egyéb üzenetek.
A keresőmező segítségével szűrheti az üzeneteket;kattintson egy kérelemre, ha további részleteket szeretne látni.
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. Például, ha el szeretné rejteni a jelenleg kiválasztott objektumot, akkor a konzolban $ 0.style.display = "none" futtatható.
Ha többet szeretne megtudni a konzol használatáról és a beépített funkciókról, nézze meg a Mozilla Developer Network webhelyén található Web Console oldalt.
További eszközök beszerzése
Az További eszközök beszerzése Az opció 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.