Vzdálené ladění iOS Safari s Chrome DevTools

V dnešním světě webového vývoje je klíčové zajistit, aby vaše webové aplikace a stránky fungovaly bezchybně na všech zařízeních, včetně těch s operačním systémem iOS. Ačkoliv simulátory jsou užitečné, nic nenahradí testování a ladění přímo na reálném zařízení iPhone. Vzdálené ladění vám umožňuje připojit váš iPhone k počítači a používat plnohodnotné vývojářské nástroje, jako jsou Chrome DevTools, pro inspekci, úpravy a ladění kódu v reálném čase. Tato schopnost je neocenitelná pro odhalování a opravování chyb specifických pro iOS Safari, optimalizaci výkonu a zajištění bezproblémového uživatelského zážitku. Zapomeňte na zdlouhavé testování s konzolovými výpisy a objevte efektivnější způsob, jak dostat vaše webové projekty do dokonalosti na platformě iOS.

Co budete potřebovat pro vzdálené ladění

Než se pustíme do samotného nastavení, je důležité se ujistit, že máte k dispozici veškerý potřebný hardware a software. Bez těchto základních komponent nebude možné navázat spojení mezi vaším počítačem a iPhonem pro vzdálené ladění.

Hardwarové požadavky:

• Počítač: Může to být stolní PC nebo notebook s operačním systémem Windows nebo Linux.
• Zařízení iPhone: Váš iPhone, na kterém chcete ladit webové aplikace.
• Lightning kabel: Originální nebo certifikovaný kabel pro připojení iPhonu k počítači.

Softwarové požadavky:

• iTunes: Používá se pro připojení iPhonu k počítači a získání důvěryhodného certifikátu, což je klíčové pro správnou komunikaci.
• Google Chrome: Budete používat jeho vývojářské nástroje (DevTools) pro ladění.
• Node.js: Potřebný pro instalaci a správu nástrojů a závislostí pomocí balíčkového manažeru npm. Doporučuje se verze 10.15.3 nebo novější.
• Scoop (pouze pro Windows): Jedná se o nástroj pro správu balíčků v příkazovém řádku Windows, který výrazně zjednodušuje instalaci některých potřebných závislostí.
• RemoteDebug iOS WebKit Adapter: Klíčový adaptér, který vytváří most pro připojení a synchronizaci dat mezi iPhonem a počítačem, umožňující Chrome DevTools komunikovat se Safari na iOS.

Průvodce instalací a nastavením krok za krokem

Nyní se podíváme na detailní postup, jak nastavit vše potřebné pro vzdálené ladění iOS zařízení. Instalace základních programů jako iTunes, Chrome a Node.js je obvykle velmi přímočará a uživatelsky přívětivá, proto se na ně nebudeme podrobně zaměřovat. Soustředíme se na specifické kroky pro instalaci a konfiguraci adapteru a jeho závislostí.

1. Instalace závislostí (Windows)

Pro uživatele Windows je nejjednodušší cestou použití nástroje Scoop. Pokud jej ještě nemáte, otevřete PowerShell jako administrátor a spusťte následující příkazy:

scoop bucket add extras scoop install ios-webkit-debug-proxy npm install -g vs-libimobile

Tyto příkazy nainstalují ios-webkit-debug-proxy a libimobiledevice, což jsou základní komponenty pro komunikaci s iOS zařízením.

2. Instalace nejnovější verze adapteru

Nyní nainstalujeme samotný RemoteDebug iOS WebKit Adapter. Otevřete příkazový řádek (nebo PowerShell) a spusťte:

npm install remotedebug-ios-webkit-adapter -g

Parametr -g zajistí globální instalaci, takže adaptér bude dostupný odkudkoli v příkazovém řádku.

3. Povolení vzdáleného ladění v Safari na iPhonu

Aby se vaše iOS zařízení zobrazilo pro ladění, musíte na něm povolit funkci „Web Inspector“. Je to klíčový krok, bez kterého se nebudete moci připojit.

1. Otevřete Nastavení na vašem iPhonu.
2. Přejděte dolů a klepněte na Safari.
3. Sjeďte úplně dolů a klepněte na Pokročilé (Advanced).
4. Zde povolte možnost Web Inspector (Webový inspektor).

4. Důvěra počítače ve vaše iOS zařízení

Tento krok je zásadní pro navázání bezpečného spojení. Poprvé, když připojíte svůj iPhone k novému počítači, iTunes vás vyzve k potvrzení důvěry. Ujistěte se, že toto potvrzení provedete.

1. Připojte svůj iPhone k počítači pomocí Lightning kabelu.
2. Spusťte iTunes.
3. Na iPhonu se objeví dialog „Důvěřovat tomuto počítači?“. Klepněte na Důvěřovat.
4. Na počítači v iTunes klikněte na „Pokračovat“ nebo „Důvěřovat“ (pokud se objeví).
5. Po úspěšném navázání spojení byste měli vidět váš iPhone zobrazený v iTunes.

5. Spuštění adapteru z příkazového řádku

Nyní, když jsou všechny závislosti nainstalovány a zařízení důvěryhodné, můžete spustit samotný adaptér.

1. Otevřete příkazový řádek (nebo PowerShell).
2. Spusťte následující příkaz:

remotedebug_ios_webkit_adapter --port=9000

3. Všimněte si, že ios-webkit-debug-proxy se spustí automaticky na pozadí, není třeba jej spouštět samostatně.
4. Pokud se objeví vyskakovací okno s žádostí o povolení přístupu (například pro firewall), klikněte na Povolit přístup.
5. Po úspěšném spuštění byste měli vidět v příkazovém řádku zprávy indikující, že adaptér běží a čeká na připojení.

Poznámka k portu: Můžete změnit port, na kterém adaptér naslouchá, pomocí parametru --port. Například remotedebug_ios_webkit_adapter --port=9001. Výchozí je 9000.

6. Otevření Chrome DevTools a připojení

Posledním krokem je připojení Chrome DevTools k běžícímu adaptéru.

1. Otevřete prohlížeč Google Chrome na vašem počítači.
2. Do adresního řádku zadejte localhost:9000. Měla by se zobrazit jednoduchá „Hello“ obrazovka, potvrzující, že adaptér je dostupný.
3. Otevřete nové okno nebo kartu v Chrome a zadejte chrome://inspect/#devices.
4. Na této stránce uvidíte sekci „Remote Target“ nebo „Devices“.
5. Klikněte na tlačítko Configure (Konfigurovat).
6. Do pole přidejte adresu localhost:9000 a potvrďte.
7. Nyní byste měli vidět sekci „RemoteDebug iOS adapter“ a pod ní by se mělo objevit vaše iOS zařízení, jakmile na něm otevřete webovou stránku v Safari.

Používání vzdáleného ladění v praxi

Jakmile je vše nastaveno, můžete začít s efektivním laděním.

1. Na svém iPhonu otevřete prohlížeč Safari a přejděte na URL adresu webové aplikace nebo stránky, kterou chcete ladit (například http://tinhtd.info nebo vaši lokální vývojovou adresu, pokud je dostupná z iPhonu).
2. Na počítači se vraťte do chrome://inspect/#devices. Nyní byste měli vidět své zařízení a pod ním otevřenou webovou stránku s tlačítkem Inspect (Inspektovat).
3. Klikněte na Inspect. Otevře se nové okno s plnohodnotnými Chrome DevTools, které jsou připojeny k Safari na vašem iPhonu.

Nyní můžete začít ladit. Můžete prozkoumávat DOM (strukturu stránky), upravovat CSS styly v reálném čase, sledovat síťové požadavky, analyzovat výkon a samozřejmě používat konzoli pro spouštění JavaScriptového kódu.

Příklad použití konzole:

Jednou z nejčastějších a nejpřínosnějších funkcí je konzole. Můžete v ní spouštět JavaScriptový kód přímo na iPhonu, aniž byste museli provádět novou deployment. To je ideální pro rychlé testování dílčích funkcí nebo ověřování dat.

• Otevřete záložku Console v Chrome DevTools.
• Zadejte například: window.alert("Test debugování na mobilu");
• Stiskněte Enter. Okamžitě se na vašem iPhonu zobrazí upozornění s textem „Test debugování na mobilu“.

Tato schopnost vám umožňuje rychle ověřit, zda se vaše malé změny chovají očekávaným způsobem, aniž byste museli procházet celý cyklus nasazení a testování.

Alternativní metoda ladění: Weinre

Kromě výše popsaného adapteru existuje i další nástroj pro vzdálené ladění, nazvaný Weinre (WEb INspector REmote). Jedná se o jednodušší řešení, které nevyžaduje tolik závislostí a funguje na principu vložení speciálního JavaScriptového skriptu do vaší webové stránky.

Jak nastavit Weinre:

Nejprve se ujistěte, že máte Node.js a na iPhonu povolený „Web Inspector“ (viz krok 3 výše).

1. Instalace Weinre: Otevřete příkazový řádek a spusťte: npm install -g weinre
2. Spuštění Weinre serveru: Zjistěte svou lokální IP adresu (např. pomocí ipconfig na Windows nebo ifconfig na Linuxu) a spusťte Weinre s touto adresou a volným portem. Například, pokud je vaše IP 192.168.1.5 a chcete použít port 4576, spusťte: weinre --boundHost 192.168.1.5:4576
3. Vložení skriptu do vaší webové stránky: Do HTML kódu vaší webové stránky, kterou chcete ladit, vložte následující skript těsně před uzavírací značku </body>:

   <script src="http://VAŠE_IP_ADRESA:PORT/target/target-script-min.js"></script>

   Nahraďte VAŠE_IP_ADRESA:PORT adresou, kterou jste použili při spuštění Weinre serveru (např. http://192.168.1.5:4576/target/target-script-min.js).

4. Připojení k Weinre klientovi: Na vašem počítači otevřete prohlížeč a přejděte na URL http://VAŠE_IP_ADRESA:PORT/client/. Zde uvidíte rozhraní Weinre, které se pokusí připojit k vaší webové stránce na iPhonu.
5. Otevření stránky na iPhonu: Na iPhonu otevřete Safari a přejděte na URL vaší webové stránky, do které jste vložili Weinre skript.

Pokud vše proběhne v pořádku, v prohlížeči na vašem počítači se v rozhraní Weinre zobrazí vaše zařízení a budete moci inspekovat kód, prohlížet konzoli a pracovat s úložištěm (indexedDB, localStorage, sessionStorage).

Řešení problémů s Weinre:

• Chyba při spuštění Weinre serveru: Zkontrolujte, zda je vaše IP adresa správná a zda je port volný.
• Zařízení se nezobrazuje: Zkuste přidat název zařízení do skriptu, např. <script src="http://VAŠE_IP_ADRESA:PORT/target/target-script-min.js#myDevice"></script>. Pak v klientovi přejděte na http://VAŠE_IP_ADRESA:PORT/client/#myDevice.

Weinre je dobrá volba pro jednodušší ladění, ale nenabízí tak komplexní sadu nástrojů jako plnohodnotné Chrome DevTools přes remotedebug-ios-webkit-adapter.

Časté dotazy (FAQ)

Mohu vzdáleně ladit webové stránky na iOS z počítače s Linuxem?

Ano, proces je velmi podobný jako na Windows. Místo Scoop použijete správce balíčků vaší distribuce (např. apt nebo yum) pro instalaci ios-webkit-debug-proxy a dalších závislostí. Zbytek kroků s Node.js a adaptérem je stejný.

Potřebuji k tomu Mac?

Ne, jednou z hlavních výhod remotedebug-ios-webkit-adapter je, že umožňuje vzdálené ladění iOS Safari z počítačů s Windows nebo Linux, což eliminuje potřebu Macu pro tento konkrétní účel.

Mohu tímto způsobem ladit nativní iOS aplikace?

Ne, tato metoda je určena výhradně pro ladění webového obsahu (webové stránky, progresivní webové aplikace) spuštěného v prohlížeči Safari na iOS. Není určena pro ladění kódu nativních iOS aplikací.

Co když nevidím své zařízení v chrome://inspect/#devices?

Zkontrolujte následující:

• Je váš iPhone připojen k počítači pomocí Lightning kabelu?
• Důvěřoval jste počítači na iPhonu a v iTunes?
• Je na iPhonu v Nastavení > Safari > Pokročilé povoleno Web Inspector?
• Běží remotedebug_ios_webkit_adapter v příkazovém řádku a nehlásí žádné chyby?
• Máte na iPhonu otevřenou webovou stránku v Safari?
• Zkuste odpojit a znovu připojit iPhone, zatímco adaptér běží.
• Zkuste restartovat adaptér a Chrome.

Proč se v DevTools objevuje chyba 'Browser' domain was not found?

Tato chyba obvykle znamená, že se pokoušíte inspektovat stránku, která není inspektovatelná, nebo došlo k problému s indexem stránky. Může to být způsobeno například rozšířením Safari. Zkontrolujte URL http://localhost:9222/ (pokud používáte defaultní port proxy) pro seznam dostupných stránek a ujistěte se, že odkaz, na který klikáte v chrome://inspect/#devices, odpovídá správné stránce (např. /devtools/page/1, /devtools/page/2 atd.).

Mám chybu WebSocket connection failed, co mám dělat?

Tato chyba často indikuje problém s navázáním spojení s proxy serverem. Zkuste odpojit a znovu připojit svůj iPhone, zatímco je webová stránka, kterou chcete ladit, otevřená v Safari. Jakmile uvidíte v konzoli ios-webkit-debug-proxy zprávu jako „Connected :9222 to ...“, obnovte stránku inspektoru v prohlížeči (nikoli tlačítkem pro obnovení v samotném inspektoru, ale celou stránku prohlížeče).

Závěr

Vzdálené ladění iOS Safari pomocí Chrome DevTools a remotedebug-ios-webkit-adapter je silný nástroj, který výrazně zefektivňuje proces vývoje webových aplikací pro platformu Apple. Díky němu můžete snadno identifikovat a opravovat chyby, optimalizovat výkon a zajistit, že vaše webové projekty budou vypadat a fungovat bezvadně na reálných iOS zařízeních. Ačkoliv počáteční nastavení může vyžadovat několik kroků, investovaný čas se vám mnohonásobně vrátí ve zrychleném vývoji a vyšší kvalitě vašich produktů. Nezapomeňte pravidelně kontrolovat aktualizace adapteru a souvisejících nástrojů, abyste měli vždy k dispozici nejnovější funkce a opravy. S touto znalostí jste nyní připraveni posunout vaše dovednosti v iOS webovém vývoji na novou úroveň.

Chceš-li si přečíst další články podobné jako Vzdálené ladění iOS Safari s Chrome DevTools, navštiv kategorii iPhone.