Pro ladění webu v androidím Chromu budete potřebovat nejnovější verzi Chrome (32 nebo novější; nelze debuggovat Chromium – aplikace Internet) jak na Androidu tak i na desktopu (Windows nebo MacOS). Oba prohlížeče by měli být ve stejné verzi – viz poznámka na konci článku.

Ladění USB

Před připojením k PC pomocí USB kabelu musíte v mobilním zařízení zapnout USB Debugging (USB Ladění).

V nastavení Androidu najděte Developer tools (Vývojářské možnost). Obvykle jsou na konci (při zobrazení seznamu) nebo pod Systém (při zobrazení záložek). Pokud je nevidíte, jděte do About (O zařízení) a najděte položku Build Number (Číslo sestavení). Na číslo 7x klikněte – měla by se zobrazit hláška „Vývojářský režim by zapnut“. Pak jděte do Vývojářských možností.

Otevřete je, zapněte je přepínačem nahoře a níže pak najděte USB Debugging (USB Ladění), které také zapněte

Také můžete zapnout Stay awake (Zůstat vzhůru), aby se během ladění zařízení neuspávalo a neodpojovalo se tím od PC.

Připojení

Připojte mobilní zařízení k PC pomocí USB kabelu. Není doporučeno používat USB rozbočovače (huby) a nejlepší je připojit zařízení přímo kabelem k portu na PC.

Spusťte Chrome na Androidu i Desktopu a na Androidu načtěte stránku, kterou chcete debugovat.

Na desktopu otevřete Developer tools (Nástroje pro vývojáře – v menu pod Tools (Nástroje) nebo stiskněte CTRL + SHIFT + i). Zde klikněte na tři tečky vpravo nahoře a pod More tools zvolte Remote devices.

V novějších verzích Chrome také může být potřeba se přihlásit pomocí Google účtu. Klikněte v titulku okna na liště vpravo nahoře na tlačítko přihlášení.

Otevře se stránka Devices, na které byste měli vlevo vidět záložky Remote target (ukázkové simulované zařízení) a Settings (Nastavení). Pod Settings zaškrtněte Discover USB devices (Hledat USB zařízení).

Teď by se teoreticky mělo na stránce Devices zobrazit vaše připojené zařízení. Zpravidla to ale není tak jednoduché a bude potřeba udělat ještě několik kroků (které jste už ale možná udělali v rámci jiného testování).

Android OEM ovladače

Nejprve budete potřebovat OEM ovladače pro své mobilní zařízení. To by měl poskytnout výrobce zařízení nebo můžete zkusit výchozí ovladače od Googlu. Přehled všech výrobců najdete na developer.android.com.

Pokud chcete zkusit výchozí ovladače od Googlu, musíte si stáhnout SDK Platform Tools. Když je rozbalíte, najdete ovladače ve složce sdk/extras/google/usb_driver.

Ovladače na Windows nainstalujte přes Device Manager (Správce souborů). Na Windows 10 stačí otevřít nabídku Start a zadat „device manager“ nebo „správce zařízení“ (podle jazyka). Ve správci rozbalte Remote devices (Přenosná zařízení), klikněte pravým tlačítkem na zařízení, které vypadá jako vaše připojené zařízení (může mít v názvu „android“, „adb“ nebo jméno výrobce či jméno nastavené v zařízení), a zvolte Update drives (Aktualizovat ovladače). Klikněte na Browse my computer (Vyhledat v počítači) a zadejte adresu do složky, kde máte ovladače rozbaleny (např. z SDK balíku).

ADB daemon

Pokud se po instalaci ovladačů nezobrazilo zařízení v Chrome, budete ještě potřebovat zapnout ADB daemon (Android Debugger Bridge – na Windows odpovídá Službě na pozadí). ADB se nachází v SDK Platform Tools ve složce sdk/platform-tools. Samotné ale nejde spustit a tak musíte otevřít příkazový řádek (ve Windows 10 stačí v příslušné složce zvolit Soubor – Otevřít příkazový řádek) a zadat „adb devices“. Příkaz by měl vypsat:

List of devices attached
* daemon not running. starting it now on port x *
* daemon started successfully *
1234abcd      device

Místo 1234abcd by mělo být uvedeno číslo vašeho zařízení. Stejné číslo bude uvedeno v i Chrome pod Devices.

Pokud příkaz vypíše pouze první řádek, ale již nezobrazí žádná zařízení, zkuste nejprve ADB ukončit příkazem:

taskkill /im adb.exe /F

Povolení ladění

Pokud jsou správně nainstalovány OEM ovladače a spuštěno ADB, mělo by se mobilní zařízení objevit jako Unknown v Chrome.

Na mobilním zařízení by se měla objevit žádost o povolení ladění. Pokud se neobjeví (a vy si nejste 100% jisti, že jste ji již povolovali nebo v Chrome pod Devices svítí Pending Authorization), otevřete na zařízení Vývojářské možnost a klikněte na Revoke USB Debugging Authorizations (Odvolat autorizace ladění USB). Pak odpojte a znovu připojte USB kabel.

Žádost o ladění samozřejmě povolte.

Ladění

Teď už by se mělo zařízení objevit v Chrome pod Devices. Když na zařízení kliknete, měl by se zobrazit seznam všech stránek otevřených v Chrome na zařízení. Pomocí pole New tab můžete otevřít novou stránku

Vedle požadované stránky klikněte na Inspect a otevře se Developer Tools okno, kde můžete provádět všechny obvyklé činnosti (zkoumat HTML, krokovat JavaScripty, atd.).

Pomocí tří teček vedle tlačítka Inspect pak můžete stránku obnovit (Reload), přepnout se na ní (Focus) nebo jí zavřít (Close).

Náhled

Pro ještě lepší ladění klikněte na ikonku zařízení (vypadá jako malý obdélníček vlevo v horní liště) a zobrazí se náhled obrazovky, který můžete použít pro ovládání zařízení a nebo pro kontrolu HTML prvků (a nemusíte tak ani koukat na samotné zařízení).

Pokud se vám po kliknutí na Inspect zobrazí jen prázdné okno, zkontrolujte, že máte aktuální verzi Chrome na obou zařízeních (Android i PC).

Localhost

Pokud potřebujete ladit web, který běží na vašem vývojářském počítači, podívejte se na Testování localhostu na mobilních zařízeních.