Nielen marketéri a analytici majú čoraz častejšiu potrebu nasadzovať na weby či aplikácie rôzne meracie nástroje. Nasadené kódy ale musíme starostlivo overiť, lebo zďaleka nie vždy fungujú na prvýkrát tak, ako chceme. Býva dobrým zvykom otestovať plnú funkcionalitu aj na mobilných rozhraniach. Ukážeme vám, ako si tento proces pomocou moderných prehliadačov uľahčiť a vylepšiť.
Štandardne takúto implementáciu preverujeme na bežných počítačoch, kde prehliadače umožňujú hĺbkovú kontrolu. K vašej spokojnosti si teda doladíte všetko potrebné na desktope, akú však máte istotu, že tie isté nastavenia spracuje mobilné zariadenie?
Prehliadač na PC, prípadne iná aplikácia, zvláda poľahky emulovať niektoré vlastnosti mobilných zariadení. Sú to však vlastnosti týkajúce sa najmä vzhľadu a vonkajšej funkcionality, napríklad pri bežnom mobilnom webe. Takéto testovanie nezaručuje, že reálny smartfón, prípadne tablet spracuje všetky dáta rovnako. Rozdiely môžu nastať vo verziách softvéru aj vo výkonnosti mobilného hardvéru.
Aktuálne prehliadače preto prinášajú možnosť uľahčenia ladiacich procesov.
Ladenie chýb, alebo debugging webov a webových aplikácií
Súčasné prehliadače poskytujú komplexné a prehľadné nástroje umožňujúce nahliadnuť webom a aplikáciám pod kapotu. Kedysi vývojári toľko šťastia nemali. Prehliadače im poskytovali iba strohé a ťažko šifrovateľné oznamy.
Zmenil to až Firefox spolu s nástrojom Firebug, ktorý umožnil prezeranie chybových hlášok pomocou konzoly, ako aj zásahy do HTML a CSS „za chodu“. Firebug otvoril cestu súčasným ladiacim nástrojom, ktoré sú v prehliadači Chrome známe pod názvom Developer Tools a vo Firefoxe ako Page Inspector.
Tento progres zjednodušil prácu nielen programátorom. Dáta, ktoré poskytuje štruktúra mobilných stránok a aplikácií, vyhodnocujú aj weboví a dátoví analytici, ako aj marketéri či umelá inteligencia.
Vzdialené ladenie na mobilnom zariadení?
Softvér na mobilných zariadeniach zväčša nebýva vybavený takou širokou paletou ladiacich nástrojov, ako v prípade osobných počítačov. Mobilné verzie stránok je, samozrejme, možné emulovať, taktiež je možné zakúpiť si prístup k reálnemu zariadeniu cez cloud.
Avšak lokálne spojenie mobilného zariadenia s PC s cieľom „debuggingu“ má viacero výhod – je rýchle, ekonomicky nenáročné a umožňuje interakciu so zariadením v reálnom čase. Akcie vykonávané na pripojenom zariadení sa obojstranne synchronizujú s ovládaním mobilného prehliadača cez desktopový ladiaci nástroj. Pripojenie funguje pomocou štandardného USB kábla, ako aj cez WiFi.
Veľká časť funkcionality súčasných webov je postavená na javascripte (hoci bezpečnostní experti majú k nemu nejednu výhradu). Mód vzdialeného ladenia cez PC umožňuje zadávanie/exekúciu javascriptových príkazov priamo na pripojené mobilné zariadenie. Taktiež je možné overiť správanie jednotlivých API, korektné ukladanie cookies na externom zariadení, prípadne overovať funkčnú responzívnosť HTML a CSS. To sú príklady, keď emulácia pri testovaní nevie naplno nahradiť reálny tablet či telefón položený vedľa PC.
V prípade Chromu je možné obsah mobilného prehliadača naplno zrkadliť na desktope. Správanie aplikácie sa tak dá v reálnom čase sledovať vo vývojárskom nástroji počítača počas práce s pripojeným mobilom.
Tvorcovia vývojárskych doplnkov pre Chrome/Safari a Firefox sa prispôsobili rýchlemu nástupu mobilných aplikácií a ladenie cez desktopový prehliadač je dnes možné aktivovať pár klikmi. Pri Firefoxe odporúčame verziu 36 a vyššie, predošlé verzie vyžadujú v prípade vzdialeného ladenia o niečo zložitejší postup pomocou Android SDK a presmerovania TCP portov.
Ako na to – nastavenie mobilného zariadenia
Na príklade si ukážeme, ako prepojiť desktopový prehliadač Chrome alebo Firefox s Androidom. Podobný postup je dostupný aj pre kombináciu iOS a Safari, respektíve iOS a Firefox vďaka doplnku Valence od vývojárov Mozilly.
Pri zariadeniach s Androidom vo verzii 4.0 a vyššie je postup nasledujúci:
- V sekcii Nastavenia je dostupná položka Pre vývojárov (Developer options). Pokiaľ túto možnosť v nastaveniach nevidíte, je potrebné ju aktivovať v sekcii O telefóne/O zariadení a následne nájsť číslo buildu. Na to, aby ste sa znenazdajky stali vývojárom, je potrebné na toto číslo 7x poklepať.
- Po zobrazení sekcie Developer options stačí aktivovať možnosť USB debugging a potvrdiť oznamovaciu hlášku.
Postup pre prehliadač Chrome na Androide
Do adresového riadka Chromu napíšte chrome://inspect a uistite sa, že máte povolenú možnosť Discover USB devices. Následne vám telefón oznámi, že sa PC snaží o spojenie, a ponúkne takzvaný Fingerprint s cieľom autentifikácie. Po potvrdení a úspešnom pripojení je externé zariadenie viditeľné pod chrome://inspect/#devices. Toto neplatí pre inkognito mód, kde vzdialené ladenie nie je povolené. Pokiaľ máte v mobile spustený Chrome, mali by ste vidieť jeho otvorené záložky aj na „stolnej“ verzii prehliadača.
Okrem základných ovládacích prvkov (focus tab, reload, close) sa objaví aj možnosť inspect. Klikom na inspect sú k dispozícii všetky vývojárske nástroje dostupné v Chrome, napojené na vaše externé zariadenie.
Postup pre prehliadač Firefox na Androide
Nižšie uvedený návod platí pre desktopové verzie Firefox 36 a vyššie. Pri predošlých verziách je postup o niečo zložitejší.
Firefox má v sebe zabudovaný nástroj WebIDE, ktorý spustíte pomocou Menu > Developer > WebIDE, ako aj pomocou skratky Shift + F8. Po prvom spustení je odkaz na WebIDE viditeľný na štandardnom paneli nástrojov.
Následne stačí pripojiť telefón bežným káblom, funkcia USB debugging musí byť na externom zariadení stále povolená. Len čo spustíte mobilnú verziu Firefoxu, nástroj WebIDE by mal rozoznávať váš telefón a otvorené záložky, podobne ako v prípade Chromu. Vývojárske nástroje sú prístupné cez ikonu vidlicového kľúča v hornom menu WebIDE rozhrania.
Podrobnejší návod na pripojenie nájdete na stránkach Mozilla.org.
Využitie pre marketérov a analytikov
- Implementácia meracích nástrojov.
- V prípade Chromu je možné do ladenia zapojiť doplnky ako WASP, alebo dataslayer.
- Implementácia enhanced ecommerce.
- Shopping feeds a business data pre reklamné systémy.
- Blokovanie skriptov alebo cookies v mobilnom prehliadači.
Ďalšie tipy pre vývojárov
- Mobilné zariadenie ponechajte pripojené cez mobilné pripojenie a pomocou Network panelu sledujte, ktoré časti webu sa načítavajú najdlhšie a ktoré prenesú najviac dát.
- Tento postup umožňuje ladiť stránku aj pre slabšie pripojenie v teréne. Pre vizualizáciu jednotlivých prvkov použite Waterfall náhľad.
- Podobne vieme overovať záťaž na procesor mobilného zariadenia cez Timeline panel.
Ak by ste potrebovali poradiť s ladením, nastavením analytiky, prípadne s tvorbou webu, ozvite sa nám. Aké máte skúsenosti s mobilným ladením vy?