„Tajemství“ DevTools pro vývojáře mobilních webů

Adil Alijev

Sledovat

29. listopadu, 2018 – 3 minuty čtení

Speciální příspěvek pro hosty od člena týmu Samsung Internet Engineering Group, Adila!

Vývojové nástroje poskytované prohlížeči jsou stálým společníkem mnoha webových vývojářů. Pomocí nich můžeme kontrolovat svůj kód, upozorňovat na chyby a provádět různé audity. DevTools v prohlížeči Chrome vám také mohou poskytnout možnost přizpůsobit velikost zobrazení mobilnímu zařízení. Tuto funkci mnozí vývojáři často využívají. Jedním z užitečných bodů této funkce je, že si můžete vybrat mezi populárními mobilními zařízeními a DevTools upraví velikost obrazovky tak, aby přesně odpovídala danému zařízení. Takto můžeme testovat a ladit webové stránky s velikostí mobilního zařízení.

Chrome DevTools v režimu mobilního zařízení

Chrome DevTools neslouží pouze ke kontrole prvků DOM a atributů CSS. Můžeme jej použít i pro zkoumání síťových požadavků a parametrů souvisejících s přístupem k úložišti. Kromě toho lze přímo spouštět kód JavaScriptu a zobrazovat zprávy z konzoly. Není to úžasné?“

Nyní předpokládejme, že máte v ruce mobilní telefon a dochází ke specifickým problémům, zejména na tomto zařízení, a nejste schopni problém reprodukovat pomocí nástrojů DevTools a výše znázorněné metody. Nebo si představte situaci, kdy váš mobilní prohlížeč má specifické rozhraní API a vy je chcete odladit. V takovém případě potřebujete nástroje DevTools v mobilním telefonu.

Co si možná neuvědomujete, je, že nástroje DevTools pro stolní počítače můžete použít k ladění prohlížečů založených na technologii Blink (například Samsung Internet) také v zařízeních se systémem Android.

Chcete-li tak učinit, nejprve v zařízení se systémem Android povolte funkci „Ladění USB“ a připojte jej k počítači.

Teď ta vzrušující část. Přistupte na adresu URL „chrome://inspect“ a poté klikněte na „Devices“. Hurá! Zobrazí se seznam aktivních relací prohlížeče z mobilního zařízení.

Klikněte na „Inspect“ a zobrazí se zobrazení prohlížeče v počítači. Nyní můžete provádět libovolné manipulace pomocí nástroje DevTools.

K seznamu mobilních zařízení můžete přistupovat také pomocí funkce Vzdálená zařízení z nabídky DevTools.

Snad se vám bude líbit používat tuto techniku, která vám usnadní ladění na mobilním zařízení!