Sensores: emular sensores do dispositivo

Kayce Basques

Sofia Emelianova

Use a guia Sensores para emular a entrada do sensor de qualquer dispositivo:

• Substituir a geolocalização.
• Simular orientação.
• Forçar toque.
• Emular o estado do detector inativo.

Abrir a guia "Sensores"

1. Dependendo do seu sistema operacional, pressione a opção a seguir para abrir o Menu de comandos:

   • No MacOS, pressione Command + Shift + P
   • No Windows, Linux ou ChromeOS, pressione Control + Shift + P

   

2. Digite sensors, selecione Mostrar sensores e pressione Enter. A guia Sensors é aberta na parte de baixo da janela do DevTools.

Substituir geolocalização

Muitos sites aproveitam a localização do usuário para oferecer uma experiência mais relevante aos usuários. Por exemplo, um site meteorológico pode mostrar a previsão local para a área de um usuário depois que essa pessoa conceder permissão ao site para acessar a localização dele.

Se você estiver criando uma interface que muda dependendo da localização do usuário, é recomendável garantir que o site se comporte corretamente em diferentes lugares do mundo.

Para substituir sua geolocalização, abra a guia Sensores e, na lista Geolocalização, selecione uma das seguintes opções:

• Uma das cidades predefinidas, como Tóquio.
• Local personalizado para inserir coordenadas personalizadas de longitude e latitude.
• Selecione Local indisponível para ver como seu site se comporta quando a localização do usuário não está disponível.

Simular orientação do dispositivo

Para simular diferentes orientações do dispositivo, abra a guia Sensores e, na lista Orientation, selecione uma das seguintes opções:

• Uma das orientações predefinidas, como Retrato de cabeça para baixo.
• Orientação personalizada para oferecer sua própria orientação exata.

Depois de selecionar Orientação personalizada, os campos alpha, beta e gamma serão ativados. Consulte Alfa, Beta e Gama para entender como esses eixos funcionam.

Você também pode definir uma orientação personalizada arrastando o Modelo de orientação. Mantenha Shift pressionado antes de arrastar para girar ao longo do eixo alfa.

Forçar toque

Para testar eventos de toque no seu site, é possível forçar o toque em vez de clicar, mesmo que você esteja testando em um dispositivo sem touchscreen.

Para acionar eventos de toque com o ponteiro:

1. Abra a guia Sensores.
2. Na lista suspensa Toque, selecione Forçar toque.
3. Clique em Reload DevTools no prompt na parte superior.

Emular o estado do detector inativo

A API Idle Detection permite detectar usuários inativos e reagir a mudanças no estado de inatividade. Com o DevTools, você pode emular mudanças de estado inativo para o estado do usuário e da tela, em vez de esperar que o estado ocioso real mude.

Para emular estados inativos:

1. Abra a guia Sensores. Para este tutorial, você pode testá-lo nesta página de demonstração.

2. Marque a caixa de seleção ao lado de Temporário e, no prompt, conceda a permissão de detecção de inatividade à página de demonstração. Em seguida, atualize a página.

   

3. No menu suspenso Emular estado do detector inativo, selecione uma das seguintes opções:

   • Nenhuma emulação inativa
   • Usuário ativo, tela desbloqueada
   • Usuário ativo, tela bloqueada
   • Usuário inativo, tela desbloqueada
   • Usuário inativo, tela bloqueada

Neste exemplo, o DevTools emula o estado Usuário inativo, tela bloqueada e, nesse caso, a página de demonstração inicia a contagem regressiva de 10 segundos para limpar a tela.