Emular sensores do dispositivo

Use a ferramenta Sensores para emular a entrada do sensor de qualquer dispositivo.

A ferramenta Sensores

Visão geral

A ferramenta Sensores permite fazer o seguinte:

Para simular um visor de um dispositivo móvel e limitar a rede e a CPU, consulte Emular dispositivos móveis (Emulação de dispositivo).

Abra a ferramenta Sensores

  1. Abra uma página da Web, como a página de demonstração do aplicativo TODO , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Pressione Esc uma ou duas vezes para que o painel Visualização Rápida seja aberto na parte inferior do DevTools.

  4. No painel Visualização rápida , clique no botão Mais ferramentas e selecione Sensores.

    A ferramenta Sensores é aberta no painel Visualização Rápida na parte inferior do DevTools.

Abra a ferramenta Sensores usando o Menu de Comando

  1. Dependendo do sistema operacional, pressione o seguinte para abrir o Menu de Comando:

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

    Usando o Menu de Comando para abrir a ferramenta Sensores

  2. Digite sensores, selecione Mostrar Sensores e pressione Enter.

    A ferramenta Sensores é aberta em Exibição Rápida na parte inferior do DevTools.

Substituir geolocalização

Muitos sites aproveitam a localização do usuário para fornecer uma experiência mais relevante para seus usuários. Por exemplo, um site de previsão do tempo pode mostrar a previsão local para a área de um usuário, uma vez que o usuário tenha concedido ao site permissão para acessar sua localização. Para acessar a geolocalização de um usuário a partir do seu site, consulte API de geolocalização, no MDN.

Se você estiver criando uma interface do usuário que muda dependendo de onde o usuário está localizado, provavelmente deseja garantir que o site se comporte corretamente em diferentes lugares ao redor do mundo.

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

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

Selecionando Tóquio na lista Localização

Simular a orientação do dispositivo

Os dispositivos móveis possuem sensores que podem detectar sua orientação física. Sites como jogos baseados na Web ou aplicativos de mapeamento podem usar a orientação do dispositivo para fornecer uma experiência melhor. Para saber mais sobre como detectar a orientação do dispositivo, consulte Eventos de orientação do dispositivo, no MDN.

Se você estiver criando uma interface do usuário que muda dependendo da orientação do dispositivo do usuário, precisará testar sua interface do usuário em diferentes orientações de dispositivo.

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

  • Uma das orientações predefinidas, como Retrato de cabeça para baixo:

    Selecionando 'Retrato de cabeça para baixo' na lista 'Orientação'

  • Orientação personalizada, para fornecer sua própria orientação exata.

    Depois de selecionar a orientação personalizada, os campos alfa, beta e gama são habilitados. Para entender como funcionam esses eixos, veja:

    Depois de selecionar a Orientação personalizada, você também pode 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

Simular eventos de toque ao clicar

Para testar eventos de toque em seu site, mesmo se você estiver testando em um dispositivo sem tela sensível ao toque:

  1. Abra uma página da Web, como a página de demonstração do aplicativo TODO , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Pressione Esc uma ou duas vezes para que o painel Visualização Rápida seja aberto na parte inferior do DevTools.

  4. No painel Visualização rápida , clique no botão Mais ferramentas e selecione Sensores.

    A ferramenta Sensores é aberta no painel Visualização Rápida na parte inferior do DevTools.

  5. Na ferramenta Sensores , role para baixo até o menu suspenso Toque e selecione Forçar habilitado:

    Forçar o toque em vez de clicar

  6. Clique no botão Recarregar DevTools na parte superior do DevTools.

Emular estado do detector ocioso

A API de detecção de ociosidade permite detectar usuários inativos e reagir a alterações de estado ocioso. Com o DevTools, você pode emular alterações de estado ocioso para o estado do usuário e o estado da tela, em vez de esperar que o estado ocioso real mude.

Para emular estados ociosos:

  1. Abra uma página da Web, como a demonstração de detecção de ociosidade, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página e selecione Inspecionar.

    O DevTools é aberto.

  3. Pressione Esc uma ou duas vezes para que a Visualização Rápida seja aberta na parte inferior do DevTools.

  4. Na barra de ferramentas Visualização rápida , clique no botão Mais ferramentas e selecione Sensores.

    A ferramenta Sensores é aberta no painel Visualização Rápida .

  5. Na página de demonstração, clique no botão Iniciar a detecção de estado ocioso .

    Somente na primeira vez, uma caixa de diálogo Permitir é aberta.

  6. Clique no botão Permitir .

    A página de demonstração recebe a permissão de detecção de ociosidade.

  7. No DevTools, na ferramenta Sensores , role para baixo até a lista suspensa de estado Emular Detector Ocioso e selecione uma opção:

    • Sem emulação ociosa
    • Usuário ativo, tela desbloqueada
    • Usuário ativo, tela bloqueada
    • Usuário ocioso, tela desbloqueada
    • Usuário ocioso, tela bloqueada

    A página de demonstração exibe o usuário emulado e os estados da tela:

    Selecionando um estado ocioso e bloqueado em uma página de demonstração

Consulte também:

Simular simultaneidade de hardware

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

Para emular a simultaneidade de hardware:

  1. Abra uma página da Web, como a página de demonstração do aplicativo TODO , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Pressione Esc uma ou duas vezes para que o painel Visualização Rápida seja aberto na parte inferior do DevTools.

  4. No painel Visualização rápida , clique no botão Mais ferramentas e selecione Sensores.

    A ferramenta Sensores é aberta no painel Visualização Rápida na parte inferior do DevTools.

  5. Na ferramenta Sensores , role para baixo até a caixa de seleção Simultaneidade de hardware e selecione-a.

  6. Na caixa de entrada número, insira o número de núcleos que você deseja emular:

    Ativada a

    Cuidado: exceder o valor padrão pode degradar o desempenho.

Para reverter para o valor padrão, clique no botão Redefinir (ícone Redefinir).

Emular pressão da CPU

A pressão de CPU ou computação é um conjunto de estados relatados que dão uma ideia de quanta carga de trabalho a computação do sistema está passando e se está perto do limite. Essas informações permitem que você adapte seu aplicativo em tempo real, por exemplo, videoconferência ou videogame, para aproveitar todo o poder de processamento disponível, mantendo o sistema responsivo, adaptando as cargas de trabalho em tempo real.

A ferramenta Sensores permite emular os estados que podem ser relatados pela API de pressão de computação.

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

  1. Abra uma página da Web, como a página de demonstração do aplicativo TODO , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Pressione Esc uma ou duas vezes para que o painel Visualização Rápida seja aberto na parte inferior do DevTools.

  4. No painel Visualização rápida , clique no botão Mais ferramentas e selecione Sensores.

    A ferramenta Sensores é aberta no painel Visualização Rápida na parte inferior do DevTools.

  5. Na ferramenta Sensores , role para baixo até a seção Pressão da CPU e selecione um dos estados de pressão legíveis:

    • Sem substituição
    • Nominal
    • Razoável
    • Sério
    • Crítico

  6. Na parte superior do DevTools, clique no botão Recarregar DevTools :

    Emulando a pressão

Consulte também

MDN:

Demonstrações:

Emscripten:

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques e Sofia Emelianova.

Licença Creative Commons Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.

  • Last updated on