Tekintse meg bármely weboldal HTML és CSS oldalát
A weboldal kódkódokkal van felépítve, de az eredmény speciális képek, videók, betűkészletek stb. Az elemek egyikének megváltoztatásához vagy annak összetételének megadásához meg kell találnia a vezérelt irányítószámot. Ezt egy elemvizsgálati eszközzel megteheti.
A legtöbb internetes böngésző nem tesz le egy ellenőrző eszközt, vagy nem telepít egy kiegészítő alkalmazást. Ehelyett lehetővé teszik, hogy jobb egérgombbal kattintson az oldalelemre, és válassza az Inspect (Ellenőrizze vagy ellenőrizze az elemet) elemet . Azonban a folyamat kicsit más lehet a böngészőben.
Elemek elemei a Chrome-ban
A Google Chrome legfrissebb verziói néhány módon megvizsgálják az oldalt, amelyek mindegyike beépített Chrome DevTools-ot használ:
- Kattintson jobb gombbal az oldalra (vagy egy üres területre), és válassza a Vizsgálat lehetőséget
- Adja meg a Ctrl + Shift + I billentyűkombinációt
- A Chrome-menü segítségével elérheti a További eszközök> Fejlesztői eszközök lehetőséget
A Chrome DevTools olyan dolgokat tesz lehetővé, mint a HTML sorok másolása vagy szerkesztése, vagy az elemek elrejtése vagy törlése (amíg az oldal újratöltődik).
Miután a DevTools megnyílik az oldal oldalán, megváltoztathatja, hol helyezkedik el, kiugrik az oldalról, megkeresi az összes oldal fájljait, kiválaszthatja az oldal elemeit specifikus vizsgálat céljából, fájlokat és URL-eket másolhat, és testreszabhatja egy csomóját is a beállítások közül.
Ellenőrizze az elemeket a Firefoxban
A Chromehez hasonlóan a Firefoxnek számos különböző módja van az Inspect nevű nevű eszköz megnyitásának:
- Kattintson jobb gombbal egy üres területre az oldalon vagy válasszon egy elemet, majd válassza a Elem ellenőrzése elemet
- A billentyűzeten adja meg a Ctrl + Shift + T vagy a Ctrl + Shift + I billentyűkombinációt
- A Firefox menüben kattintson a Fejlesztő > Felügyelő lehetőségre
- Az Eszközök menüben kattintson a Webfejlesztő> Felügyelő lehetőségre
Ahogy mozgatod az egeret a különböző elemek között a Firefoxban, az Inspector eszköz automatikusan megtalálja az elem forráskódját. Kattintson egy elemre, és az "on-the-fly search" leáll, és megvizsgálhatja az elemet az Inspector ablakból.
Kattintson a jobb gombbal egy elemre, hogy megtalálja az összes támogatott vezérlőt. Olyan dolgokat tehetsz, mint az oldal HTML szerkesztése, a belső vagy külső HTML kód másolása vagy beillesztése, a DOM tulajdonságok megjelenítése, a képernyőkép vagy a csomópont törlése, az új attribútumok alkalmazása, az oldal összes CSS-je és még sok más.
Elemek vizsgálata az Opera-ban
Az Opera is elemelheti az elemeket, a DOM ellenőrző eszközével, amely megegyezik a Chrome verzióival. Így érheti el:
- Használja a Ctrl + Shift + I gyorsbillentyűt
- Menjen a Menü> További eszközök> Fejlesztői menü megjelenítése menüpontra , majd nyissa meg a menüt a Menü> Fejlesztő> Fejlesztői eszközök menüpont alatt
- A jobb oldali egérgombbal az oldal bármelyik elemén válassza az Inspect elem elemet
Elemek vizsgálata az Internet Explorerben
Hasonló vizsgálati elemeszköz, az úgynevezett fejlesztői eszközök, elérhető az Internet Explorerben:
- Nyomja meg az F12 billentyűt
- Használja az Eszközök> F12 Fejlesztői menü opciót (nyomja meg az Alt + X billentyűt, ha nem látja az Eszközök menüt)
- Kattintson a jobb egérgombbal az oldalra, és kattintson a Elem ellenőrzése elemre
Az IE egy Select elem eszközzel rendelkezik ebben az új menüben, amely lehetővé teszi, hogy bármelyik oldalelemre kattintva megtekinthesse HTML és CSS részleteit. A DOM Explorer lapon is könnyedén letilthatja / engedélyezheti az elemkijelölést .
A többi böngésző elemellenőrző eszközeihez hasonlóan az Internet Explorer lehetővé teszi az elemek vágását, másolását és beillesztését, valamint a HTML szerkesztését, az attribútumok hozzáadását, a hozzá csatolt stílusok hozzáadását és más elemeket.