Kérdése van azzal kapcsolatban, hogyan tekintheti meg a vizuális elem forráskódját Chromebookján? Ehhez használhatja a Google Chrome alkalmazásban található speciális DevTools-t, vagy bármelyik böngészőoldalon. A DevTools a Google Chrome böngészőbe épített speciális fejlesztői eszközök listája. Segítségükkel a felhasználók útközben is szerkeszthetik az oldalakat, és nyomon követhetik az esetleges problémákat.
Az Inspect Element használata Chromebookon
A Chromebookok esetében az alapértelmezett böngésző a Google, a fejlesztői eszközök megnyitásához ezen az eszközön szükség van.
- Nyissa meg a kívánt oldalt
- Kattintson az alkalmazás jobb felső sarkában lévő 3 pontra.
- Válassza a “További eszközök” lehetőséget
- Kattintson a “Fejlesztői eszközök” gombra
A funkció elérésének alternatív módja az F12 gomb megnyomása vagy a jobb gombbal történő kattintás a kívánt elemre.
Ez egy univerzális utasítás, amely a legtöbb böngészőre vonatkozik Windowson vagy bármely más rendszeren.
Az Inspect Element használata Macen vagy iPhone-on
Lehetséges ugyanez egy Mac vagy akár egy iPhone segítségével is? Csak néhány egyszerű lépést kell követnie az alábbiakban:
Hogyan kell használni Macen
Ha Mac számítógéped van, a legjobb böngésző a Safari. A fejlesztői eszközök megnyitása ebben a böngészőben némileg eltér a Chrome vagy Firefox böngészőnél végzett eljárástól. A következőkre lesz szükséged:
- Nyissa meg a böngészőt
- Kattintson Safari a lap nevére
- Válassza a “Beállítások” lehetőséget
- Ezután kattintson a Speciális fogaskerék ikonra, amely a képernyő tetején található.
- Jelölje be a Fejlesztés menü megjelenítése a menüsorban melletti négyzetet.
Ha ezt megtette, az Inspect Element elérhető lesz a weboldalain. A CMD + Option + I billentyűkombinációval is előhívhatja.
Hogyan használhatja iPhone-on
Ha ellenőrizni szeretné, hogy a weboldal mobil verziója hogyan néz ki iPhone készülékén az Inspect Elements funkció segítségével, először engedélyeznie kell a Web Inspectort az iOS-eszközén:
- Menjen a Beállítások menüpontba
- Válassza ki a Safari alkalmazást
- Görgessen az aljára, és kattintson a “Speciális menü” gombra.
- Most kapcsolja be a “Web Inspector” melletti jelölőnégyzetet.
A fenti utasításoknak megfelelően engedélyeznie kell a Fejlesztő menüt is a Mac számítógépén. Miután engedélyezte ezeket a funkciókat az iOS-eszközén és a Mac számítógépén, a Mac számítógépének tetején meg kell jelenítenie a Fejlesztő menüt. Erre kell kattintanod, hogy megjelenjen a csatolt iPhone és a rajta megnyitott weboldal. Amikor egy másik oldalra váltasz, a Maceden is átváltasz az adott oldal Web Inspector ablakára
Mi az Elemental Panel
Az első dolog, amit tudnunk kell, hogy mi az Element Panel. Ha meg akarod változtatni az oldal dizájnját vagy bármely külső elemét, akkor a CSS-t vagy a HTML-t kell szerkesztened. Ezt egy fejlesztői eszközzel teheti meg, amelyet Element panelnek hívnak. Ez lehetővé teszi, hogy a front-endről ellenőrizze és módosítsa az oldalát. Néhány elem, amit ott láthatsz, a következők :
- A képpel kapcsolatos információk, például a kép mérete és forrása
- CSS panel – ez az opció az oldal külső stílusának megváltoztatására szolgál. Itt módosíthatja az olyan paramétereket, mint a betűtípusok, méretek, színek.
- DOM információ vagy DOM panel ezzel az opcióval szabályozhatja az oldal megjelenését. Megváltoztathatja az elemek pozícióját és teljes mértékben navigálhat a HTML fájlokban
- A konzol panel a fejlesztői eszközök alatt mutatja be az új funkciókat
- Elem eseményhallgatók
- HTML megjegyzések
- Visszajelzés
Egy kép renderelt és természetes méretének vizsgálata
Nagyon gyakran van szükséged információkra egy weboldalon található képről, akkor “ellenőrizheted” azt. Ez lehetőséget ad arra, hogy megtudja például a kép méretét. Ehhez az egérmutatót az adott IMG fölé kell vinni, miközben a DOM fában tartózkodik.
Egy adott használt kép vizsgálata egy forráskészletből (srcset)
Ezután ellenőrizheti, hogy a kép melyik verzióját töltötte be, és mi a pontos srcset forrása. Az srcset segít a böngészőnek, hogy a kép legkisebb méretű verzióját kérje le, amely valamivel nagyobb, mint a valódi kép. Ez arra szolgál, hogy a böngésző különböző felbontású képek közül választhasson. Először válassza ki az IMG elemet, majd ellenőrizze a konzolon a $0.currentSrc információt. Vegye figyelembe, hogy a srcset segítségével növelheti a képek jellemzőit, ha nagyobb DPI-vel rendelkező eszközöket kell használnia.
