Testování webu na mobilu v lokální síti

Blog - Testování webu na mobilu v lokální síti      

  TIP |  Testovat responzivní weby na smartfounech se dá všelijak. Buďto přímo na konkrétním mobilu nebo za použití některého z mnoha užitečných online nástrojů. Paradoxně, problém všech online nástrojů je právě v tom, že jsou online.   

Než to hodíš na web

To tedy znamená, že aby bylo možné responzivní web testovat, musíš ho nejprve nahrát na net. Ovšem ne vždy se to hodí, je to pomalejší a vůbec, testovat na "ostrém" serveru je hřích!

Pro offline testování se dá velice dobře použít emulátor v Google Chrome (Developer Tools). Jenže reál je reál a přesto že Chrome emulátor je výborný pomocník, je to stále "jen" emulátor. Popravdě, držet v ruce mobil a jezdit po něm prstem působí jinak, než ovládat myškou (jinak velice užitečný) Device Mode v Chrome Developer Tools (stiskni F12 a pak klikni na ikonku mobilu vlevo nahoře vedle lupy). Pojďme si ukázat, jak tedy testovat mobilní web z ruky přímo na lokále.

Jde se na localhost

Definujme si cíl: Chceš dosáhnout toho, že si v mobilu otevřeš prohlížeč, naťukáš adresu testovaného webu na tvém lokálním serveru (v mém případě Synology NAS, na kterém mi jede Apache) a ono to celé začne krásně fungovat.

http://muj-lokalni-server/responzivni-web

Bohužel se ti s největší pravděpodobností zobrazí tohle: "Tato webová stránka není dostupná, protože se nezdařilo vyhledání DNS. Bla bla bla..." nebo něco podobného, pokud máš jiný systém, než Android.

Zakopaný pes

Z výše uvedené chybové hlášky vyplývá, že mobil neumí zpracovat doménové jméno (převést ho na IP adresu). Bylo by tedy vhodné ho to naučit. To se dá řešit několika způsoby:

  1. Vepsat přepisovací pravidlo do souboru hosts (10.0.0.3 muj-lokalni-server)
  2. Nainstalovat aplikaci, která na mobilu zařídí kompletní DNS správu
  3. Kouzlit s proxy serverem
  4. Čarovat s routerem
  5. Místo doménového jména používat v adresách přímo IP adresu

Varianta první, tedy soubor hosts, by byla ze všech nejlepší, pokud by ovšem nevyžadovala root systému. Jestli ti to nevadí, tak máš vyhráno a nemusíš už číst dále. Návodů, jak rootovat a následně editovat soubor hosts je na internetu hafo.

Řešení pomocí doinstalování DNS aplikace vypadá taky velice slibně. Najdeš si ji na Google Play, stáhneš, spustíš, nastavíš co je třeba a pak zjistíš, že to je jen 7denní verze a po týdnu si ji musíš zaplatit. Hm, nic moc. Nemám pocit, že bych kvůli takové trivialitě měl vytahovat peněženku z kapsy.   

Proxy server údajně slouží jako náhražka za chybějící DNS management v mobilu. Pochopil jsem to tak, že v mobilu si nastavím u wifi připojení to, že chci všechny requesty tahat přes proxy server, kterýžto bude schopný rozkódovat i lokální doménové jméno. U mě se toto řešení bohužel nesetkalo s úspěchem. Těžko říct, co jsem dělal špatně. 

Do routeru se mi moc hrabat nechtělo a z těch návodů na internetu jsem taky nebyl dvakrát moudrý. Tam to docela smrdí, protože když si úplně rozhasíš nastavení wifi připojení, tak jsi v ... no však víš. Je možné, že zkušený síťař by to dal levou zadní, ale to já nejsem.

Stará dobrá ajpína

Ukázalo se, že nejlepší poměr "cena/výkon" se pro mě skrývá ve variantě číslo 5. Dal jsem na osvědčenou lidovou moudrost, která praví, že "IP adresa funguje vždycky". A fakt že jo! Někdy, holt, se člověk musí přes všechny supermoderní vymoženosti vrátit takříkajíc ke kořenům. Není to nic nového, žádnou ameriku jsem neobjevil, ale funguje to. Takže do prohlížeče na mobilu místo názvu lokálního web serveru píšu jeho lokální (vnitřní) IP takto:

http://10.0.0.3/responzivni-web

Pokud je můj projekt (i CMS) správně a chytře navržen, používají se pro odkazy a zdroje (obrázky, CSS, JS, fonty atd.) výhradně relativní URL (příp. moderním způsobem skrze CDN) a já se nemusím o nic starat. Vše bude fungovat jak má, protože když je něco relativní, tak to není absolutní, že. Kdyby to bylo absolutní, znamenalo by to pro tebe docela dost práce navíc (dle rozsahu webu a počtu odkazů). No a pak ještě přenastavit CMS, aby všechny odkazy generoval relativně.

 

Matláma, patláma

Dobrá věc se podařila a ty můžeš vesle testovat svoje těžce vytuněné media queries přímo na dlani. Teda jako na placce, ajfounu, droidu, mobilu nebo jak tomu říkáš.

Jestli víš o lepším řešení, tak sem s ním, pls.        

Podobné články

Komentáře

  |  Zapoj se do diskuze