Jak používat webový inspektor k ladění mobilního Safari (iPhone nebo iPad)

Vývoj webových stránek pro mobilní zařízení nebo ladění hybridní aplikace je často obtížné. Ale naštěstí pro lidi, kteří navrhují na iOS, počínaje iOS 6, Apple nabízí funkci vzdáleného webového inspektora v iOS.

Web Inspector umožňuje vývojářům webových a mobilních aplikací používat vývojářské nástroje pro macOS a OS X Safari ke vzdálenému ladění webového obsahu nebo hybridních aplikací v mobilním Safari na iPadu nebo iPhone.

Jedná se o snadný a praktický způsob ladění, optimalizace a úpravy vašich webových stránek nebo hybridních aplikací pro iOS.

Chcete-li získat přístup k těmto vývojovým nástrojům, povolte nabídku Vývoj v předvolbách Safari na Macu Advanced.

Postupujte podle těchto rychlých tipů, aby webový inspektor fungoval, abyste mohli ladit svůj web nebo aplikaci pro Safari

  • Obnovte své nastavení polohy a soukromí na iPhonu, iPadu nebo iPodu touch. Jít doNastavení> Obecné> Obnovit> Obnovit polohu a soukromí
  • Nezapomeňte se v počítači přihlásit ke stejnému Apple ID jako iPhone, iPad nebo iPod touch
  • Zapněte synchronizaci Safari iCloud pro počítač i iPhone, iPad nebo iPod touch
  • Na iPhonu nebo iPadu přejděte naNastavení> Safari> Pokročilé a zapnout Webový inspektor
  • V počítači otevřete Safari a přejděte do složkyNabídka Safari> Předvolby> Pokročilé a zaškrtnutí Zobrazit nabídku Vývoj na liště nabídek

Je vyžadován počítač Mac

Je nám líto, Windows, ale webový inspektor Safari je kompatibilní pouze s počítači Mac!

Použijte stejné Apple ID a iCloud Sync!

Ujistěte se, že iDevice i Mac jsou přihlášeni se stejným Apple ID a že přepnete ON Safari na iCloudu.

Pro vaše zařízení iDevice:Nastavení> Profil Apple ID> iCloud> Safari> zapnuto

Pro váš Mac:Nabídka Apple> Předvolby systému> Apple ID nebo iCloud> Safari> Zaškrtnuto

A zkontrolujte, zda je Safari také ve stejné verzi

Ujistěte se, že Safari na vašem Macu má stejnou verzi jako Safari na vašem iDevice. Možná budete muset aktualizovat verzi iOS nebo verzi Safari běžícího na Macu.

Obnovte svou polohu a nastavení ochrany osobních údajů

  1. Jít do Nastavení> Obecné
  2. Vybrat Resetovat
  3. Zvolte Obnovit polohu a soukromí

Tip pro klávesovou zkratku Pro Keyboard pro Mac pro webové vývojáře

Pokud v prohlížeči Safari stisknete kombinaci kláves CTRL + Command + R, můžete výběrem zařízení zjistit, jak by web vypadal na konkrétním zařízení.

Přepnutím klávesové zkratky opustíte zobrazení webového vývojáře.

K ladění mobilního Safari použijte webový inspektor

1. Na iPadu, iPhonu nebo iPodu touch klepněte na Nastavení> Safari> Pokročilé a zapnout Webový inspektor. A pokud ještě není zapnutý, povolte JavaScript

2. V počítači Mac spusťte Safari a přejděte na Nabídka Safari> Předvolby> Pokročilé pak zkontrolujte „Zobrazit nabídku Vývoj na liště nabídek„Pokud jste tak ještě neučinili

3. Připojte zařízení iOS k počítači Mac pomocí kabelu USB. To je zásadní - zařízení musíte připojit ručně pomocí kabelu. Nefunguje to přes WiFi!

4. Nyní na iPadu otevřete web, který chcete ladit, poté na Macu otevřete Safari a přejděte na „Rozvíjet" Jídelní lístek. Nyní vidíte své zařízení iDevice, které jste připojili k počítači Mac. Pokud na iDevice nemáte otevřenou žádnou stránku, zobrazí se zpráva „Žádné kontrolovatelné aplikace.“

5. Nyní nalaďte stránku, která je otevřená v mobilním Safari, stejně jako byste ladili na Macu, zkontrolujte prvky DOM, upravte CSS, změřte výkon stránky a spusťte příkazy Javascript.

Pomocí nástroje debugger můžete najít příčinu jakýchkoli chyb JavaScriptu na své webové stránce. Můžete přidat zarážky, ladit javascript a zkontrolovat hodnotu proměnných za běhu.

Safari by měl také detekovat chyby CSS, HTML a JavaScript. V ladicím programu uvidíte podrobnosti o každé chybě.

iDevice se nezobrazuje v nabídce Develop v Safari?

  • Vymažte mezipaměť Safari a soubory cookie
  • Pokud je k dispozici aktualizace, aktualizujte Safari na svém Macu a iDevice
    • Pokud používáte beta verzi pro iOS nebo macOS, možná budete muset spustit nejnovější beta verzi na všech zařízeních
  • Zkuste na svém Macu jiný kabel nebo port. Ujistěte se, že kabel je originální kabel Apple Lightning nebo MFI Certified (Made for iPhone)
  • Zkontrolujte, zda je webový inspektor zapnutý. Aktualizace iOS to někdy přepnou zpět na výchozí nastavení VYPNUTO. Nezapomeňte to tedy zkontrolovatNastavení> Safari> Pokročilé> Webový inspektor
    • Zkuste webový inspektor vypnout, počkejte 10 sekund a znovu jej zapněte
  • Zkuste místo toho prohlížeč Safari Technology Preview
  • Ukončete Safari na Macu a restartujte jej. Zjistěte, zda Safari vašeho počítače Mac poté rozpozná vaše zařízení a umožní ladění
  • Zkontrolujte, zda nepoužíváte režim soukromého prohlížení Safari, pokud se vaše zařízení iDevice zobrazí pouze krátce v nabídce Vývoj Safari a poté zmizí
  • Otevřete Monitor aktivity a zkontrolujte, co se děje se Safari

Tipy pro čtenáře

  • Pokud používáte starší iDevice se systémem iOS 6 nebo starším, webový prohlížeč Safari vašeho zařízení má vlastní integrovanou konzolu pro ladění! Stačí přejít na Debug Console Safari a přejít naNastavení > Safari > Vývojář > Debug Console

Poslední příspěvky