Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Hibakereső eszközök

2013. május 14. | Szijártó József

# # # # # # #

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

Chrome Developer Tools

Firebug

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 Screenshot on 2013-05-14 at 07.25.27 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.

Screenshot on 2013-05-14 at 07.28.06

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.

Screenshot on 2013-05-14 at 07.36.47

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.

Screenshot on 2013-05-14 at 08.14.00

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.

Screenshot on 2013-05-14 at 08.16.33

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.

Screenshot on 2013-05-14 at 08.21.53

+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.

Screenshot on 2013-05-14 at 08.44.11

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:

Iratkozz fel YouTube csatornákra!

blog

Tanulás Designer Karrier Kérdezz-Felelek

Designer Karrier Kérdezz-Felelek

2022. január 25.

A múlt hét végén megtartott Kreatív Karriernavigátor nap után nagyon sok kérdés jött hozzánk, ezekre tegnap egy rögtönzött FB Live-ban válaszoltam, illetve fel tudtatok tenni egyéb kapcsolódó kérdéseket is. Kiből lehet designer? Én azt gondolom, hogy nem kell hozzá extra képesség. Nyilván aki tudja magáról, hogy általában nincs szépérzéke, nehezebben fog boldogulni, de már sok […]

Tovább a cikkre
Secured By miniOrange