Menu

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.

Firefox Page Inspector na mobilnom prehliadači, ovládaný z PC

Firefox Page Inspector na mobilnom prehliadači, ovládaný z PC

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.

Komunikácia s prehliadačom dnes (vľavo) a kedysi (vpravo)

Komunikácia s prehliadačom dnes (vľavo) a kedysi (vpravo)

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.

Zrkadlenie mobilného prehliadača na desktopovom zariadení v reálnom čase

Zrkadlenie mobilného prehliadača na PC v reálnom čase

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.
Na Android zariadení zvoľte Nastavenia (Settings) > Pre vývojárov (Developer options)

Na Android zariadení zvoľte Nastavenia (Settings) > Pre vývojárov (Developer options).

V Nastaveniach pre vývojárov zvoľte funkciu Ladenia USB (USB debugging)

V Nastaveniach pre vývojárov zvoľte funkciu Ladenia USB (USB debugging).

Na systémoch bežiacich na Androide 4.2 and neskorších, sú nastavenie pre vývojárov od výroby skryté. Pre zobrazenie tejto položky, postupujte cez Nastavenia > O telefóne/O zariadení a 7 krát poklepte na Build number, ktoré označuje verziu Vášho systému.

Na systémoch bežiacich na Androide 4.2 a neskorších, sú nastavenie pre vývojárov od výroby skryté. Pre zobrazenie tejto položky, postupujte cez Nastavenia > O telefóne/O zariadení a 7-krát poklepte na Build number, ktoré označuje verziu vášho systému.

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.

Pripojenie mobilného zariadenia k PC pomocou Chrome

Pripojenie mobilného zariadenia k PC pomocou Chromu

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.

Screenshot from 2016-03-28 11:53:20

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.
Využitie nástroja WASP na pripojenom mobile

Využitie nástroja WASP na pripojenom mobile

Využitie nástroja dataslayer na pripojenom mobile

Využitie nástroja dataslayer na pripojenom mobile

 

 

 

 

 

 

Príklad využitia vzdialenej konzoly a zobrazenia prvkov dataLayeru na mobilnom webe

Príklad využitia vzdialenej konzoly a zobrazenia prvkov dataLayeru na mobilnom webe

Ď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?

Páčil sa Vám článok?

Nenechajte si újsť raz mesačne naše najdôležitejšie novinky!
  • Toto pole je pre validačné účely a mal by zostať nezmenený.