Jak na to – vzdálené ladění webu na iPadu pomocí MIHTool

Odladíte web pro Firefox, Internet Explorer i WebKit (Chrome a Safari) a poté si jej otevřete na iPadu. Nebo uděláte responsivní web, odladíte jej s povedeným doplňkem Window Resizer v Chrome a potřebujete pořešit iOS (o Androidu schválně mlčím...).

Máte-li počítač od Apple s OS X, je ladění webů na iOS zařízení hodně jednoduché. Jsou v zásadě dvě možnosti. Otevřete si Safari, iPad připojíte USB kabelem k počítači, v Safari na iOS načtete web a v Safari na desktopu zavoláte nabídku Develop.

Nabídne se vám tam zařízení a možnost zobrazení vývojářských nástrojů, tak jak je znáte z klasického Safari. Rozdíl je v tom, že při označování jednotlivých prvků v DOM struktuře nebo použití Console pro JavaScript se vše aplikuje na připojeném zařízení.

Úplně stejně lze ladit, pokud si spustíte iOS Simulator, který je součástí vývojářského balíku Xcode.

Kde je tedy problém? Odmyslíme-li si nepohodlí spojené s tím, že simulátor zabere kus monitoru a iPad či iPhone musíte připojit kablíkem, pak je tu především problém s Windows. Safari ve Windows neumí propojení pro ladění webů s iPadem.

Jak pracovat s MIHTool a ladit weby v iOS bezdrátově

Nedávno jsem dostal tip na zajímavou aplikaci MIHTool – Web Debugger Pro. S její pomocí jste schopni zrealizovat to, co jsem uvedl výše, ale nezávisle na tom, jaký počítač a s jakým operačním systémem používáte. A samozřejmě bezdrátově, stačí připojení na stejnou Wi-Fi. Koukněme se, jak na to:

1. Na iPadu si otevřete MIHTool. Na první pohled vypadá jako běžný webový prohlížeč. Načtěte do něj stránku, kterou chcete ladit.
2. Nyní klikněte na modré tlačítko se třemi pruhy v pravém horním rohu programu. Najdete zde několik položek s různými vývojářskými funkcemi použitelnými přímo v iPadu, ale také dvě položky v sekci Remote Control – HTTP Server a Online Web Inspector. Obě klepnutím zapněte.
   
3. Nastává část práce na desktopu. Budete potřebovat webový prohlížeč s vykreslovacím jádrem WebKit, tedy Safari nebo Chrome. Do adresního řádku zadejte adresu, kterou vidíte na iPadu pod položkou HTTP Server, tedy například http://192.168.0.102:1630.
4. Uvidíte sadu adres určených k ovládání toho, co máte právě zobrazeno v iPadu pomocí MIHTool. Klepněte na odkaz hned v první položce Web Inspector Remote (Recommend). Objeví se vám panel připomínající klasickou sadu vývojových nástrojů ze Safari.
   
5. Přepněte se na položku Elements. Zkuste označovat jednotlivé prvky v DOM struktuře stránky. Sledujte přitom obrazovku iPadu. Vidíte, jak se označují ty prvky, nad kterými v DOM struktuře v počítači přejíždíte myší? Stejně tak můžete začít měnit CSS v bočním panelu s vlastnostmi vybraného prvku – změna se hned projeví na obrazovce iPadu. S nástrojem zkrátka pracujete stejně, jako byste ladili web na desktopu, jen výsledek úprav sledujete na mobilním zařízení.
   
6. Co se týče adresy u zapnuté položky Online Web Inspector v MIHTool. Není povinné jej zapínat, ale pokud tak učiníte, můžete začít s laděním webu i bez připojení přes lokální síť. Stačí do prohlížeče na desktopu zadat adresu, kterou si opíšete z iPadu. To se velmi hodí v případech, kdy se s iPadem z nějakého důvodu nechcete připojit na stejnou síť, na jaké je počítač, ale máte možnost využít například mobilní připojení v iPadu.

MIHTool je povedený nástroj

Program MIHTool považuji za jednu z nejužitečnějších pomůcek, jakou jsem v poslední době do iPadu nainstaloval. Nejsem tak při ladění webů pro iPad závislý jen na Macbooku. Navíc MIHTool nabízí další pomůcky.

Když si otevřete stránku pro ladění ve společné síti, máte tam k dispozici odkazy pro vložení JavaScriptu do stránky na iPadu, pro práci s cache a historií, pro ovládání přehrávače, nebo třeba pro zobrazení zdrojového kódu či screenshotu z iPadu. Sledovat lze i výkonnostní charakteristiky stránky.

Program MIHTool si samozřejmě nainstalujete z AppStore. Program se určitě za necelých 14 eur vyplatí, já jej stihl v akci, kdy byl výjimečně zadarmo. Bez poplatku je i nějaká omezenější verze, její limity jsem ale nezkoumal.