Az elemek vizsgálata Mac, Windows, iPhone és iPad rendszeren

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 nem módosít semmit 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

Elemek vizsgálata a Windows Chrome böngészőben

• A Google Chrome használatakor kattintson a jobb gombbal bárhol a webhelyen.
• Megjelenik a jobb gombbal kattintva helyi menü.
• Alul az Ellenőrzés felirat látható .
• Kattintson a Vizsgálat gombra a HTML- és CSS-kódok megtekintéséhez a jobb oldali panelen .

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 + Shift + C
• Az F12 funkcióbillentyű

A fenti gyorsbillentyűk a Mozilla Windows böngészőben is működnek.

Mozilla Inspector Tool

Az elemek ellenőrzése a Windows Mozilla böngészőben

A Mozilla böngészőben a folyamat ugyanaz, mint a Google Chrome-ban. Az Inspector ablak azonban a böngésző alján jelenik meg, nem pedig a jobb oldalon, mint a Google Chrome-ban.

Microsoft Edge Inspect Tool

Az elemek ellenőrzése a Windows Edge böngészőben

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:

• Futtassa a Safari böngészőt .
• Látogasson el egy webhelyre, amelyen meg szeretné tekinteni a webelemeket.
• Válassza a Safari lehetőséget a Safari böngésző felső menüsorában.
• A megnyíló helyi menüben kattintson a Beállítások elemre .
• A Beállítások képernyőn válassza a Speciális lehetőséget .
• Jelölje be a Fejlesztés megjelenítése menüt a Speciális beállítások képernyő alján .

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 kattintson jobb gombbal a ikonra .
• Megjelenik egy helyi menü. Alul az Elem vizsgálata felirat látható .
• Kattintson rá, hogy megnyissa a HTML- és CSS- kódokat tartalmazó hibakeresési részt a webhely alatt .

Melyek az elem vizsgálatának kulcsai?

Lehet, hogy az Inspect Element parancsikonokat keres Mac rendszeren. A következőket használhatja:

• Command + Shift + C
• Nyomja meg a Control billentyűt, 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 Beállítások alkalmazást.
• Kattintson a Safari elemre a bal oldali navigációs panelen.

A Safari beállítások megnyitása iPaden vagy iPhone-on

• Ezután görgessen le a jobb oldalon, és válassza ki a Speciális lehetőséget .

A Web Inspector aktiválása iPaden és iPhone-on

• Aktiválja a Web Inspector kapcsolóját .
• Most csatlakoztassa a mobileszközt a Mac-hez USB segítségével .
• 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 a Fejlesztés lehetőséget 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 a weboldalak ideiglenes szerkesztésére. 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. Minden bizonnyal 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? Tanulja meg, hogyan menthet gyorsan egy weboldalt PDF formátumban most!