Na hora de construir um site ou aplicativo web, temos sempre a tarefa de verificar se tudo funciona corretamente em um dispositivo móvel ou mesmo em um Tablet. Se estamos a trabalhar em desenvolvimento não temos como verificar, pois primeiro teríamos que enviar as nossas alterações para o servidor e aí consultá-las no nosso dispositivo móvel.
Mas não devemos nos preocupar, pois o Google Chrome tem uma funcionalidade que nos permite, com algumas etapas simples, verificar como nosso site ou aplicativo funciona no dispositivo móvel que desejamos.
1. Emular dispositivo móvel no Google Chrome
Como dizemos, o Google Chrome incorpora uma ferramenta orientada para o desenvolvedor com a qual podemos acessar as opções excluídas rapidamente. Um deles é o emulador de dispositivo móvel no modo de dispositivo.
Passo 1
Teremos um menu na parte inferior que será exibido, que nos mostra o código HTML da página. Para mostrar o painel do desenvolvedor Chrome, iremos para "Menu / Mais ferramentas / Ferramentas do desenvolvedor" ou faremos a seguinte combinação de teclas:
No Windows e Linux
Ctrl + Shift + M
No Mac
⇧ + ⌘ + M
Passo 2
Veremos que um painel de código se abre. Olhamos para o ícone que corresponde ao "Modo de dispositivo" e que será ativado quando aparecer em azul. Clique nele para ativá-lo.
etapa 3
Enquanto isso, vamos para o menu superior acima da página emulada e selecionamos o dispositivo que queremos emular, neste caso, selecionamos Apple iPhone x e atualizamos para que as alterações tenham efeito. Temos uma grande variedade de predefinições configuradas para que em um clique tenhamos nosso modelo simulado.
Passo 4
Se quisermos criar medidas personalizadas iremos até onde aparece o modelo do terminal e clicaremos em "Editar".
Etapa 5
Irão aparecer os modelos que antes eram configuradores ou podemos adicionar um de forma personalizada clicando em "Adicionar dispositivo personalizado".
Etapa 6
Nas opções dentro do Modo Dispositivo teremos a possibilidade de ativar ou não os sensores que simulam uma tela sensível ao toque.
ObservaçãoClique no ícone de três pontos para exibir, entre outras, a opção de "Sensores"
2. Emular conectividade de rede móvel no Google Chrome
O estado da rede e seus testes graças ao Chrome nos permite testar nosso site através de diferentes tipos de conexões de rede como 3G e até mesmo sem conexão.
Passo 1
Também podemos emular a rede em que estamos. Para fazer isso, vamos até a guia "Rede" e selecionamos um tipo de rede na lista recolhível.
Passo 2
Se tivermos estabelecido um limite, veremos um aviso de aviso para nos lembrar que o ativamos.
3. Adicionar limites à conectividade de rede móvel no Google Chrome
Passo 1
Esse limite é importante e podemos definir limites personalizados com condições configuradas por nós mesmos. Para fazer isso, pressionamos a seguinte tecla para abrir o painel de configurações.
F1
Passo 2
Clique na opção "Throttling". Selecionamos a possibilidade de "Adicionar perfil personalizado".
etapa 3
Aqui, definiremos as configurações de limites de uma forma personalizada.
4. Abra o painel de condições de rede no Google Chrome
Temos mais opções no painel do desenvolvedor nas DevTools.
Passo 1
Para isso, vamos ao menu de três pontos do lado direito e clicamos em “Mais ferramentas” / “Condições de rede”.
Passo 2
A partir daqui, podemos ativar ou desativar o cache e alterar o agente padrão para um personalizado.
Com esta funcionalidade não teremos mais que procurar nosso celular para testar se nosso site ou aplicativo funciona corretamente, resta a todos explorar um pouco mais esta ferramenta e usá-la para encurtar os tempos de teste e implementação.
