Jak ladit webové stránky v Chrome pro Android na počítači

Jako správce blogu ladím svůj osobní web pomocí Chromu, abych viděl, jak by změny v motivu a CSS vypadaly, než je trvale implementuji na server. Nebylo to tak dávno, kdy jsem nikdy neplatil

pozornost na mobilní stránky

protože jen málo návštěvníků navštívilo můj web pomocí chytrého telefonu. Dnes ale značné procento návštěvníků tvoří chytré telefony a tablety, a proto je potřeba se o vzhled a prezentaci starat i tam.

Pokud by se jednalo o stránku v počítači, mohla by se snadno odladit pomocí možnosti z kontextové nabídky prohlížeče Chrome pravým tlačítkem, ale u stránek na mobilu to není možnost. Dnes vám tedy ukážu, jak můžete ladit mobilní webové stránky v počítači pomocí Chrome pro Android a Android SDK.

Ladění webové stránky

Krok 1: Stáhněte a nainstalujte Android SDK na vašem počítači a spusťte jej. Instalační program vás požádá o stažení Javy, pokud ji nemáte nainstalovanou.

Při prvním spuštění Android SDK na vašem počítači budete požádáni o stažení několika API a nástrojů. Pokud je vaším jediným účelem instalace Android SDK ladění stránek, zrušte zaškrtnutí všeho kromě

Nástroje platformy Android SDK a klikněte na Nainstalujte balíček knoflík.

Krok 2: Po instalaci nástrojů platformy Android otevřete pole Spustit (Windows+R) a běžet %userprofile%\AppData\Local\Android\android-sdk\platform-tools otevřete adresář nástrojů platformy Android.

Krok 3: Nyní podržte klávesu Ctrl+Shift a kliknutím pravým tlačítkem myši do složky otevřete příkazový řádek. Můžete také otevřít příkazový řádek pomocí pole Spustit a přejít do složky ručně.

Krok 4: Poté otevřete Chrome na telefonu Android, otevřete Nastavení—>Nástroje pro vývojáře a zaškrtněte volbu Povolit ladění webu USB.

Krok 5: Nyní na příkazovém řádku spusťte příkaz adb forward tcp: 9222 localabstract: chrome_devtools_remote a po úspěšném spuštění otevřete prohlížeč Chrome v systému Windows.

Krok 6: Otevřete stránku, kterou chcete ladit, v prohlížeči Android Chrome a otevřete adresu URL localhost: 9222 v prohlížeči Chrome v počítači.

To je vše, všechny stránky, které jsou otevřené ve vašem prohlížeči Android, uvidíte jako miniatury na vašem počítači. Chcete-li otevřít stránku ladění, jednoduše klikněte na miniaturu příslušné webové stránky. Změny ladění, které provedete na svém počítači, budete moci sledovat přímo na Androidu v reálném čase.

Závěr

Jsem si jistý, že tento trik pomůže mnoha webovým vývojářům optimalizovat jejich webové stránky pro chytré telefony. Použil jsem tento trik ke konfiguraci svých webových stránek a fungovalo to jako kouzlo. Pokud však znáte lepší způsob, jak ladit webové stránky smartphonu na počítači, podělte se o něj s námi.

Poslední aktualizace 3. února 2022

Výše uvedený článek může obsahovat přidružené odkazy, které pomáhají podporovat Guiding Tech. Nemá to však vliv na naši redakční integritu. Obsah zůstává nezaujatý a autentický.