Ako používať Web Inspector na ladenie mobilného Safari (iPhone alebo iPad)

Vývoj webových stránok pre mobilné zariadenia alebo ladenie vašej hybridnej aplikácie je často ťažké. Našťastie pre ľudí, ktorí navrhujú pre iOS, počnúc iOS 6, Apple ponúka funkciu vzdialeného webového inšpektora v iOS.

Web Inspector umožňuje vývojárom webových a mobilných aplikácií používať macOS a OS X Safari Developer Tools na vzdialené ladenie webového obsahu alebo hybridných aplikácií v mobilnom Safari na iPade alebo iPhone.

Je to jednoduchý a praktický spôsob ladenia, optimalizácie a úpravy vašich webových stránok alebo hybridných aplikácií v systéme iOS.

Ak chcete získať prístup k týmto vývojovým nástrojom, povoľte ponuku Vývoj v rozšírených predvoľbách Safari vášho Macu.

Rýchle tipy

Postupujte podľa týchto rýchlych tipov, aby ste spustili webového inšpektora, aby ste mohli ladiť svoje stránky alebo aplikáciu pre Safari

• Obnovte nastavenia polohy a súkromia na svojom iPhone, iPade alebo iPode touch. Ísť do Nastavenia > Všeobecné > Obnoviť > Obnoviť polohu a súkromie
• Uistite sa, že ste sa na počítači prihlásili pomocou rovnakého Apple ID ako iPhone, iPad alebo iPod touch
• Zapnite synchronizáciu Safari iCloud pre počítač aj pre akýkoľvek iPhone, iPad alebo iPod touch
• Na iPhone alebo iPade prejdite na Nastavenia > Safari > Rozšírené a zapnite Webový inšpektor
• Na počítači otvorte Safari a prejdite na Ponuka Safari > Predvoľby > Rozšírené a začiarknutie Zobraziť ponuku Develop na paneli s ponukami

Súvisiace články

• Zobrazte zdrojový kód HTML webovej stránky na zariadení iPad alebo iPhone. Nevyžaduje sa žiadna aplikácia!
• Ako zobraziť zdrojový kód HTML v prehliadači Safari
• Ako zobraziť obľúbené ikony v Safari pre iPhone a Mac

Vyžaduje sa počítač Mac

Ľutujeme, Windows, ale Safari Web Inspector je kompatibilný iba s Mac!

Použite rovnaké Apple ID a iCloud Sync!

Uistite sa, že vaše iDevice aj váš Mac sú prihlásené pomocou rovnakého Apple ID a že máte v iCloude zapnuté Safari.

Pre vaše zariadenie iDevice: Nastavenia > Profil Apple ID > iCloud > Safari > zapnuté

Pre váš Mac: Apple Menu > System Preferences > Apple ID alebo iCloud > Safari > Checkmarked

A skontrolujte, či má Safari rovnakú verziu

Uistite sa, že Safari na vašom Macu má rovnakú verziu ako Safari na vašom iDevice. Možno budete musieť aktualizovať svoju verziu systému iOS alebo verziu prehliadača Safari spustenú na počítači Mac.

Obnovte nastavenia polohy a súkromia

1. Ísť do Nastavenia > Všeobecné
2. Vyberte Resetovať
3. Vyberte si Obnoviť polohu a súkromie

Tip na klávesovú skratku Pro na Macu pre webových vývojárov

Ak v Safari stlačíte CTRL+Command+R, výberom zariadenia môžete vidieť, ako by webová lokalita vyzerala na konkrétnom zariadení.

Na ladenie mobilného Safari použite Web Inspector

1. Na iPade, iPhone alebo iPode touch klepnite na Nastavenia > Safari > Rozšírené a zapnite Webový inšpektor. A povoľte JavaScript, ak ešte nie je zapnutý

2. Na Macu spustite Safari a prejdite na Ponuka Safari > Predvoľby > Rozšírené potom skontrolujte „Zobraziť ponuku Develop na paneli s ponukami“, ak ste tak ešte neurobili

3. Pripojte svoje iOS zariadenie k Macu pomocou USB kábla. Toto je dôležité – zariadenia musíte pripojiť manuálne pomocou kábla. Cez WiFi to nejde!

4. Teraz na svojom iPade otvorte webovú stránku, ktorú chcete ladiť, potom na Macu otvorte Safari a prejdite na „Rozvíjať" Ponuka. Teraz vidíte svoje iDevice, ktoré ste pripojili k Macu. Ak na svojom iDevice nemáte otvorenú žiadnu stránku, zobrazí sa správa „Žiadne kontrolovateľné aplikácie“.

5. Teraz odlaďte stránku, ktorá je otvorená v mobilnom Safari, rovnako ako by ste ladili na Macu, skontrolujte prvky DOM, upravte CSS, zmerajte výkon stránky a spustite príkazy Javascript.

Použite nástroj na ladenie, ktorý vám pomôže nájsť príčinu akýchkoľvek chýb JavaScript na vašej webovej stránke. Môžete pridávať body prerušenia, ladiť javascript a kontrolovať hodnotu premenných za behu.

Safari by tiež malo zistiť chyby CSS, HTML a JavaScript. A uvidíte podrobnosti o každej chybe v ladiacom nástroji.

iDevice sa nezobrazuje v ponuke Vývoj v Safari?

•  Vymažte vyrovnávaciu pamäť Safari a súbory cookie
• Aktualizujte Safari na svojom Macu a iDevice, ak je k dispozícii aktualizácia.
  • Ak používate beta verziu pre iOS alebo macOS, možno budete musieť spustiť najnovšiu beta verziu na všetkých zariadeniach
• Vyskúšajte iný kábel a/alebo port na Macu. Uistite sa, že kábel je originálny kábel Apple lightning alebo certifikovaný MFI (vyrobený pre iPhone)
• Skontrolujte, či je Web Inspector zapnutý. Aktualizácie systému iOS to niekedy prepnú späť na predvolené nastavenie VYPNUTÉ. Takže len skontrolujte Nastavenia > Safari > Rozšírené > Webový inšpektor
  • Skúste Web Inspector vypnúť, počkajte 10 sekúnd a znova ho zapnite
• Skúste namiesto toho prehliadač Safari Technology Preview
• Ukončite Safari na Macu a reštartujte ho. Zistite, či Safari vášho Macu rozpozná vaše zariadenie a povolí ladenie
• Skontrolujte, či nepoužívate režim súkromného prehliadania Safari if vaše zariadenie iDevice sa len nakrátko zobrazí v ponuke Vývoj v Safari a potom zmizne
• Otvorte Monitor aktivity a skontrolujte, čo sa deje so Safari

Tipy pre čitateľov 

• Ak používate staršie zariadenie iDevice so systémom iOS 6 alebo starším, webový prehliadač Safari vášho zariadenia má vlastnú vstavanú konzolu Debug Console! Stačí prejsť na ladiacu konzolu Safari nastavenie > Safari > Vývojár > Konzola ladenia