Webfejlesztő eszközök – Google Chrome

Sokan talán nem ismerik az egyes böngészők (pl. a Chrome és a Firefox) azon tulajdonságát, hogy nem csak a weboldalak tartalmát képesek megjeleníteni, de – óriási segítséget nyújtva egy-egy weboldal elkészítéséhez, analizálásához – webfejlesztő eszközzel is el vannak látva. Ez rendkívül hasznos segítség, ha pl. keresünk valamit egy bonyolultabb CMS rendszerben és nem tudjuk, hogy egy-egy átírandó betűtípus, kép, vagy szöveg kódja hol is található, vagy csak valami hibát keresünk a weboldalunkon. Ezen kívül megannyi más lehetőséget is tartogat a webfejlesztő eszköz, ezeknek járunk utána a legérdekesebb részleteket taglalva.

Google Chrome fejlesztői eszközök

Chromeban a fejlesztői eszközöket a villáskulcs ikonra kattintva, majd az Eszközök->Fejlesztői eszközök menüpontban lehet elérni, vagy sokkal egyszerűbben a vizsgálandó oldalon a ctrl+shift+i gombok megnyomásával tudjuk előcsalni.

A videón látható módon lehetőséged van a kódban keresni, azzal, hogy a kód fölé viszed az egeret, a webfejlesztő eszköz megmutatja, hogy mely kód melyik weboldalon lévő elemre vonatkozik. Ennek fordítottja talán még hasznosabb: az oldalon található elem kódját lehet megtalálni a nagyító ikonra, majd az elemre kattintva.

Fejlesztéshez pedig egy igen hasznos kellék: át lehet írni az elemeket, ki- és bekapcsolni egyes css elemeket, hogy megnézzük, hogyan módosul az oldalunk.

Jó tudni!

Ez nem végez módosítást a szerveren, csak a böngészőben változtatunk a kinézeten, a frissítés gomb megnyomása után minden visszaáll az oldalon eredeti kinézetére.

Resources – források

A Resources fülön lehet megtekinteni könyvtárfa-szerűen az oldal forrás fájljait, adatbázisait, betűtípusait, képeit, és egyéb, az oldalt felépítő elemeket.

Network – az oldalt felépítő fájlok megtekintése

Hibakeresésnél jön jól ez az eszköz: pirossal jelzi a hibásan betöltődött fájlokat, illetve jelzi, hogy mennyi idő alatt töltődtek be a fájlok együttesen és külön-külön. Lehet méret szerint rendezi a fájlokat, hogy kiderüljön mely fájlok a legnagyobbak az oldalunkon, tudunk-e pl. egy kép fájl méretén csökkenteni a gyorsabb betöltődés érdekében.

Scripts – Szkriptek

Ebben az eszközben az oldalon futó JavaScriptek ellenőrzésére van lehetőség. Az egyes scripteket a Show navigator gombra kattintva lehet előhozni.

 

2 Hozzászólás

Hozzászólás küldése

Kövess minket!