Egy weboldal sokszor elég összetett, főképp ha nem magunk készítettük, nem mindig tudjuk, hogy egy-egy elemre hogyan lehetne hivatkozni, hogy változtathassunk rajta. Sokan nem tudnak az oldal forráskódjával mit kezdeni, annak ellenére, hogy a böngészőben ott van erre a remek funkció. 

Évek óta ott van a Chrome-ban pl. az Inspect funkciója, de a Mozilla is rendelkezik vele, és szerintem talán már az IE is. (bevallom ennek nem néztem utána). Az inspect-tel megnézhetjük egy adott elem helyzetét a forráskódban. Hatékonyan kereshetünk benne, illetve azt is megnézhetjük, hogy milyen CSS tulajdonságokkal rendelkezik egy adott elem.

Egy weboldal sokszor elég összetett, főképp ha nem magunk készítettük, nem mindig tudjuk, hogy egy-egy elemre hogyan lehetne hivatkozni, hogy változtathassunk rajta. Sokan nem tudnak az oldal forráskódjával mit kezdeni, annak ellenére, hogy a böngészőben ott van erre a remek funkció. 

Évek óta ott van a Chrome-ban pl. az Inspect funkciója, de a Mozilla is rendelkezik vele, és szerintem talán már az IE is. (bevallom ennek nem néztem utána). Az inspect-tel megnézhetjük egy adott elem helyzetét a forráskódban. Hatékonyan kereshetünk benne, illetve azt is megnézhetjük, hogy milyen CSS tulajdonságokkal rendelkezik egy adott elem.

Ha egy konkrét dolgot szeretnénk megvizsgálni, jobb klikk az adott elemre, majd Inspect. Ezután a böngésző ablak jobb oldalán, vagy alján (esetleg külön ablakban) megjelenik a forráskód, arra a részre ugorva, ami az elemünket készíti el. Ennek a résznek a jobb oldalon pedig láthatjuk a CSS tulajdonságokat, amellyeket felvesz.

Hibakeresésnél nagyon hatékony lehet, sokkal könnyebben megtalálhatjátok, hogy mit rontotok el - egy div elmaradt lezárása pl az egész oldalra kihatással lehet. A forráskódnál minden elemet jól lehet követni a kis lenyitható gombok segítségével, így látható, hogy hol kezdődik, mit tartalmaz, és hol a vége.

Nagyon régóta használom már ezt a funkciót, G-Portálon pl. mindig ezzel néztem ki az elemeket, ott szerintem különösen hasznos lehet, hiszen ott nem lehet mindent fejből tudni.

A CSS részével játszogatni is lehet: a tulajdonságok ki- és bekapcsolhatóak, így látható, hogy hogy nézne ki esetleg anélkül - ez szintén nagyon jó hibakeresési funkció: ha nem tudod mitől olyan az elemed, amilyen, csak nézd végig így a tulajdonságait. Ha belekattintunk a kódba, akkor hozzá is adhatunk új kódokat. Ez viszont csak ideiglenesen befolyásolja az oldal kinézetét, és csak a tulajdonság törléséig, vagy a weboldal frissítéséig. így kipróbálhatunk új tulajdonságokat, láthatjuk, hogy hogyan fogja befolyásolni az oldalt, mielőtt ténylegesen beleírjuk a kódba.

Ennek a kis ablaknak a jobb felső sarkában láthatjuk a dokumentumban előforduló hibákat is, az oldal alján pedig részletesebb információt a hibákról. Mi a hiba, hol található, stb. Ha elírjuk egy kép elérési útvonalát például, és azt nem lehet betölteni, az biztosan megjelenik itt alul.

A forráskódot ismerni, és kiigazodni rajta előny bárki számára, és tényleg rengeteget tud segíteni, úgyhogy ajánlom mindenkinek ennek a funkciónak a használatát. :) Szép estét nektek ^^