Az elem ellenőrzése iPhone-on: Minden, amit tudnod kell

Ha nem tudja, egy weboldal egy csomó elemből áll, amelyek úgy vannak formázva, hogy egyetlen entitásként jelenjenek meg. A webfejlesztőknek meg kell érteniük ezen elemek mindegyikét, hogyan helyezkednek el a weboldalon, és látniuk kell, hogy mindegyik hogyan működik önmagában.

A Windows- és Mac-felhasználók jól ismerik az „Ellenőrzés” vagy az „Elem vizsgálata” opciót, amely akkor érhető el, ha a jobb gombbal bármelyik weboldalra kattint. Ezzel a lehetőséggel megtekintheti a webhely forráskódját, megtekintheti annak összes elemét, a mögöttük lévő kódsort, valamint szerkesztheti a webhely Javascript-, HTML-, CSS- és egyéb médiafájljait. Így nem csak egy adott webhely működését és működését ismerheti meg, hanem saját böngészőjében módosíthatja azt anélkül, hogy azok befolyásolnák a tényleges weboldalt. 

Bár az inspect opció köztudottan „fejlesztői” eszköz, de nem csak a fejlesztők profitálnak belőle. Még kezdők és nem fejlesztők is használhatják ezt az eszközt, hogy megtanulják, hogyan épül fel egy webhely, és hogyan működnek együtt egyes elemei. Ha már alig várja, hogy az elem ellenőrzése opciót használja iPhone-on való böngészés során, ez a bejegyzés segít megtalálni ennek módját. 

Kapcsolódó: Az elem ellenőrzése Androidon

Meg tudod vizsgálni a webes elemeket közvetlenül a Safariban?

Az egyszerű válasz: nem. Az iOS Safari, mint sok más mobilböngésző, nem kínál natív ellenőrző eszközt a weboldal fejlesztésének megtekintéséhez. Az Apple nem indokolja, hogy miért nincs ilyen lehetőség, de úgy gondoljuk, hogy ennek köze van ahhoz, hogy milyen kicsi a kijelző az okostelefonokon. A kisebb képernyőméret megnehezítheti a felhasználók számára a navigálást a vizsgált mezők között, mivel előfordulhat, hogy óvatosan kell elhelyeznie a kurzort, amikor egy weboldal kódját szeretné szerkeszteni vagy akár meg is találni. 

Ennek másik oka lehet az okostelefonok számítási teljesítményének hiánya. Bár a modern iPhone-ok elegendő erővel bírnak intenzív grafikai játékok futtatásához, bonyolult lehet egy webhely oldalinformációinak megtekintése, mivel nem minden webhely készül egyformán. Egyes webhelyek sok erőforrást és réteget tartalmazhatnak, amelyeket gondosan alakítottak ki, hogy zökkenőmentesen nézzenek ki, de ugyanazon erőforrások betöltése ellenőrzéskor némi időt vehet igénybe. 

Kapcsolódó: Videó ismétlése iPhone-on [Útmutató]

Vizsgálja meg az elemet iPhone-on: Milyen egyéb lehetőségei vannak?

Bár nem használhatja natívan az „Elem vizsgálata” eszközt az iOS Safari alkalmazásban, továbbra is vannak módok a korlátozás megkerülésére. Az alábbiakban három módon ellenőrizheti a Safariban meglátogatott weboldalak elemeit iPhone-ján. 

01. módszer: A Safari használata Mac számítógépen

Ha iPhone-ja mellett macOS-eszköze is van, továbbra is megtekintheti a weboldalakat közvetlenül a Safari alkalmazásból, de Mac számítógépen. Az Apple lehetővé teszi a weboldalak hibakeresését a Safariból iOS rendszeren, akárcsak a Mac rendszeren, a „Fejlesztési” eszközeivel. Míg a webhely hibakeresési folyamata viszonylag egyszerű, a kezdeti beállítása hosszabb lehet, mint amire számítana. De ne aggódjon, mi a lehető legegyszerűbb módon elmagyarázzuk a beállítási folyamatot, és segítünk az oldalak könnyű ellenőrzésében az első alkalommal. 

A Web Inspector engedélyezése iOS rendszeren

A webes elemek hibakereséséhez először engedélyeznie kell a Web Inspector alkalmazást az iOS Safari alkalmazásban. Ehhez nyissa meg a Beállítások alkalmazást, és válassza a „Safari” lehetőséget.

A Safariban görgessen lefelé, és érintse meg a „Speciális” lehetőséget. 

A következő képernyőn érintse meg a „Web Inspector” melletti kapcsolót, amíg az zöldre nem vált. 

Kezdeti beállítás Macen

Miután sikeresen engedélyezte a Web Inspector for Safari alkalmazást iOS rendszeren, itt az ideje, hogy elvégezze a beállítást Mac számítógépén. Macen nyissa meg a Safari alkalmazást, kattintson a „Safari” lehetőségre a menüsorban, és válassza a „Beállítások” lehetőséget. 

A megjelenő ablakban válassza ki a „Speciális” fület felülről, és jelölje be a „Fejlesztési menü megjelenítése a menüsorban” négyzetet. 

Most látnia kell a „Fejlesztés” opciót a felső menüsorban. 

Most az iPhone-jához kapott USB-kábellel hozzon létre kapcsolatot az iPhone és a Mac között. Amikor iPhone-ja csatlakozik a Mac-hez, kattintson a „Fejlesztés” elemre a menüsorban, és nézze meg, hogy iPhone-ja megjelenik-e az eszközök listájában. Ha igen, kattintson az eszköz nevére a listában. 

Ha meg szeretné győződni arról, hogy vezeték nélkül, USB-kábel nélkül is meg tudja nézni a weboldalakat, ahogy az imént tette, kattintson a „Csatlakozás hálózaton keresztül” lehetőségre, amikor megnyílik az iPhone menü. 

Most már leválaszthatja iPhone-ját a Mac-ről, és továbbra is megtekintheti a weboldalakat anélkül, hogy kábelt csatlakoztatna közéjük. 

Nézze meg az iOS oldalait Mac számítógépen

Most, hogy engedélyezte a „Csatlakozás hálózaton keresztül” lehetőséget a „Fejlesztés” menüben, közvetlenül a Mac számítógépén is megtekintheti a weboldalakat az iOS rendszeren futó Safariból. Csak meg kell győződnie arról, hogy az iPhone és a Mac ugyanahhoz a vezeték nélküli hálózathoz csatlakozik, hogy vezeték nélkül tudjon hibakeresést végezni a weboldalakon. 

Ehhez nyissa meg a Safari alkalmazást iPhone-ján, és nyissa meg az ellenőrizni kívánt weboldalt. 

Miközben az iPhone feloldott, és a kiválasztott weboldal meg van nyitva, lépjen át a Mac számítógépére, és nyissa meg ott a Safari alkalmazást. Itt kattintson a „Fejlesztés” elemre a menüsorban, és lépjen az „iPhone” elemre. 

Amikor az egérmutatót az „iPhone” fölé viszi, látnia kell az iOS rendszeren megnyitott weboldalak listáját. Kattintson a listából arra a weboldalra, amelyet ellenőrizni szeretne. 

Megjelenik egy új ablak a Mac számítógépen, amelyben minden olyan információ látható, amely a kiválasztott weboldalról megtekinthető. 

Az ellenőrzés során bármikor láthatja, hogy az oldal melyik részére mutat egy kódsor, ha kék területet keres iPhone-ján.

Ez a kék terület azt jelzi, hogy a kód, amelyre az egérmutatót rámutatja a Mac gépen, képezi az adott weboldal kiemelt elemét. Ha a kód különböző sorai között mozog, ez a kék kiemelés valós időben mozgatja az iPhone oldalának különböző részein. 

Kapcsolódó: Hogyan tartsuk meg az effektusokat a FaceTime-ban

02. módszer: Parancsikonok használata iOS rendszeren 

Ha nem rendelkezik Mac géppel, vagy közvetlenül iPhone-járól szeretne bepillantást nyerni egy webhelyre, akkor örömmel fogja tudni, hogy az iOS Shortcuts alkalmazás erre. Az iOS-en a Parancsikonok alkalmazás egy csomó előre elkészített beállítást kínál, amelyek segítségével megtekintheti az oldal forráskódját, szerkesztheti a weboldalt, képeket kaphat egy webhelyről, és megkeresheti a weboldal régebbi verzióit a Safari alkalmazásból. Sajnos nincs egyetlen parancsikon sem, amely teljes értékű webes hibakeresést kínálna iOS rendszeren, ezért mindegyikhez hozzá kell adnia egy parancsikont. 

A következő parancsikonokat találtuk, amelyek segítségével közvetlenül iOS rendszerről végezhet hibakeresést webhelyeken. Ezek:

Forrás megtekintése – Ez a parancsikon lehetővé teszi egy weboldal forráskódjának megtekintését base bones formátumban. 

Weboldal szerkesztése – Ez a parancsikon lehetővé teszi a weboldal tartalmának helyi szerkesztését, így tesztelheti az új dizájnt vagy formátumot, és hogyan nézhet ki az iPhone készülékén. 

Képek lekérése az oldalról – Az oldalak ellenőrzésének elsődleges oka lehet, hogy megnézi a képeket, vagy elmenti azokat, amelyek egyébként nem interaktívak. Ez a parancsikon megragadja az összes képet egy bizonyos weboldalról, majd együttesen megtekinti azokat. Ahogy az alábbi képernyőkép is mutatja, megtekintheti a kiválasztott weboldalon tárolt 24 kép mindegyikét. 

Wayback Machine – Ez a parancsikon egy weboldal Wayback Machinejére visz, ahol megtekintheti annak korábbi verzióit, amelyek az internetes archívumban maradtak. 

Attól függően, hogy az iOS rendszeren hogyan szeretné megvizsgálni a weboldalakat, ezeket a parancsikonokat hozzáadhatja iPhone-jához, ha rákattint a fenti megfelelő hivatkozásokra, vagy megkeresi őket a Parancsikonok > Galéria részben. 

A keresési eredmények között érintse meg azt a parancsikont, amelyet hozzá szeretne adni az iPhone-hoz. 

Amikor megnyílik egy előnézeti képernyő, koppintson a 'Widget hozzáadása' lehetőségre alul. 

A parancsikonok a Saját billentyűparancsok > Minden parancsikon képernyőn jelennek meg, és a Safari Megosztás lapján is elérhetők lesznek.  

Egy weboldal megtekintéséhez nyissa meg a Safari böngészőben, és koppintson a „Megosztás” gombra alul. 

A megjelenő Megosztás lapon görgessen lefelé, és keresse meg az iPhone-jához hozzáadott parancsikonokat. 

A "Weboldal szerkesztése" kiválasztásával közvetlenül szerkesztheti a weboldal egyes részeit. Amikor kiválasztja a másik három lehetőség bármelyikét, a rendszer megkérdezi, hogy szeretné-e elérni a weboldalt a parancsikonnal. Itt érintse meg az „Egyszer engedélyezés” lehetőséget. 

Kapcsolódó: WidgetSmith hozzáadása a kezdőképernyőhöz

03. módszer: Harmadik féltől származó alkalmazások használata

Ha nem elégedett a fenti eredményekkel, fel kell fedeznie harmadik féltől származó alkalmazásokat, hogy ellenőrizni tudja egy weboldal elemeit. A Safarihoz hasonlóan a legnépszerűbb webböngészőkben (Chrome, Firefox, Brave stb.) nem talál módot a weboldalak ellenőrzésére. Ehelyett egy olyan alkalmazásra kell hagyatkoznia, amelyet erre a konkrét feladatra hoztak létre, és az ehhez hasonló alkalmazásokat nehéz lehet megtalálni.

Míg egy egyszerű keresés az App Store-ban számos eredményt ad a webes elemek ellenőrzéséhez, nem fog sok olyan alkalmazást találni, amely ingyenesen elérhető és magasra értékelt. A felhasználói visszajelzések alapján azt javasoljuk, hogy telepítse az Inspect Browser vagy Gear Browser  alkalmazásokat az App Store-ból, amelyek lehetővé teszik az elemek ellenőrzését és szerkesztését JavaScript-, CSS- és HTML-kódokon. 

Ez minden, amit tudnia kell az elemek ellenőrzéséről iPhone-on. 

ÖSSZEFÜGGŐ

• Hogyan illesszen be iPhone-ra tartás nélkül
• Hogyan hagyjunk el egy csoportos szöveget az iMessage-ben, és mi történik
• Hogyan találhat nyomon követő légcímkéket
• 30 szokatlan iOS 15 trükk, amit tudnia kell
• Hogyan állítsunk be véletlenszerű háttérképet ismétlés nélkül az iPhone-on