Při vytváření webu nebo webové aplikace máme vždy za úkol zkontrolovat, zda vše funguje správně na mobilním zařízení nebo dokonce tabletu. Pokud pracujeme ve vývoji, nemáme možnost to zkontrolovat, protože bychom nejprve museli odeslat naše změny na server a tam to konzultovat na našem mobilním zařízení.
Neměli bychom si však dělat starosti, protože Google Chrome má funkci, která nám umožňuje pomocí několika jednoduchých kroků ověřit, jak náš web nebo aplikace funguje na požadovaném mobilním zařízení.
1. Emulujte mobilní zařízení v prohlížeči Google Chrome
Jak říkáme, Google Chrome obsahuje nástroj orientovaný na vývojáře, se kterým můžeme na první pohled přistupovat k vyloučeným možnostem. Jedním z nich je emulátor mobilního zařízení v režimu zařízení.
Krok 1
Ve spodní části budeme mít nabídku, která se zobrazí, která nám ukazuje HTML kód stránky. Chcete -li zobrazit panel pro vývojáře Chrome, přejděte na „Nabídka / Další nástroje / Nástroje pro vývojáře“ nebo uděláme následující kombinaci klíčů:
Ve Windows a Linuxu
Ctrl + Shift + M
Na Macu
⇧ + ⌘ + M
Krok 2
Uvidíme, že se otevře panel kódu. Podíváme se na ikonu, která odpovídá „Režimu zařízení“ a která se aktivuje, když se zobrazí modře. Kliknutím na něj ji aktivujete.
Krok 3
Zatímco tam jdeme do horní nabídky nad emulovanou stránkou a vybereme zařízení, které chceme emulovat, v tomto případě vybereme Apple iPhone x a obnovíme, aby se změny projevily. Máme širokou škálu předvoleb nakonfigurovaných tak, že jediným kliknutím máme náš simulovaný model.
Krok 4
Pokud chceme vytvořit vlastní měření, přejdeme tam, kde se objeví model terminálu, a klikneme na „Upravit“.
Krok 5
Zobrazí se ty modely, které byly dříve konfigurátorem, nebo je můžeme přidat individuálně kliknutím na „Přidat vlastní zařízení“.
Krok 6
V možnostech v režimu zařízení budeme mít možnost aktivovat nebo neaktivovat senzory, které simulují dotykovou obrazovku.
PoznámkaKliknutím na ikonu tří teček se zobrazí mimo jiné možnost „Senzory“
2. Napodobujte připojení k mobilní síti v prohlížeči Google Chrome
Stav sítě a její testování díky prohlížeči Chrome nám umožňuje testovat naše webové stránky prostřednictvím různých typů síťových připojení, jako je 3G, a dokonce i bez připojení.
Krok 1
Můžeme také napodobit síť, ve které se nacházíme. Chcete -li to provést, přejděte na kartu „Síť“ a v rozbalovacím seznamu vyberte typ sítě.
Krok 2
Pokud jsme stanovili limit, zobrazí se varovné upozornění, které nám připomene, že jej máme povolený.
3. Přidejte limity pro připojení k mobilní síti v prohlížeči Google Chrome
Krok 1
Tento limit je důležitý a můžeme si nastavit vlastní limity s podmínkami nakonfigurovanými sami. Chcete -li to provést, stisknutím následující klávesy otevřete panel Nastavení.
F1
Krok 2
Klikněte na možnost „Omezení“. Vybíráme možnost „Přidat vlastní profil“.
Krok 3
Zde nastavíme nastavení limitů vlastním způsobem.
4. Otevřete panel podmínek sítě v prohlížeči Google Chrome
Na panelu pro vývojáře v DevTools máme více možností.
Krok 1
Chcete-li to provést, přejděte do tříbodové nabídky na pravé straně a klikněte na „Další nástroje“ / „Síťové podmínky“.
Krok 2
Odtud můžeme povolit nebo zakázat mezipaměť a změnit výchozího agenta na vlastního.
Díky této funkci již nebudeme muset hledat náš mobil, abychom otestovali, zda náš web nebo aplikace funguje správně, zbývá jen každému, aby tento nástroj prozkoumal trochu více a použil ho ke zkrácení doby testování a implementace.
