Ahoj, vypadá to, že používáte AdBlock... :-)

Usilovně jsme pracovali na zakomponování reklamy, aby nebyla pro čtenáře rušivá. Příjmy z reklam tento web živí, bez nich bychom jej nemohli provozovat. Budeme moc rádi, když to s námi zkusíte a přidáte si nás do výjimek. Děkujeme!

MENU

Browserstack.com, na ladění webů nepotřebujete kamión plný smartphonů

Po každém webovém vývojáři se předpokládá, že stránky perfektně odladí pro všechna současná zařízení, ideálně i pro ty budoucí. Jenže jak testovat weby na různých zařízeních a systémech, aniž byste vyloupili banku nebo museli jezdit do práce kamiónem?

Stačí vám k tomu internetový prohlížeč

Ladění responzivity a pixel perfect designu rozhodně není jen o změně rozlišení, jak se nám snaží některé „vývojářské“ režimy v desktopových prohlížečích mylně podsunout. Chce to fyzický hardware, jenže na tom se zase špatně debuguje… Představa, že si otevřu Inspektora HTML prvků na malém displeji smartphonu je dost děsivá. Naštěstí, je tady řešení…

Snímek obrazovky 2017-01-21 v 18.10.51

Osobně jsem se doslova zamiloval do webové služby BrowserStack.com, která umožňuje ladit webové stránky a aplikace na fyzických zařízeních. Její jediná nevýhoda je cena, plány jsou opravdu dost „mastné“. Připočteme-li to ještě k těm ostatním měsíčním pracovním nákladům, jako je pronájem kreativních nástrojů od Adobe, email pod vlastní doménou u Google (G Suite), Tidal, kancelář, … Brzy zjistíte, že pokud to bude tímto tempem pokračovat, nezbyde vám brzy ani na jídlo.

Zpátky k BrowserStacku. Na výběr máte ze všech nejrozšířenějších operačních systémů, kromě Linuxu. Ten ale není tak podstatný, hlavní účel je totiž stejně testování funkčnosti zejména na mobilních zařízeních s osekanými funkcemi a omezeným datovým připojením.

Snímek obrazovky 2017-01-21 v 18.09.28

 

Skutečně luxusní je debugování na fyzickém zařízení, přitom ale se všemi nástroji Chromáckého Inspectora. Takže kromě toho, že se na web podíváte, jak skutečně vypadá, můžete do jeho chování i zasáhnout a potvrdit si tak své domněnky. BrowserStack umožňuje testovat i lokálně, stačí si k tomu doinstalovat doplněk.

Snímek obrazovky 2017-01-21 v 20.09.10

 

Fajn funkce je i zobrazení podrobností o právě používaném zařízení. Detail obsahuje rozlišení, viewport, velikost displeje, poměr stran, popularitu a datum vydání.

Snímek obrazovky 2017-01-21 v 20.13.56

 

Široká je i nabídka prohlížečů, u mobilních iZařízení vždy Safari a Chrome. Na desktopových Windows 10 můžete otestovat nový Edge, IE 10, Chrome, Firefox, Operu, Yandex nebo Safari. Dále se můžete vrátit v čase až do dob Windows XP. Nabídka OS X (Mac OS) zase sahá až do doby Snow Leoparda.

Snímek obrazovky 2017-01-21 v 20.11.28

Generování náhledů z různých zařízení

Stejně jako samotné testování, byl vždycky hrozný „pain“ i generování náhledových obrázků z vícero zařízení. BrowserStack to udělá za vás. Vygenerovat si můžete až z 1000 různých kombinací prohlížeče, zařízení a systému.

Má to své mouchy

Ani BrowserStack není bezchybný, občas někde něco blbne nebo se chová jinak, než byste čekali. To je ale u tak komplikovaného systému asi docela normální. Důležité je, že ušetří spoustu času a vlastně i spoustu peněz, které byste jinak museli investovat do fyzického hardwaru.

Nejhorší na tom všem pro nás vývojáře je, že to zatím vůbec nevypadá na žádné sjednocování technologií nebo přístupu k nim. V CSS máme milión prefixů, syntaxí, v JavaScriptu zase jeden prohlížeč nepodporuje to co ten druhý. Je to začarovaný kruh, ale stále nepřestávám doufat, že „bude líp“.

Written by:

Published on: 21.1.2017

Filled Under: vychytávky, Vývoj webu

,