Máte na svém vývojářském počítači (s Windows) zprovozněnou testovací verzi webu a potřebujete ji otestovat na (fyzickém) mobilním zařízení? Stačí správně vše nastavit a můžete testovat.

Námět článku převzat z: http://conceptdev.blogspot.cz/2009/01/monitoring-iphone-web-traffic-with.html

1. Síť

Základním předpokladem je, že se mobilní zařízení (dále jen mobil) a testovací počítač (dále jen počítač) mohou nějak spojit. Buď tím, že jsou na stejné (W)LAN (WiFi), nebo má testovací počítač veřejnou adresu (a mobilní zařízení má přístup na libovolnou WiFi).

1. a) LAN / WLAN

Pokud má počítač i mobil přístup do stejné sítě (používají stejnou WiFi nebo počítač i WiFi jsou připojeny ke stejnému routeru), stačí zjistit lokální IP adresu počítače, například v konzoly (Start > Spustit > „cmd“) příkazem ipconfig, který vypíše něco jako:

Adaptér sítě Ethernet Local Area Connection:

   Adresa IPv4   : 192.168.1.10
   Maska podsítě : 255.255.255.0
   Výchozí brána : 192.168.1.1

Adresa 192.168.1.10 je ta, která vás zajímá. Pokud má počítač více síťových karet (např. LAN, modem, WiFi, BlueTooth, apod.), musíte vybrat tu správnou, pomocí které je dosažitelný z mobilu.

Pokud máte na PC nějaký firewall, budete potřebovat povolit přístup na port 8888.

1. b) veřejná adresa

Pokud má počítač veřejnou adresu (je přímo připojen do internetu – např. pomocí UPC modemu) nebo máte správně nastavený router (přesměrování portů, bridge mode, apod.), stačí zjistit veřejnou IP adresu např. na whatismyipaddress.com.

V případě routeru se ještě přesvědčte, že je port 8888 přesměrován na váš počítač (samozřejmě můžete použít i jiný port, pak bude potřeba všechna následující nastavení příslušně upravit – např. ve firmě může mít každý vývojář samostatný port přesměrovaný na svůj vlastní počítač).

1. c) Windows AP

Pokud máte počítač s WiFi a Windows 10, můžete si vytvořit vlastní WiFi pomocí sdílení připojení. Potřebujete tedy notebook s WiFi nebo PCI(-E) WiFi kartu.

Otevřete Nabídku start, napište „mobil“ a klikněte na „Mobilní hotspot“ (zobrazí se, jen pokud má PC WiFi kartu). Klikněte na Sdílet moje internetové připojení a zvolte ethernetový interface. Klikněte na Upravit a zadejte jméno a heslo sítě.

Takto vytvořená síť bude aktivní jen do restartu PC. Pak ji budete muset znovu ručně zapnout.

Pokud potřebujete trvalejší WiFi (nebo máte starší verzi Windows), můžete vytvořit WiFi přes příkazový řádek. WiFi vytvoříte příkazem:

netsh wlan set hostednetwork mode=allow ssid=mojewifi key=heslo

Následně můžete WiFi spustit nebo zastavit příkazy:

netsh wlan start hostednetwork
netsh wlan stop hostednetwork

Tento příkaz (se start) můžete přidat do CMD souboru do složky Po spuštění, aby se automaticky WiFi zapnula po přihlášení. Složku Po spuštění ve Windows 10 najdete, když v Průzkumníku zadáte adresu shell:startup.

Pro sdílení internetu do WiFi vytvořené přes příkazový řádek musíte jít do Centra síťových připojení (v Ovládacích panelech), kliknout na Změnit nastavení adaptérů a ve vlastnostech ethernetového adaptéru na záložce Sdílení zaškrtnout Umožnit ostatním uživatelům využívat připojení k internetu.

2. Proxy

Druhým krokem je nastavit na svém počítači proxy.

2. a) Fiddler (Windows)

Existuje celá řada možností, ale pro webové vývojáře je nejvhodnější proxy vestavěná v programu Fiddler.

POZOR: Fiddler před lety odkoupila společnost Telerik a nyní nabízí placenou verzi Fiddler Everywhere. Pro jednoduché testování vás stačí stáhnout Fiddler Classis (dříve Fiddler 2), který je zdarma.

Fiddler slouží v monitorování HTTP požadavků prohlížečů či programů v počítači. Dá se ale nastavit i tak, aby přijímal požadavky ostatních počítačů.

Po stažení programu Fiddler (Classic je zdarma), jeho instalaci a spuštění jděte do nastavení (Tools – Fiddler options…) a na záložce Connections zaškrtněte Allow remote computer to connect (povolit vzdálení připojení); případně změňte Fiddler listens on port z 8888 na to, co je potřeba.

Následně program Fiddler ukončete a znovu spusťte, aby mohl zaregistrovat proxy. Přesvědčte se, že v menu File je zaškrtnuto Capture Traffic.

2. b) Squid3 (Ubuntu)

Pro linux můžete použít Proxy aplikaci Squid. Otevřete terminál a zadejte příkaz:

sudo apt-get install squid3

Zadejte heslo správce a počkejte, až se aplikace nainstaluje.

Pak zadejte příkaz:

sudo vi /etc/squid3/squid.conf

Znovu zadejte heslo správce, stiskněte „i“ (Režim pro editaci textu) a na konec souboru zadejte:

http_access allow local_net
acl local_net src 192.168.0.0/255.255.255.0

Pak stiskněte ESC, pak dvojtečku „:“ (zobrazí se příkazový řádek) a napiště „wq“ (Write & Quit). Restartujte počítač a Proxy by měla naběhnout.

Pokud jste udělali chybu při editaci, stiskněte ESC, pak dvojtečku a zadejte „q!“ („Q“ a vykřičník – ukončení bez uložení).

Squid používá port 3128, který budete muset následně použít v konfiguraci mobilních zařízení.

3. Nastavení proxy přístupu

Nyní musíte ve svém mobilním zařízení nastavit Proxy na svůj počítač.

3. a) iPhone a iPad

Na hlavní obrazovce iZařízení spusťte Nastavení a jděte do WiFi. Vyberte síť, ke které je mobil připojen a klikněte na (i) vedle ní. Odskrolujte až dolu, kde je HTTP Proxy možnostmi Vypnuto, Ručně a Auto. Přepněte na Ručně (ve starších verzích iOS je to Manuálně) a zadejte IP adresu svého počítače (Server) a port (ten, který jste zvolili ve Fiddler).

Ověření totožnosti musí zůstat vypnuté!

3. b) iPhone simulator a desktop Safari

Pokud místo fyzického iPhonu nebo iPadu máte jen Mac se simulátorem a potřebujete otestovat web běžící na jiném počítači, můžete použít jednodušší způsob – úpravou hosts souboru na hostitelském Mac počítači. V novějších verzích MacOS může být problém s tím, že Safari soubor hosts ignoruje. Pokud vám nefunguje, podívejte se na druhou možnost s nastavením Proxy.

Stejný postup použít i pro testování desktopového Safari.

3. b) i) nastavení HOSTS na MacOS

Na MacOS spusťte Terminál (obdoba příkazové řádky z Windows; Aplikace – Utility – Terminál) a zadejte příkaz:

sudo nano /private/etc/hosts

Následně musíte zadat heslo správce počítače (protože k souboru hosts má přístup jen správce – je to stejné heslo, jaké zadáváte při instalaci programů). Pak se již otevře editor přímo v Terminálu.

Do souboru přidejte nový řádek s adresou a jménem požadovaného serveru, např.:

# localhost přepište z 127.0.0.1
192.168.1.10    localhost
# přidání dalších webů:
192.168.1.10 www.test.local
192.168.1.10 test1.local test2.local
# apod.

Následně stiskněte CTRL + O (O jako Opera) a stiskněte Enter (tím se změny zapíší zpět do souboru hosts). Stiskněte CTRL + X (X jako firefoX :)), čímž ukončíte editor.

Terminál ukončíte stiskem CTRL + D a pak ⌘Q (CMD + Q).

3. b) ii) Nastavení Proxy na MacOS

V systémové liště (nahoře) klikněte na ikonu jablíčka (vlevo) a zvolte Předvolby systému. Otevřete Síť a klikněte na Pokročilé vpravo dole. Na záložce Proxy zaškrtněte Web Proxy (HTTP) a zadejte IP adresu (Web proxy server) a port (za dvojtečkou). Ověřte, že není zaškrtnuto Proxy server vyžaduje heslo. Nakonec klikněte na Ok.

Pokud potřebujete, aby proxy fungovala i pro HTTPS, zaškrtněte také Proxy zabezpečeného webu (HTTPS) a zadejte stejnou adresu a port.

3. c) Android 4

V Android zařízení jděte do Nastavení WiFi (zpravidla stačí kliknout nebo držet ikonu WiFi v horní liště). Nyní musíte upravit nastaní WiFi sítě, ke které se bude mobil připojovat. To zpravidla provedete tak, že podržíte prst na dané WiFi a zvolíte Upravit konfiguraci sítě.

V konfiguraci zaškrtněte Rozšířené možnosti a pod Proxy zvolte Ručně. Odskrolujte dolu a zadejte IP adresu (Název hostitele) a Port (ten z Fiddler).

Nezaškrtávejte možnost Ověřit server!

V kolonce Vynechat servery můžete uvést adresy, které se nemají přesměrovávat přes váš počítač (např. pokud potřebujete přímý přístup na firemní mail server apod.).

3. d) Android 2

Nastavit proxy jde pouze na poslední verzi, tedy Android 2.3 a funguje pouze pro předinstalovaný prohlížeč (Chromium). U ostatních prohlížečů nebo aplikací je to možné pokud aplikace sama podporuje nastavení proxy (např. Opera to má v nastavení).

Stiskněte tlačítko Home pro návrat na hlavní obrazovku. Pak stiskněte tlačítko Menu a klikněte na Nastavení. Otevřete Bezdrátové připojení a Nastavení WiFi. Zapněte WiFi a až se zobrazí seznam dostupných sítí, stiskněte tlačítko Menu a klikněte na Pokročilé.

Zvolte Proxy WiFi a zaškrtněte Povolit/Zakázat proxy WiFi. Následně do kolonek Hostitel proxy a Port proxy zadejte adresu a port počítače.

4. Připojení

Pokud již máte nastavenu proxy, můžete v mobilu spustit prohlížeč (Safari, Chrome, apod.) a zadat adresu přesně tak, jak byste ji zadali na svém počítači.

Pokud váš testovací web běží na www.test.local, stačí do mobilu zadat http://www.test.local. Pokud váš testovací server běží přímo na localhostu, můžete zadat i http://localhost a správně se zobrazí localhost vašeho počítače.

Jako bonus by se vám ve Fiddler okně měli zobrazovat všechny požadavky, které mobil pošle na váš počítač (zobrazovat by se měli i ty, které posílá mobil do internetu, ale je možné, že je Fiddler nějak filtruje, protože mě se většinou neukazovali nebo se ukazovali jen někdy).