Chrome – Medio Blog https://blog.medio.cz Tue, 02 Feb 2016 11:38:24 +0000 cs hourly 1 https://wordpress.org/?v=6.8.1 Vzdálené ladění měření na mobilním webu https://blog.medio.cz/vzdalene-ladeni-mereni-na-mobilnim-webu https://blog.medio.cz/vzdalene-ladeni-mereni-na-mobilnim-webu#comments Tue, 02 Feb 2016 10:00:49 +0000 https://blog.medio.cz/?p=3895 Většina webových analytiků se mimo hezké datové analýzy potýká také s implementací nejrůznějších měřicích nástrojů. Obvykle se setkávám s tím, že implementace jako taková se kontroluje pouze na desktopové verzi webu. Na tu mobilní, která už je dnes poměrně důležitá, se tak nějak kašle, „protože to přece musí fungovat“. Obvykle to tak je, ale ne vždy. Když se někoho zeptám, proč to nedělá, odpověď často zní: „A jak to chceš v těch mobilních aplikacích kontrolovat?“ Pojďte se na to tedy podívat.

remote-debug-banner

Jedním z řešení je odchytávání HTTP komunikace, což se hodí zejména u kontroly nativních aplikací. Každopádně tohle řešení je poměrně pracné a vzhledem k podstatě webu i dost zbytečné. Google Chrome má totiž zabudovanou podporu na vzdálené ladění (debugging). Potřebujete v zásadě jen tři kroky:

  1. Nastavit telefon
  2. Připojit k počítači a Chromu
  3. Ladit!
Hned na začátku ještě musím upozornit, že tento postup funguje jen na Androidu 4.0 a vyšších verzích a v prohlížeči Google Chrome. Na konci článku pak odkazuji i na alternativní postupy pro iOS a Safari nebo Firefox.

Nastavení telefonu

V nastavení Androidu potřebujete udělat jedinou věc. Tou je zapnutí funkce Ladění USB (USB debugging). Tuhle položku najdete Nastavení v sekci Pro vývojáře (Developer options).

Pokud tuto položku vůbec nevidíte, máte ji pravděpodobně skrytou. U novějších androidů to tak často bývá. Musíte v nastavení najít něco jako O telefonu/O programu a tam najít číslo buildu, na které musíte 7x poklepat. V každém telefonu a verzi Androidu je to vždy trochu jinak schované, takže případně googlete.

Jakmile se konečně dostanete do nastavení Pro vývojáře, tak jen zaškrtněte checkbox USB debugging a potvrďte vyskakovací okno. Pokud nevíte, co děláte, tak si s ostatním nastavením raději nehrajte.

2

EasterEgg pro fajnšmekry: Tam, kde byla verze buildu je i verze vašeho systému Android. Na tu třikrát rychle a zřetelně poklepejte a sledujte. Každá verze v sobě má logicky něco jiného. Někdy více, jindy méně interaktivní, tak si s tím zkuste trochu pohrát. Napovím jen, že to souvisí s názvem Androidích modelových řad (JellyBean, Kitkat, atd.).

Připojení k PC a Chromu

Připojte telefon k počítači klasickým nabíjecím kabelem jako obvykle. Otevřete Google Chrome a do adresního řádku napište chrome://inspect. Pokud ještě nemáte, tak zaškrtněte Discover USB devices. Následně by vám na telefonu měl vyskočit alert, který potvrďte. Kdyby náhodou alert nevyskočil, zkuste telefon odpojit a připojit znovu. Případně opětovně vypnout a zapnout ladění. Občas se proces chytí ve špatném pořadí a není to poznat. Maximálně na podruhé se mi to ale povedlo vždy.

Po úspěšném připojení se vám v počítači zobrazí seznam otevřených záložek z prohlížeče na telefonu. Mimo cool tlačítek typu focus, close a reload, je tam hlavně to, co nás zajímá nejvíc -> inspect. Klikněte na to a otevřou se vám standardní vývojářské nástroje Chromu napojené na váš mobilní prohlížeč.

chrome-inspect-devices

Závěrem

Jistě se najdou tací, které napadne otázka: „A k čemu to vlastně je? Proč prostě neemulovat zařízení v dektopovém Chromu?“ nebo „Proč to vůbec řešit, když mám responzivní web?“ Odpověď je prostá: „Protože můžete.“ To, že máte responzivní web, neznamená, že se na mobilu třeba nemůžou špatně ukládat cookies. Což je něco, co ani emulací nelze úplně zjistit. Je to prostě další možnost jak být zase o něco přesnější.

Související články a odkazy:

]]> https://blog.medio.cz/vzdalene-ladeni-mereni-na-mobilnim-webu/feed 3