Rozšíření Chrome pro mobily jako první pro emulaci obrazovky chytrých telefonů a notebooků

Jak používat režim emulace mobilního zařízení v prohlížeči Chrome

Testování webových stránek je stále složitější. Doby, kdy se ověřování funkčnosti provádělo v několika prohlížečích, jsou dávno pryč.

Vaše mistrovské dílo musí být důkladně otestováno na řadě tabletů, mobilních a stolních zařízení s různými operačními systémy, rozlišením obrazovky a možnostmi. V nejhorších případech může proces testování trvat stejně dlouho jako samotný vývoj.

Proces dále komplikují dotykové obrazovky a displeje s vysokou hustotou. Pokud píšete kód na běžném počítači s myší a klávesnicí, je těžké posoudit, jak bude vaše mistrovské dílo fungovat.

Funkce, jako je přejetí myší, nemusí nutně fungovat a vaše aplikace nemusí fungovat správně. Jak ale můžete otestovat systém bez přepínání mezi více zařízeními?

Naštěstí Chrome 32 přidal nový režim emulace mobilního zařízení. To vám pomůže identifikovat počáteční problémy s vývojem, aniž byste opustili komfortní zónu vašeho počítače.

Chcete-li začít, potřebujete Chrome verze 32 nebo novější. Spusťte Chrome, přejděte na webovou stránku, kterou chcete otestovat, a otevřete Nástroje pro vývojáře (Menu > Nástroje > Nástroje pro vývojáře, Cmd+Opt+I na Macu nebo F12 / Ctrl+Shift+I na Windows a Linux).

Aktualizováno: 2021-04-30 21:20:06 Vadim Dvornikov autor materiálu

Klikněte na ikonu Nastavení v pravém horním rohu a otevřete sekci Přepsání, abyste povolili zobrazení ‚Emulace‘ v zásuvce konzoly:

K ovládání telefonu přes počítač můžete použít programy pro vzdálený přístup nebo synchronizaci.

Zavřete Nastavení a otevřete zásuvku konzoly (není to stejné jako běžná konzole) kliknutím na její ikonu (vlevo od zubaté ikony Nastavení) nebo stisknutím ESC.

V zásuvce konzoly se zobrazí karta Emulace – pokud tam není, zkuste Chrome restartovat:

Sekce Zařízení nabízí několik desítek předvoleb pro běžná mobilní zařízení včetně iPhone, iPad, Kindle, tabletů Nexus, smartphonů Samsung Galaxy atd. Výběr jednoho ze zařízení určí odpovídající výchozí hodnoty na panelech nastavení.

Poznámka: Výše ​​uvedené pokyny k povolení režimu emulace platí pro Chrome verze 32. Pokud používáte novější verzi Chrome Canary, můžete tuto možnost najít v části Nastavení > karta Obecné > Vzhled.

Použití emulátoru v prohlížeči umožňuje spouštět aplikace a hry, aniž by bylo nutné je instalovat do počítače.

Shield

Možnost „Obrazovka“ umožňuje nastavit:

• rozlišení zařízení;
• poměr pixelů, například 2 pro displeje Apple Retina, kde skutečné rozlišení je dvojnásobek rozlišení výřezu;
• faktor změny velikosti písma.

User Agent

V části User Agent můžete podvrhnout řetězec uživatelského agenta, aby klient a kód backendu reagovaly odpovídajícím způsobem:

Čichání řetězců uživatelských agentů za účelem načítání různých mobilních webových stránek je zastaralá technika. Je obtížné ho používat, vyžaduje hodně úsilí a byl (většinou) nahrazen technikami responzivního webdesignu.

Pokud máte čas, chuť, trpělivost a rozpočet na vytváření samostatných stránek pro každé zařízení, můžete vytvářet i aplikace pro konkrétní platformu!

Senzory

Možnost „Sensors“ umožňuje emulovat hardware zařízení, včetně dotykové obrazovky, geolokace a akcelerometru:

Online emulátor prohlížeče umožňuje testovat webové stránky v různých prostředích a zařízeních bez nutnosti fyzického přístupu.

Rozlišení emulace dotykové obrazovky přepne kurzor myši na kratší stín o velikosti konečku prstu:

Vícedotykové události, jako je sevření, lze simulovat podržením tlačítka Shift a tažením myší.

Dotykový režim spouští odpovídající události JavaScriptu, jako je touchstart , touchmove a touchend .

Mobilní prohlížeče se také snaží zajistit kompatibilitu spouštěním událostí myši, jako je mouseover , ale to se stane pouze při kliknutí na prvek. Emulátor správně ignoruje událost mouseover při najetí dotykovým kurzorem.

Návrat do režimu prohlížeče

Chcete-li dokončit emulaci zařízení, přejděte zpět do části „Zařízení“ a klikněte na tlačítko „Resetovat“.

Nepotřebuji žádné zařízení!

Emulátor v Chromu je užitečný, ale nenahrazuje interakci s vaším webem nebo aplikací na skutečném zařízení s dotykovou obrazovkou, abyste si to naplno užili.

Také byste měli vědět, že emulátor není dokonalý:

• dochází k bizarním chybám;
• Stavy CSS jako :hover se používají dodnes;
• Nejedná se o skutečnou emulaci, stránka se vykresluje pomocí Chromu bez ohledu na to, zda skutečné zařízení podporuje všechny funkce, které používáte.

Doufejme, že vývojový tým Chrome tyto problémy v budoucích verzích vyřeší.

Pokud však jde o rychlé a nečisté mobilní testování, režim emulace Chrome je mnohem jednodušší než přechod na skutečný smartphone nebo tablet. Navíc vám budou k dispozici všechny vývojové nástroje. To může ušetřit čas a námahu.

Rozšíření Mobile First Chrome pro emulaci obrazovky chytrých telefonů a notebooků

Webové stránky, blogy, sociální platformy a další webové zdroje se na obrazovkách různých počítačů a mobilních zařízení zobrazují různě. A často mají různé funkce, obvykle omezené v mobilních verzích webových zdrojů. Nástroje pro simulaci obrazovek různých zařízení jsou pro webové vývojáře nesmírně důležité; tyto nástroje umožňují zajistit funkčnost webových zdrojů na každém typu počítače nebo mobilního zařízení s ohledem na velikosti a vlastnosti jejich obrazovek.

Nástroje pro simulaci obrazovek různých zařízení mohou být také užitečné pro specialisty jiných profilů, zejména pro tvůrce obsahu. Moderní desktopové prohlížeče mezi své funkce pro vývojáře zahrnují schopnost zobrazovat stránky na emulovaných mobilních zařízeních, ale to jsou spíše primitivní schopnosti. Zajímavější příležitosti v tomto ohledu může nabídnout Rozšíření pro Chrome mobile First na ploše Prohlížeče Chromium. Podívejme se, co může mobile First.

Emulace prvního mobilního zařízení

mobile First – je Rozšíření pro Chrome, který lze implementovat do libovolného desktopového prohlížeče založeného na Chróm pokud podporuje instalaci rozšíření z obchodu chróm. A toto rozšíření nám nabízí zobrazení stránek na obrazovkách různých zařízení – notebooků, tabletů, chytrých telefonů a dokonce i chytrých hodinek. Rozšíření má poměrně velkou škálu emulovaných zařízení, i když jen část tohoto sortimentu nám bude k dispozici zdarma.

Rozšíření si můžete nainstalovat na jeho oficiálních stránkách (https://www.webmobilefirst.com) zasláním na prodejnu chrómnebo přímo z obchodu Chrome Store:

Po instalaci rozšíření přejděte na web, který chceme zobrazit na emulovaném zařízení, a klikněte na tlačítko mobile First.

Prostředí rozšíření se ve výchozím nastavení spustí a zobrazí web na emulovaném zařízení. Můžeme to změnit kliknutím na tlačítko pro výběr zařízení na postranním panelu funkcí prostředí rozšíření.

Spektrum emulovaných zařízení představují smartphony Android и iPhone .

Existuje několik tablet – iPad z jablko , Galaxy Tab z Samsung , Duo povrch z Microsoft . A existují zařízení jako: notebooky Macbook, TV Samsung Smart TV, servisní kiosek, pár chytrých hodinek. Zařízení, na kterých se značka objevuje „Pro“ – to jsou ty, které nejsou dostupné zdarma, jsou dostupné v rámci užívání mobile First placeným předplatným.

Vybereme požadované zařízení a stránka se převede do formátu tohoto zařízení – s pohledem na samotné zařízení a pohledem prohlížeče s webem na tomto zařízení. Stránky tedy budou například vypadat jako v okně prohlížeče Safari na iPad.

A tak v prohlížeči chróm na Android-přístroj Duo povrch.

Uvnitř emulovaných zařízení můžeme procházet stránkami webu, ale funkce prohlížečů těchto zařízení nám nejsou dostupné, tyto funkce jsou jen figuríny. mobile First umožňuje otáčení obrazovky, klikněte na tlačítko ve tvaru kruhové šipky na bočním panelu prostředí rozšíření. Je možné změnit téma prostředí expanze – denní a noční režim.

Nastavení Mobile First

V nastavení prostředí rozšíření můžeme zcela změnit barvu pozadí prostředí na libovolnou barvu. Také v nastavení máme následující možnosti:

• Skrytí zařízení (tj. po skrytí rámečku zařízení se zobrazí pouze obrazovka) ;
• Skrytí horní a dolní části prohlížečů zařízení;
• Použití počítačového kurzoru namísto dotykové emulace;
• Zakázat dotykovou klávesnici zařízení.

A samozřejmě můžeme zaznamenat vše, co se zobrazí na obrazovce emulovaných zařízení – pořídit snímek obrazovky nebo nahrát screencast (video z emulované obrazovky) . Pro tyto účely slouží na postranním panelu prostředí rozšíření dvě tlačítka – v podobě kamery pro snímky obrazovky a v podobě kamery pro video. Snímek obrazovky lze pořídit pomocí mobilního rámu, tzn. s displejem emulovaného zařízení nebo bez mobilního rámečku, tzn. se zobrazenou pouze samotnou obrazovkou. A můžete si udělat snímek obrazovky celé webové stránky. Pořízené snímky obrazovky se ukládají do souboru PNG .

Screencast obsahuje mobilní rám, do kterého se ukládají videa Gif .

Chcete-li ukončit režim emulace, můžete buď kliknout na tlačítko s křížkem v horní části prostředí rozšíření, nebo na tlačítko samotného rozšíření mobile First v panelu prohlížeče. Nebo můžete kartu webu jednoduše zavřít.

Zde je vhodné rozšíření mobile First. Lze jej použít k ladění zobrazení stránek, k vytváření prezentací, screencastů nebo manuálů, k pořizování snímků stránek s responzivním vzhledem. A tohle je jedno z nejlepších Rozšíření pro Chrome, která nabízí přesně tuto funkci.