A Web Inspector használata a Mobile Safari hibakeresésére (iPhone vagy iPad)

Weboldalak fejlesztése mobileszközökhöz vagy a hibrid alkalmazás hibakeresése gyakran nehéz. Szerencsére azonban azok számára, akik iOS-en terveznek, az iOS 6-tól kezdődően az Apple távoli webellenőrző funkciót kínál az iOS rendszerben.

A Web Inspector lehetővé teszi a web- és mobilalkalmazás-fejlesztők számára, hogy a macOS és OS X Safari Developer Tools segítségével távolról hibakereshessenek webes tartalmakat vagy hibridalkalmazásokat a mobil Safariban iPaden vagy iPhone-on.

Ez egy egyszerű és praktikus módja a weboldalak vagy hibrid alkalmazások hibakeresésének, optimalizálásának és módosításának iOS rendszeren.

A fejlesztői eszközök eléréséhez engedélyezze a Fejlesztés menüt a Mac Safari Speciális beállításainál.

Gyors tippek

Kövesse ezeket a gyors tippeket a webes felügyelő működéséhez, hogy hibakeresést végezhessen webhelyén vagy alkalmazásában a Safari számára

• Állítsa vissza hely- és adatvédelmi beállításait iPhone, iPad vagy iPod touch készülékén. Menj Beállítások > Általános > Visszaállítás > Hely és adatvédelem visszaállítása
• Győződjön meg arról, hogy ugyanazzal az Apple ID-vel jelentkezik be a számítógépen, mint az iPhone, iPad vagy iPod touch készülékén
• Kapcsolja be a Safari iCloud szinkronizálást a számítógépen és bármely iPhone, iPad vagy iPod touch készüléken
• iPhone vagy iPad készüléken lépjen a következőre: Beállítások > Safari > Speciális és kapcsolja be Webfelügyelő
• A számítógépen nyissa meg a Safarit, és lépjen a Safari menü > Beállítások > Speciális és pipa A Fejlesztés menü megjelenítése a menüsorban

kapcsolódó cikkek

• Tekintse meg a weboldal HTML-forráskódját iPaden vagy iPhone-on. Nincs alkalmazás szükséges!
• A HTML-forráskód megtekintése a Safariban
• Faviconok megtekintése a Safariban iPhone-on és Macen

Mac számítógép szükséges

Sajnáljuk, Windows emberek, de a Safari Web Inspector csak Mac számítógépekkel kompatibilis!

Használja ugyanazt az Apple ID-t és az iCloud Sync-et!

Győződjön meg arról, hogy az iDevice és a Mac számítógépen is ugyanazzal az Apple ID-vel van bejelentkezve, és hogy az iCloudban kapcsolta be a Safarit.

Az iDevice számára: Beállítások > Apple ID profil > iCloud > Safari > BE kapcsolva

Mac gépen: Apple Menu > System Preferences > Apple ID vagy iCloud > Safari > Checkmarked

És ellenőrizze, hogy a Safari is ugyanaz a verzió

Győződjön meg arról, hogy a Mac számítógépén futó Safari verziója megegyezik az iDevice Safari verziójával. Lehetséges, hogy frissítenie kell az iOS-verzióját vagy a Safari Mac-en futó verzióját.

Állítsa vissza hely- és adatvédelmi beállításait

1. Menj Beállítások > Általános
2. Válassza ki Visszaállítás
3. Válassza a lehetőséget Hely és adatvédelem visszaállítása

Pro billentyűparancsi tipp a Mac rendszeren webfejlesztőkhöz

Ha megnyomja a CTRL+Command+R billentyűkombinációt a Safariban, az eszköz kiválasztásával megtekintheti, hogyan nézne ki egy webhely egy adott eszközön.

Használja a Web Inspectort a mobil Safari hibakereséséhez

1. iPaden, iPhone-on vagy iPod touchon érintse meg a lehetőséget Beállítások > Safari > Speciális és kapcsolja be Webfelügyelő. És engedélyezze a JavaScriptet, ha még nincs bekapcsolva

2. Mac számítógépén indítsa el a Safarit, és lépjen a következőre: Safari menü > Beállítások > Speciális majd ellenőrizze a "A Fejlesztés menü megjelenítése a menüsorban” ha még nem tette meg

3. Csatlakoztassa iOS-eszközét Mac számítógépéhez az USB-kábellel. Ez kritikus – manuálisan kell csatlakoztatnia az eszközöket egy kábel segítségével. WiFi-n keresztül nem működik!

4. Most iPaden nyissa meg a hibakeresni kívánt webhelyet, majd Mac számítógépen nyissa meg a Safarit, és lépjen a „Fejleszteni” menüben. Most megjelenik az iDevice, amelyet csatlakoztatott a Machez. Ha nincs megnyitva oldal az iDevice-en, akkor megjelenik a „Nincsenek vizsgálható alkalmazások” üzenet.

5. Most végezzen hibakeresést a mobil Safariban megnyitott oldalon, ugyanúgy, mint a Mac rendszeren, ellenőrizze a DOM-elemeket, módosítsa a CSS-t, mérje meg az oldal teljesítményét, és futtasson Javascript-parancsokat.

A hibakereső eszköz segítségével megtalálhatja a weboldalán előforduló JavaScript-hibák okát. Hozzáadhat töréspontokat, hibakeresést végezhet a javascriptben, és futás közben ellenőrizheti a változók értékét.

A Safarinak észlelnie kell a CSS-, HTML- és JavaScript-hibákat is. És látni fogja az egyes hibák részleteit a hibakeresőben.

Az iDevice nem jelenik meg a Safari Fejlesztési menüjében?

•  Törölje a Safari gyorsítótárát és a cookie-kat
• Frissítse a Safari programot Mac és iDevice számítógépén, ha elérhető frissítés.
  • Ha béta iOS vagy macOS verziót futtat, előfordulhat, hogy minden eszközön a legújabb bétaverziót kell futtatnia
• Próbáljon ki egy másik kábelt és/vagy portot a Mac számítógépén. Győződjön meg arról, hogy A kábel egy eredeti Apple Lightning kábel vagy MFI-tanúsítvánnyal rendelkezik (iPhone-hoz készült)
• Ellenőrizze, hogy a Web Inspector BE van-e kapcsolva. Az iOS frissítései néha visszakapcsolják az alapértelmezett OFF beállítást. Tehát csak feltétlenül ellenőrizze Beállítások > Safari > Speciális > Web Inspector
  • Próbálja meg kikapcsolni a Web Inspectort, várjon 10 másodpercet, majd kapcsolja vissza
• Inkább próbálja ki a Safari Technology Preview böngészőt
• Lépjen ki a Safariból a Mac-en, és indítsa újra. Nézze meg, hogy a Mac Safari felismeri-e az eszközt, és engedélyezi-e a hibakeresést
• Ellenőrizze, hogy nem használja-e a Safari privát böngészési módját if az iDevice csak rövid ideig jelenik meg a Safari Fejlesztés menüjében, majd eltűnik
• Nyissa meg az Activity Monitor alkalmazást, és ellenőrizze, hogy mi történik a Safarival

Olvasói tippek 

• Ha régebbi iDevice-t használ iOS 6 vagy korábbi verzióval, akkor az eszköz Safari webböngészője saját beépített hibakereső konzollal rendelkezik! Csak nyissa meg a Safari Debug Console-ját a következővel: Beállítások > Szafari > Fejlesztő > Debug Console