Sensores: emular sensores do dispositivo

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Use o painel Sensores para emular a entrada de sensores de qualquer dispositivo.

Visão geral

No painel Sensores, é possível fazer o seguinte:

Abra o painel "Sensores".

  1. Dependendo do seu sistema operacional, pressione o seguinte para abrir o menu de comandos:

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

    Usando o menu de comandos para abrir o painel "Sensores".

  2. Digite sensors, selecione Mostrar sensores e pressione Enter. O painel Sensores é aberto 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. Por exemplo, um site de clima pode mostrar a previsão local para a área de um usuário depois que ele concede permissão para o site acessar a localização.

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

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

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

Selecionar "Tóquio" na lista "Geolocalização".

Simular a orientação do dispositivo

Para simular diferentes orientações de dispositivo, abra o painel Sensores e, na lista Orientação, selecione uma das seguintes opções:

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

Selecionar "Retrato de cabeça para baixo" na lista "Orientação".

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

Também é possível definir uma orientação personalizada arrastando o Modelo de orientação. Mantenha pressionada a tecla Shift antes de arrastar para girar ao longo do eixo alfa.

O modelo de orientação.

Toque forçado

Para testar eventos de toque no seu site, force o toque em vez de clicar, mesmo que você esteja testando em um dispositivo sem tela sensível ao toque.

Para acionar eventos de toque com o cursor:

  1. Abra o painel Sensores.
  2. Na lista suspensa Toque, selecione Toque forte. Força o toque em vez de cliques.
  3. Clique em Recarregar DevTools no aviso na parte de cima.

Emular estado de detector inativo

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

Para emular estados inativos:

  1. Abra o painel Sensores.

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

    Conceder a permissão de detecção de inatividade em uma página de demonstração.

  3. No menu suspenso Emular estado do detector de inatividade, 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

Selecionar um estado inativo e bloqueado em uma página de demonstração.

Emular simultaneidade de hardware

Para emular o desempenho do seu site em dispositivos com diferentes números de núcleos de processador, substitua o valor informado pela propriedade navigator.hardwareConcurrency. Alguns aplicativos usam essa propriedade para controlar o grau de paralelismo do aplicativo, por exemplo, para controlar o tamanho do pool Emscripten pthread.

Para emular a simultaneidade de hardware:

  1. Abra o painel Sensores.
  2. Na parte de baixo do painel, encontre e ative Concorrência de hardware.
  3. Na caixa de entrada de números, insira o número de núcleos que você quer emular.

Ativou a "Concorrência de hardware" com o número de núcleos definido como 10.

Para reverter ao valor padrão, clique no botão Redefinir.

Emular pressão da CPU

A pressão da CPU ou de computação é um conjunto de estados informados que dão uma ideia de quanta carga de trabalho a computação do sistema está passando e se ela está perto do limite ou não. Com essas informações, você pode adaptar seu aplicativo em tempo real, como videoconferências ou jogos, para aproveitar toda a capacidade de processamento disponível e manter o sistema responsivo adaptando as cargas de trabalho em tempo real.

O painel Sensores permite emular os estados que podem ser informados pela API Compute Pressure.

Para emular a pressão da CPU no seu site:

  1. Abra o painel Sensores.
  2. Perto da parte de baixo do painel, encontre a seção Pressão da CPU e selecione um dos estados de pressão legíveis por humanos: Nenhuma substituição, Nominal, Justo, Grave ou Crítico.
  3. No aviso na parte de cima do DevTools, clique em Recarregar DevTools.

Emulando pressão da CPU "Grave".