Így használd a Chrome Developer Tools-t – Webdesign Tanfolyam

Így használd a Chrome Developer Tools-t

2019. április 03. - 08:38 • írta: Pócsik Emese

Először is mielőtt használni kezded győződj meg róla, hogy újratöltődött-e az oldal és a legfrissebb HTML/CSS-t látod-e. Ehhez ürítsd ki a böngésző gyorsítótárat.

A Chrome Developer Tools a sitebuilder legjobb barátja

A DevTools nem más, mint egy böngésző panel, ami lehetővé teszi, hogy diagnosztizáljuk a weboldalon lévő problémákat, a gyors hibakeresést és a különböző ötletek azonnali kipróbálását. Miért kell ezt használni? Hogy önállóan ki tudd javítani a saját hibáidat. Ha a kocsiban elromlik valami, a szerelők sem a hasukra ütve dobálnak ki ezt-azt, hogy hátha majd működik az autó-, kifejezetten erre a célra fejlesztett diagnosztikai eszközök segítségével kutatják fel az esetleges hibák konkrét forrását, okát. A DevTools is ilyen.

A DevTools használatához nyomd meg a jobb klikket valahol az oldalon, majd válaszd az “elem vizsgálata” lehetőséget, vagy nyomd meg az F12-őt. Ez egy teljesen új panelt jelenít meg a böngészőben, amely bemutatja az összes oldalon használt eszközt. Ami minket sitebuild során érdekel az főleg a HTML/CSS struktúra, és a CSS formázás helyes megjelenése.  Első lépés megnézni, hogy a HTML struktúra jó-e-, ID-k, CLASS-ok léteznek-e és azok jó helyen vannak-e. Azt sem árt ellenőrizni, hogy a CSS stíluslapok betöltenek-e, vagy nincs-e bármilyen hiányzó kép, vagy fájl a struktúrában. Ezeket piros  Xel találod a “Console” fülön. Igen, a hibaüzenetek angolul vannak, ha nem érted, Guglizz rá.

Azonnali szerkesztés
A jobb oldali HTML panelben, ha kétszer a címsor szövegére kattintasz, szerkesztheted az egész blokkot. Nem, a változások nem fognak elmentődni az élő oldalban, csak ki tudod próbálni, hogy a módosításaid jók-e. CSS-el ugyanígy járhatsz el, bármit beírhatsz real-time az oldal stíluslapjába, az meg fog jelenni az élő oldalon, de a forrásfájlba nem mentődik el.

Hibakeresés CSS-ben

Beírtál valamit, de nem történik semmi
Ez mindenkivel előfordult már, aki legalább egy weboldalt csinált már életében. Hiába van (szerinted) jól megadva az osztály, vagy az azonosító, ha az elemvizsgálat során nem látod a CSS fülön a formázásokat, akkor:

  • elírás van a CSS-ben, és/vagy nem zártad be a kapcsos-zárójeleket a konkrét osztály előtt. Ez egy egyszerű syntax error, a validátor segíteni fog.
  • media query-re van szűkítve a formázás, nem oda írtad be a szabályt ahova kéne, nyomd össze a böngésző ablakot, hogy van-e változás.
  • a HTML struktúra szerint nem létezik, amire hivatkozol. ID-ra hivatkozol CLASS helyett, vagy a szűkítésed nem jó, vagy  a szülő-gyerek kapcsolatot nem látod át a HTML struktúrában.
  • Nem íródott felül a CSS-ed FTP-n, vagy nem ürült ki a cache.

CSS paraméter át van húzva
Ami át van húzva az nem fut le, vagy szintaktikai hiba miatt a böngészőnek értelmezhetetlen, vagy felül van formázva magasabb szintű formázási szabállyal. A felül formázás kiderítéséhez görgetned kell fel/le, hogy megtudd, mi az ami felülbírálja az áthúzott formázásodat.

Sorrendiség
Értelemszerűen nem véletlenül kezdjük a weboldal megformázását a tetejéről. Ha a formázások rossz sorrendben történnek, akkor az egyes elemek felülformázódhatnak, hiszen ha azt mondod, “a szöveg legyen piros, áh még se, legyen kék”, akkor nyilván kék lesz.

Media query káosz
Ha valaki alacsonyabb, mint 160cm, akkor nyilván 180cm-nél is alacsonyabb. Vagyis, ha valamit formázol 768px alatt, akkor az nyilván a 480-as kijelzőre is érvényes lesz, kivéve, ha intervallumokat használsz.

Összességében semmi más dolgod nincs csak folyamatosan ellenőrizni, hogy a forráskódban begépelt elemek megjelennek-e / lefutnak-e. Mindig értetlenül állok az előtt, hogy ha valaki már a legelején ejt egy hivatkozási hibát – nem tölt be 2 stílus lap – akkor miért megy tovább? Ha nem tölt be a betűtípus syntax error miatt, akkor mégis mihez állítod be a betűméreteket előre? Nem beszélve arról, hogy a HTML elemek egymásra is hatással vannak, örökölnek, helyezkednek a többi elemtől függően, ha valahol hibázol, az másik 8-10 elemre is hatással lehet, aminek a későbbi javítása / felderítése sokkal nehezebb lesz.

Ezeket láttad már?

A szerző: Pócsik Emese
2007 óta dolgozom webdesignerként. Munkáim nagy részét főleg üzleti weboldalak készítése teszi ki kis- és közép vállalkozásoknak. A tanfolyamon összetettebb weblapok HTML+CSS kódolását oktatom, néhány házi praktikával és gyakorlati tanáccsal megfűszerezve.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.