A fejlesztők és a felhasználói felület tervezői az Inspect Element funkciót használják a webhelyek online módosítására a forráskód megváltoztatása nélkül. De hogyan lehet megvizsgálni az elemeket webfejlesztő tanfolyam elvégzése nélkül?
Az Inspect Element egy praktikus fejlesztői eszköz, amely a népszerű webböngészőkkel együtt kapható. Csak azt kell tudnia, hogyan telepítheti az eszközt néhány kattintással a webhelyek böngészése közben.
Számos varázstrükköt hajthat végre, például megváltoztathatja a webhely elrendezését, szöveg nélküli képernyőképeket készíthet, betűtípusokat módosíthat, számokat módosíthat stb.
Az alábbiakban egy tömör, lépésről-lépésre szóló útmutatót talál, amellyel megtanulhatja, hogyan ellenőrizheti az elemeket könnyedén.
Mi az az Inspect Element?
Az Inspect Element egy webfejlesztő eszköz, amely a legtöbb webböngészőben elérhető. Használhatja bármely meglátogatott webhely előtér-forráskódjának szerkesztésére.
A módosítások a webböngészőn belüli homokozóban történnek. Tehát semmilyen változtatást nem hajt végre a tényleges webhelyen. Ezenkívül az oldal frissítésekor a felületes módosítások eltűnnek.
Íme néhány kreatív felhasználási mód:
- Képernyőképet kell készítenie egy webhelyről, és a képen látható szövegek zavarják Önt. Az Inspect Element eszközzel törölheti ezeket a szövegeket.
- Meg akarja tréfálni barátait azzal, hogy megmutatja nekik a nevét a New York Timesban vagy a Washington Postban. Az Inspect Element a legjobb módja ennek.
- Tesztelje a hibakeresési kódokat a webhelyeken az Inspect Element eszközzel valós időben történő alkalmazásával. Ha működik, módosíthatja a háttérforráskódot.
- Digitális marketingesként felfedheti a versenytársak kulcsszavait, SEO címeit, metacímkéit stb., ezzel a hatalmas webfejlesztő eszközzel.
Hogyan ellenőrizzük az elemeket a Windows rendszeren
Az Inspect Element eszköz használata Windows rendszeren nevetségesen egyszerű. Az alábbiakban egy lépésenkénti útmutatót találhat az elemek különböző webböngészők segítségével történő ellenőrzéséhez Windows rendszeren:
Google Chrome Inspect Tool
- Használat során Google Chrome, Jobb klikk bárhol a webhelyen.
- Megjelenik a jobb gombbal kattintva helyi menü.
- Alul meglátod Vizsgálja meg.
- Kattintson Vizsgálja meg a HTML és CSS kódok megtekintéséhez a jobb oldali panel.
Hogyan nyithatom meg az Inspect Element-et a Chrome-ban jobb kattintás nélkül?
Van néhány praktikus parancsikon az Inspect Element eszköz megnyitásához a Google Chrome for Windows rendszerben. Ezek a gyorsbillentyűk az alábbiak:
- Ctrl + Váltás + C
- A funkcióbillentyű F12
A fenti gyorsbillentyűk a Mozilla Windows böngészőben is működnek.
Mozilla Inspector Tool
A Mozilla böngészőben a folyamat ugyanaz, mint a Google Chrome-ban. Azonban a Ellenőr ablak a böngésző alján jelenik meg, nem a jobb oldalon, mint a Google Chrome-ban.
Microsoft Edge Inspect Tool
Meglepő módon a Microsoft Edge Inspect Elementje hasonlóan működik, mint a Google Chrome böngésző. Az Inspect eszköz a jobb gombbal kattintva elérhető. Ezenkívül a HTML- és CSS-kódok a jobb oldalon jelennek meg, hasonlóan a Google Chrome-hoz.
Az elemek vizsgálata Mac rendszeren
Google Chrome-ot, Mozilla Firefoxot vagy Microsoft Edge-t használ az Apple Mac számítógépein? Ha igen, akkor telepítheti az Inspect Element eszközt a Windows szakaszban említett lépések végrehajtásával.
De ha az alapértelmezett macOS webböngészőt, a Safarit használja, akkor az Inspect Element eszköz használata trükkös játék. Alapértelmezés szerint a Safari nem jeleníti meg az Inspect Element funkciót Macen. A következőket kell tennie:
Az Inspect Element megnyitása Mac rendszeren
Először is aktiválnia kell a fejlesztői eszközöket a Safari Mac gépen. Itt van, hogyan:
- Fuss a Safari böngésző.
- Látogasson el egy webhelyre, amelyen meg szeretné tekinteni a webelemeket.
- Válassza ki Szafari a Safari böngésző felső menüsorából.
- Kattintson preferenciák a megnyíló helyi menüből.
- A Beállítások képernyő, válassza ki Fejlett.
- Jelölje be a Fejlesztés megjelenítése menü alján Speciális beállítások képernyő.
Sikeresen engedélyezte a fejlesztői eszközöket a Safari for Mac rendszeren. Most kövesse az alábbi lépéseket az Inspect Element használatához:
- A webhely bármely elemén, például szövegen vagy képen, Jobb klikk.
- Megjelenik egy helyi menü. Alul meglátod Elem vizsgálata.
- Kattintson erre a hibakeresési szakasz megnyitásához a webhely alatt, amely a HTML-t és a CSS kódokat.
Melyek az elem vizsgálatának kulcsai?
Lehet, hogy az Inspect Element parancsikonokat keres Mac rendszeren. A következőket használhatja:
- Parancs + Váltás + C
- megnyomni a Ellenőrzés gombot, majd válasszon ki egy elemet.
- Kattintson a görgetőpadra két ujjal
Elemek vizsgálata Chromebookokon
A Chromebook a Google Chrome-ot használja alapértelmezett böngészőként. Ezért bármely webhely megnyitása után egyszerűen kattintson a jobb gombbal, hogy megtalálja az Elem vizsgálata opciót a következő helyi menüben.
Ha munkahelyi vagy iskolai Chromebookot használ, akkor a következő kérdést teheti fel:
Miért nem tudom megvizsgálni az iskolai Chromebookomat?
A legtöbb iskolai és üzleti adminisztrátor letiltja a speciális funkciókat az általa biztosított Chromebookon munkához vagy tanuláshoz. Mivel a fejlesztői eszközök speciális funkciók, valószínű, hogy az iskolai vagy munkahelyi Chromebookon nem jelenik meg az Inspect Element eszköz.
Az elemek ellenőrzése iPad/iPhone készüléken
Sajnos az Inspect Element eszköz nem használható iPhone-on vagy iPaden Mac nélkül.
Az iOS és az iPadOS rendelkezik Web Inspectorral a Safari alkalmazáshoz. Ez azonban csak akkor működik, ha a mobileszközt egy olyan Mac számítógéphez csatlakoztatja, amelyen már aktiválta a Safari fejlesztői eszközeit. Az alábbiakban felsoroljuk azokat a lépéseket, amelyeket kipróbálhat:
- Nyissa meg az iPad/iPhone készüléket Beállítások kb.
- Kattintson Szafari a bal oldali navigációs panelen.
- Ezután görgessen le a jobb oldalon a megkereséséhez és kiválasztásához Fejlett.
- Aktiválja a kapcsolót Webfelügyelő.
- Most csatlakoztassa a mobileszközt a Mac-hez a segítségével USB.
- Engedélyezze az iPhone/iPad készüléket Macen.
- Nyisson meg bármilyen webhelyet egy mobileszközön a Safari alkalmazásban.
- Most futtassa a Safarit a Mac számítógépen, és válassza ki Fejleszteni a felső menüsorban.
- A megnyíló helyi menüben keresse meg mobileszköze nevét.
- Az összes megnyitott webhely megtekintéséhez vigye a kurzort a mobileszköz fölé.
- Most válasszon ki egy webhelyet a HTML- és CSS-forráskód megtekintéséhez a Mac Safari böngészőjében.
Következtetés
Megvizsgálta az összes lehetséges módot az Inspect Element eszköz használatára ideiglenes weboldal-szerkesztéshez. Azt is megtanulta, hogyan vizsgálhatja meg az elemeket különböző eszközökön, például Macen, Windowson, Chromebookon, iPaden és iPhone-on.
Ha legközelebb szórakozásból vagy szakmai igényekből kell módosítania egy weboldalt, próbálja ki ezeket a módszereket. Biztosan szeretni fogja ezeket a könnyed lépéseket, mint a máshol leírt bonyolult módszereket.
Ne felejtsen el megjegyzéseket fűzni alább, ha a fenti lépések segítettek Önnek, ha bármilyen kihívást jelentő módszert talált, vagy bármilyen titkos tippet kaphat az Inspect Element eszközzel kapcsolatban.
Szüksége van egy weboldalra nyomtatott referenciaként? Megtanulni hogyan gyorsan menthet egy weboldalt PDF formátumban Most!