Sokan nem ismerik őket, pedig fejlesztés során hatalmas segítséget jelenthetnek. A Chrome böngésző beépített Developer Tools-ára, és a Firefoxhoz telepíthető Firebug kiegészítőre gondok.
(A Firebug egy csökkentett Lite verziója telepíthető Chrome alá is, de a Chrome saját eszközével jobban járunk.)

Hogy mit tudunk ezekkel kezdeni? Gyakorlatilag bármilyen front-end manipulációt végre tudunk velük hajtani. És miért jó ez nekünk? Nos ezt fogom bemutatni a következő sorokban.

Hogyan lehet előhívni?

A Chrome Developer Toolst Windows alatt az F12 billentyűvel, OSX alatt a CMD+ALT+i billentyűkombinációval, Firefoxban a Firebugot F12 billentyűvel lehet előhívni.

Chrome Developer Tools

Firebug

A két eszköz felülete hasonló, elsőre a bal oldalon az oldal forrását, jobb oldalon pedig a forrásban kijelölt elemre vonatkozó stílusokat láthatjuk.

Mindegyik eszköz tartalmaz egy úgynevezett inspector eszközt, ezt a Chrome-ban a bal alsó sarokban található nagyítóval, Firebugban pedig a bal felső sarokban, a  ikonra kattintva aktiválhatjuk. Ezzel az eszközzel a dokumentumban kiválasztva a kívánt területet, a bal oldalon a kódban is a kiválasztott területre ugrik.

A legjobb most következik: a kódot itt szerkeszthetjük is! Ha a jobb oldalon a css résznél bármelyik tulajdonság mögé kattintasz, máris hozzáad egy új sort, ahová felveheted a saját tulajdonságodat. A tulajdonságok előtti pipával pedig ki-be kapcsolhatjuk az egyes tulajdonságokat. Az jobb oszlopban lefelé görgetve megnézhetjük azt is, hogy hogyan épül fel a CSS öröklődése. Ha áthúzva látsz egy sort, akkor az nem érvényes rá, mert felül van írva feljebb.

Miért jó ez? Képzeld csak el, hogy sitebuild közben, amikor valamit pozicionálsz, mindig mentened és frissítened kell, hogy lásd az eredményt. Nem egyszerűbb, ha itt beállítod, majd azt rakod a CSS-be? Ugye? Na ugye! :)

És ez még csak az első fül volt, nézzük meg a többit, bár ezeket csak érintőlegesen.

A Chrome-ban a Resources fülön tételesen láthatjuk, hogy milyen elemekből épül fel az oldal, milyen sütiket használ, stb. Firebugban ennek a Net fül feletethető meg, bár a Chrome beépített eszközéhez képest ez fapadosnak tűnhet.

A Network fül már izgalmasabb. Itt láthatjuk, hogy hogyan épül fel az oldal, milyen kérések követik egymást, meddig tartott a lekérésük, mindezt egy idővonalon elhelyezve. Betöltődési idő optimalizációja során ennek nagy hasznát vehetjük.

A további fülekből még a Console lehet érdekes (ez a firebugban az első fül). Ha a JavaScript kód futása közben hiba történik, akkor az a kozolban fog megjelenni. Ezzel is elősegítve a hibakeresést.

+1 bónusz: PageSpeed és YSlow

Nem árulok el nagy titkot, ha azt mondom, hogy a Google – minimálisan ugyan, de – a keresési találatok sorrendjének megállapításánál figyelembe veszi a betöltődési sebességet. Nem beszélve a látogatókról, akik várakoznak az oldalad betöltésére. Erre adtak ki egy telepíthető kiegészítőt, ami beépül a Developer Toolsba, a PageSpeed Insightst. Az elemzés gombra kattintva lefut egy ellenőrzés a megnyitott oldalon, ami ellenőrzi a legkritikusabb pontokat, és javaslatokat is ad a megoldására. A végeredmény egy szám lesz. Az OWT főoldala 83 pontot kapott a lehetésges 100-ból, ami egyáltalán nem rossz eredmény. :)
Az eszköz egyébként telepítés nélkül is használható: https://developers.google.com/speed/pagespeed/insights
Illetve telepíthető Chrome és Firefox alá is.

Hasonló megfontolásból készült a YSlow is. Szintén telepíthető Chrome és Firefox alá, illetve Safari és Opera alá is. Ennél is kapunk javaslatokat a probléma megoldására, viszont itt nem csak egy számot kapunk, hanem egy A-tól F-ig terjedő osztályzatot, ahol az A a legjobb. Itt az OWT főoldala C osztályzatot kapott.

Mindent összevetve ezek nagyon szuper eszközök, és megkönnyítik a munkát. Most már csak rád vár, hogy felfedezd őket!

Kapcsolódó linkek:

• A bejegyzés írása közben jelent meg a Hongkiat.com-on egy írás a Chrome Developer Toolsról
  http://www.hongkiat.com/blog/chrome-developer-tools/
• Firefoxhoz még érdemes lehet telepíteni a Firebugon kívül ezeket is:
  Web Developer
  Console²
• Chrome esetében az alábbiakat érdemes még telepíteni:
  Chrome Sniffer
  Web Developer