Böngészőbe integrált fejlesztői eszközök
Tartalom
- Általános használat
- Az Elements eszköz használata
- A Console eszköz használata
- A Sources eszköz használata
- A Network eszköz használata
- Az Application eszköz használata
A legtöbb böngésző tartalmaz valamilyen eszközt, amit a webfejlesztőknek szánt.
Ez az oldal a Google Chrome fejlesztői eszközeivel, a Chrome DevTools eszközökkel foglalkozik, de a Firefox, Microsoft Edge és még számos böngésző is rendelkezik ehhez hasonló, könnyen kezelhető eszközökkel. Az eszközök használata weboldalak működésének megértésére, a fejlesztendő oldalak ellenőrzésére, hibák keresésére erősen ajánlott.
A böngészőben a fejleszteni vagy vizsgálni kívánt weboldal megnyitása után több lehetőségünk is van a DevTools megnyitására:
- F12
- Beállítások menügomb, További eszközök, Fejlesztői eszközök
- Ctrl+Shift+I
A megnyitott felületen számos fül található. Amennyiben többre vágyunk, a képen látható módon további eszközöket is megnyithatunk. Ez az oldal kizárólag a leghasznosabb és a legtöbbször használt elemeket mutatja be. A memória menedzsment, teljesítmény és Tanúsítványok kezelésével foglalkozó eszközökkel most nem foglalkozunk. Azokat, amiket saját weboldalunk fejlesztésekor is használni tudunk:
Általános használat
A fejlesztői eszközök megnyitásával a megnyitott oldal egyik részén magát a weboldalt, a másikon pedig a fejlesztői eszközöket láthatjuk. A fogaskerék melletti ikonra kattintva a Dock side felirat mellett kiválaszthatjuk, hogy a megnyitott ablak melyik oldalán helyezkedjenek el ezek az eszközök. Sőt, egy új ablakon is megnyithatjuk ezeket:
A reszponzív, illetve adaptív weboldalak szempontjából nagyon fontos, hogy milyen eszközön és mekkora képernyővel nyitjuk meg a weboldalakat. 
Az elements fül mellett közvetlenül balra található ikonra kattintva a weboldalunk telefonos kijelző paraméterek szerint töltődik be (Ctrl+Shift+M). A fent megjelenő sávban látható, hogy milyen paraméterek szerint töltődött be az oldalunk. Kiválaszthatunk előre definiált telefonokat, táblagépeket, de mi magunk is megadhatunk paramétereket. A fenti sáv alatt megjelent szürke négyzetekre kattintva a leggyakrabban használt szélességi értékeket választhatjuk könnyedén ki.
Az Elements eszköz használata
Az Elements fülre kattintva megjelenik a HTML kód kompakt nézete, alatta (nagyobb képernyőkön mellette) pedig a kijelölt HTML elemhez tartozó CSS stílusbeállítások. A HTML kód kompakt nézete jobb átláthatóságot eredményez, a sorok bal oldalán található nyílra kattintva, vagy jobb klikk után az expand all lehetőséget választva bonthatóak ki az egyes csoportosító tag-ek. Ha az egérmutatót valamelyik kódrészlet fölé visszük, akkor a kódhoz tartozó oldalelemet a böngésző színesen kiemeli. A kék szín magát az elemet, a zöld szín a padding méretét, míg a sárga szín a margin méretét jelöli.
Amennyiben valamiért nem jelenik meg vagy eltekertük az oldalt, jobb klikk után a sroll into view gombra kattintva a bal oldalon a kiválasztott elemhez teker a böngésző. A fenti sáv bal oldalán található nyílra kattintva a fenti kijelölési mód megfordul. Ilyenkor egérmutatónkkal a weboldal megjelenített képe fölött egyes elemekre való rámutatással a kód nézetben a böngésző kijelöli azt a sort, amihez az adott elem tartozik. A kijelölt elem közvetlen környezetében megjelenik egy négyzet, ami további hasznos információkat tartalmaz a kijelölt elemmel kapcsolatban.
Egy elem kijelölése során a HTML kód alatt a kijelölt elemhez tartozó CSS kódot láthatjuk. Az elemhez tartozó id, class vagy (pl.: div) selector mellett az összes olyan CSS tulajdonság megjelenik, ami hatással van az adott elemre, így valószínűleg megtaláljuk a body és a html selectorokat is.
A bal oldali jelölőnégyzetekre kattintva ki- és bekapcsolhatjuk az adott sor hatását, aminek az eredménye azonnal látszik a bal oldalt megjelenített weboldalon. A CSS ezen a felületen teljes mértékben szerkeszthető: az értékeket módosíthatjuk, megszabhatunk új tulajdonságokat, úgy használhatjuk ezt az eszközt, mint a megszokott fejlesztői környezetünket. Az automatikus kódkiegészítés mellett a színeket is könnyedén kiválaszthatjuk vizuális színválasztó eszköz segítségével. Az áthúzás azt jelenti, hogy az adott tulajdonság nem érvényes, mert egy magasabb rendű felülírta azt. A Filter sáv keresőként működik az adott CSS részen belül. Amennyiben nem írunk bele semmit, az elemhez tartozó összes CSS tulajdonság megjelenik. A Filter sáv jobb oldalán található :hov gombra kattintva pseudo class-ok érvényesülését kényszeríthetjük (amennyiben a css kód tartalmaz pseudo-classokhoz tartozó módosításokat), a .cls gombra kattintva pedig egy előugró menüből kiválaszthatjuk a megjelenítendő class-okat, amik a kijelölt elemre hatnak. A + gombra kattintva pedig új selectorokat adhatunk meg. A CSS tulajdonságokat tartalmazó Styles fül mellett, a Computed fülre kattintva megnézhetjük egy elem doboz-modell ábráját és változtathatunk annak CSS tulajdonságain.
A CSS kódhoz hasonlóan a HTML kód is teljes mértékben szerkeszthető a fejlesztői eszközzel. Az egyes tag-ek tartalmainak, tulajdonságainak, attribútumainak szerkesztéséhez kattintsunk duplán a kiválasztott kódrészletre, és írjuk be a módosítást.
A kijelölt HTML elemre való kattintás után (vagy a sor mellett bal oldalon megjelenő három pontra kattintva) is elvégezhetjük a módosításokat. Ez a megoldás egyszerűen kínálja fel az attribútumok hozzáadását, változtatását, de akár a komplett HTML elem szerkesztését is. Ilyenkor egy nagyobb ablak jelenik meg, amiben a HTML sor egésze szerkeszthető.
A módosítások mellett a jobb klikkel előhívott menüben az adott elemre ható pseudo-class-ok (:hover, :focus…) érvényesülését is kiválaszthatjuk a force state menüponttal. A kód bal oldalán egy sárga pont jelzi, hogy ez a funkció érvényes az adott kódrészletre.
A Hide element-re kattintva az adott elem eltűnik az oldalról, a kódrészlet mellett pedig egy szürke pont jelzi a megjelenítésben történt módosítást. Ilyenkor nem történik változás a kódban, az elemnek foglalt hely is változatlanul ott fog maradni!
A copy menüpontban kimásolhatunk akár komplett HTML elemeket és beilleszthetjük azokat az oldal másik részébe a copy menüpont paste gombjával.
A Console eszköz használata
A console eszköz egyaránt hasznos eszköz azok számára, akik a javascript nyelv szintaktikájával, főleg szemantikájával ismerkednek, ám magasabb szintű fejlesztések, hibakeresések esetén is hasznos lehet.
A console ablakba írt javascript utasítások enter gomb lenyomása után azonnal végre is hajtja a böngésző, az eredmény a következő sorban jelenik meg.
Amennyiben egy utasításnak nincs visszatérési értéke, úgy undefined értéket kapunk vissza.
A Console felület (az összes eddig beírt kód) a console fül második gombjával törölhető. Ezután nem hivatkozhatunk addig kiadott parancsra.
A $_ parancs után az utolsó eredményt kapjuk vissza.
Az Elements fültől balra található második gombra (nyíl) kattintva kijelölhetünk elemeket a weboldalunkon, ezzel kapnak egy $[_] értéket is, ami alapján hivatkozni tudunk rájuk.
Ha a console-ban ezután kiadjuk a példában szereplő $0 parancsot, akkor innentől a ‹p› tag és tartalma lesz az eredmény.
Bármennyi elemet megjelölhetünk, ilyenkor a megfelelő $[_]- el utalhatunk rá.
Használhatunk megszokott javascript utasításokat is:
A hibakeresés egyik fontos eszköze a console.log() funkció. Ezzel megtudhatjuk, hogy a kódunk lefut-e eddig a parancsig és ha igen, akkor mi az eredmény. részeredmények kiírásához is széles körben használt mód.
Néhány hibát képes felismerni és kijelezni számunkra. Például egy nem definiált változó használatára hibaüzenetet kapunk.
Természetesen magunk is előhívhatjuk a hibákat, amennyiben mást, vagy később magunkat szeretnénk értesíteni.
A fogaskerék(beállítások) gomb alatt a háromszögre kattintva kiválaszthatjuk, hogy miket jelenítsen meg a konzol. Az errors hibákat, a warnings figyelmeztetéseket, míg az info számos elemet (táblázatok, szövegek, visszatérési értékek) megjelenít.
Amennyiben egy DOM elem tulajdonságát szeretnénk megnézni a konzolon keresztül, a console.dir() parancsot kell kiadnunk. Ebben az esetben a #[DOM elem] melletti nyílra kattintva láthatjuk a teljes válaszát a konzolnak.
Néhány számítás hosszabb időre igénybe veheti a számítógép erőforrásait, így a bonyolultabb programok írásakor érdemes ezt a szempontot is figyelembe venni. A kód egy részének futási idejét a console.time(’AZONOSÍTÓ’) és a console.timeEnd(’AZONOSÍTÓ’) közre zárásával mérhetjük meg. Ekkor az console utolsó sorában megjelenik a futáshoz szükséges idő milliszekundumban mérve.
A további console parancsok felhasználása leginkább haladóbb programozók figyelmébe ajánlott. A leggyakrabban használt console parancsok az alábbi táblázatban olvashatóak. A metódusok nevére kattintva további leírást találhat azokról a https://www.w3schools.com/ oldalon.
| Metódus | Leírás |
| assert() | Amennyiben az állítás hamis, figyelmeztetést küld a konzolnak |
| clear() | A konzol teljes tartalmát letörli. |
| count() | A count() metódus meghívásának számait rögzíti és jeleníti meg a konzolban. |
| error() | Egy hiba típusú üzenetet küld a konzolnak. |
| group() | Egy csoportot hoz létre a konzolban. Az utána kiírt konzol elemek a csoporton belül jelennek meg a console.groupEnd() függvény meghívásáig. |
| groupCollapsed() | A fenti (group()) metódushoz nagyon hasonló, ám ebben az esetben a csoportot zárt állapotban küldi a konzolnak, amit a felhasználó a nyilacska segítségével kibonthat. |
| groupEnd() | A fent leírt csoportokat bezáró metódus. |
| info() | Információ típusú üzenetet küld a konzolnak. |
| log() | Egy üzenetet küld a konzolnak |
| table() | Táblázatos adatot jelenít meg |
| time() | Egy számlálót indít el, ami az időt méri (ms-ben). |
| timeEnd() | Megállítja a számlálót, amit a time() indított el. |
| trace() | A konzolban megjeleníti azt a függvénysort, ami ennek a metódusnak a meghívását eredményezte. |
| warn() | Egy figyelmeztetés típusú üzenetet küld a konzolnak. |
A Sources eszköz használata
A sources fülre kattintva megjelennek könyvtár szerűen a megjelenített weboldalhoz tartozó fájlok (.css, .html, képek, videók, .js, stb.)
A Microsoft Windows és egyéb grafikus rendszerek mintájára használhatjuk bal oldalon a fájlkezelőt, a jobb oldali ablakban pedig megjelenik a megnyitott állomány. Ezek csak megtekinthetőek, azonban nem szerkeszthetőek!
A bal felső sarokban látható Page fül melletti Filseystem-re kattintva egy új ablak nyílik meg. A + gombra kattintva kiválaszthatjuk azt a mappát, ahol a fejlesztendő weboldalunkat tároljuk a számítógépen és a megnyitás gombra kattintva a kiválasztott könyvtár rendszer megjelenik a fejlesztői környezetben. Ezeket az állományokat megnyitva szerkeszthető fejlesztői környezetet kaptunk, ahol az szerkesztett oldalt el is menthetjük.
A középső ablak minden sort sorszámmal lát el. A számok elé kattintva breakpoint állomásokat hozhatunk létre, ami egy nagyon hasznos funkció a hibakeresés, debugging során. Ilyenkor az F5 gomb lenyomásával vagy az oldal frissítésével a böngésző csak az első breakpoint állomásig fut le. A fenti sáv jobb oldalán található navigációs gombokkal léptethetjük a program futását, oldal betöltését. Ha képen látható ciklusban elhelyeznénk egy ilyen breakpoint állomást, akkor az 1000 alkalommal megszakítaná a program futását. Ez azért hasznos számunkra, mert a kódban, ha a változók fölé visszük az egérmutatót, akkor kiolvashatjuk az adott változó aktuális értékét, ezzel ellenőrizve, hogy megfelelően működik-e a programunk.
A fejlesztői ablak bal alsó sarkában található egy { } feliratú gomb. Ha erre kattintunk, akkor a kódunkat olvashatóvá és vizuálisan konszolidált elrendezésűvé tehetjük.
A Network eszköz használata
Bizonyos állományok méretükből, komplexitásukból adódóan nehezebben, hosszabb idő alatt töltődnek be és amíg ezek töltődnek, a weboldalunk többi eleme betöltésre vár. Többek között ezért érdemes a bonyolult számításokat tartalmazó script tageket a weboldalunk végén tárolni mivel, ha ezeket az oldalunk elején tárolnánk, a tartalomnak várnia kellene amíg lefut minden a javascriptben.
A betöltési idő nyomon követését a network eszköz segíti, ami a betöltött weblapunk egyes állományainak betöltését külön (ms-ben) méri és diagrammon vizuálisan is szemlélteti.
A filter sorban kiválaszthatunk bizonyos tartalmakat, amiket ne vegyen figyelembe, illetve kiválaszthatjuk, hogy milyen típusú állományt figyeljen és mit ne. Az alsó sávban összesített eredményeket láthatunk.
Az egyik állományt kiválasztva további információkat tudhatunk meg róla.
A Headers fül számos hasznos információt tárol a betöltésről (IP cím, szerver típusa, nyelvek, stb.)
A Timing a weboldal betöltési folyamatának állomásait, azok további adatait tárolja. (request, waiting, download…)
Figyelem! A betöltési idő nem kizárólag a weboldalon múlik. A hálózati sávszélesség, sebesség, útvonal és még számos tényező befolyásolja egy oldal betöltési idejét, így az értékek akár minden betöltés után változhatnak!
Az Application eszköz használata
Számtalanszor tapasztaljuk, hogy egy weboldal sütiket, cookies fájlok használatát kérvényezi a felhasználótól. Bizonyos esetekben szükséges vagy időtakarékos lehet, ha bizonyos adatokat a számítógép eltárol a weboldalról. Ezek lehetnek komplett részei a weboldalnak, vagy csak bizonyos adatok, változók nevei.
Ennek a leírásnak nem része a bonyolultabb adatszerkezetek, sütik, tárolási technikáinak bemutatása, kizárólag a kezdő programozóknak hasznos Local Storage és Session Storage használatát, azok olvasását, törlését mutatja be.
Az Application fülre kattintva megnyithatjuk a megnyitott weboldalhoz tartozó háttérfolyamatokat nyomon követő eszközt. Weboldalunk minden böngészőben tárolt fájlja, adata törölhető a Clear storage menüpont alatt. Ezen a felületen szűrhetjük a törölni kívánt adatokat típusuk szerint.
Weboldalunkon elhelyezhetünk olyan tartalmakat, amiket ideiglenesen a böngésző eltárol, hogy azokat a weboldal egy későbbi betöltéskor is használni tudjon. Erre több megoldás is létezik. Ebben a leírásban kettő szerepel: A Local Storage alkalmas adatok hosszabb távon való tárolására. Ezek a böngésző beállításaitól függően egy idő után törlődhetnek, de a weboldal maga is törölheti ezeket, illetve a fejlesztői eszközben ezek kiolvashatóak, módosíthatóak és törölhetőek. A Session Storage ezzel szemben a böngésző bezárásával minden esetben törlődik!
Az alábbi képen láthatjuk, hogy miként lehet ezeket JavaScript kódban létrehozni. A bal oldali listából a Local-/Session Storage mellett elhelyezett nyílra kattintva kiválaszthatjuk saját meghajtónkat és arra kattintva láthatjuk, hogy a weboldal milyen adatokat tárol rajta.
A jobb klikk, edit Value gombra kattintva megváltoztathatjuk ezt az értéket, a delete gomb pedig törli azt. A tároló teljes ürítése a Filter mellett található áthúzott kőr gombra kattintva lehetséges.
Cookie fájlok, egyéb számítógépen tárolandó adatok esetében legyünk körültekintőek, mert ezek használatának jogi feltételei vannak.
cookie létrehozására egy példa:
document.cookie = ’username=Albert Einstein’;
A leírást készítette: Szladek Máté, szerkesztette: Láng Blanka (Budapest, Corvinus Egyetem - 2020. szeptember)