Compartilhar via


Emular sensores de dispositivo

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

A ferramenta Sensores

Visão geral

A ferramenta Sensores permite-lhe fazer o seguinte:

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

Abrir a ferramenta Sensores

  1. Abra uma página Web, como a página de demonstração da aplicação TODO , numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Prima Esc uma ou duas vezes para que o painel Vista Rápida esteja aberto na parte inferior de DevTools.

  4. No painel Vista Rápida , clique no botão Mais ferramentas e, em seguida, selecione Sensores.

    A ferramenta Sensores é aberta no painel Vista Rápida na parte inferior das DevTools.

Abra a ferramenta Sensores com o Menu de Comandos

  1. Dependendo do seu sistema operativo, prima o seguinte para abrir o Menu de Comandos:

    • No Windows, Linux ou ChromeOS, Controlo+Shift+P.
    • No MacOS, Comando+Shift+P.

    Utilizar o Menu de Comandos para abrir a ferramenta Sensores

  2. Escreva sensores, selecione Mostrar Sensores e, em seguida, prima Enter.

    A ferramenta Sensores é aberta na Vista Rápida na parte inferior do DevTools.

Substituir geolocalização

Muitos sites tiram partido da localização do utilizador para proporcionar uma experiência mais relevante aos seus utilizadores. Por exemplo, um site de meteorologia pode mostrar a previsão local para a área de um utilizador, assim que o utilizador tiver concedido permissão ao site para aceder à respetiva localização. Para aceder à geolocalização de um utilizador a partir do seu site, veja API de Geolocalização, na MDN.

Se estiver a criar uma IU que muda consoante a localização do utilizador, é provável que queira certificar-se de que o site se comporta corretamente em diferentes locais do mundo.

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

  • Uma das cidades predefinidas, como Tóquio.
  • Outro para introduzir coordenadas de longitude e latitude personalizadas.
  • Selecione Localização indisponível para ver o comportamento do site quando a localização do utilizador não está disponível.

Selecionar Tóquio na lista Localização

Simular a orientação do dispositivo

Os dispositivos móveis têm sensores que podem detetar a orientação física. Sites como jogos baseados na Web ou aplicações de mapeamento podem utilizar a orientação do dispositivo para proporcionar uma melhor experiência. Para saber mais sobre como detetar a orientação do dispositivo, veja Eventos de orientação do dispositivo, no MDN.

Se estiver a criar uma IU que é alterada consoante a orientação do dispositivo do utilizador, tem de testar a IU em orientações diferentes do dispositivo.

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

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

    Selecionar

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

    Depois de selecionar Orientação personalizada, os campos alfa, beta e gama são ativados. Para compreender como estes eixos funcionam, consulte:

    Depois de selecionar Orientação personalizada, também pode definir uma orientação personalizada ao arrastar o Modelo de Orientação. Mantenha premida a tecla Shift antes de arrastar, para rodar ao longo do eixo alfa:

    O Modelo de Orientação

Simular eventos táteis ao clicar

Para testar eventos táteis no seu site, mesmo que esteja a testar num dispositivo sem ecrã tátil:

  1. Abra uma página Web, como a página de demonstração da aplicação TODO , numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Prima Esc uma ou duas vezes para que o painel Vista Rápida esteja aberto na parte inferior de DevTools.

  4. No painel Vista Rápida , clique no botão Mais ferramentas e, em seguida, selecione Sensores.

    A ferramenta Sensores é aberta no painel Vista Rápida na parte inferior das DevTools.

  5. Na ferramenta Sensores , desloque-se para baixo até ao menu pendente Toque e, em seguida, selecione Forçar ativado:

    Forçar o toque em vez de clicar

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

Emular o estado do detetor inativo

A API de Deteção inativa permite-lhe detetar utilizadores inativos e reagir em alterações de estado inativo. Com as DevTools, pode emular alterações de estado inativo para o estado do utilizador e o estado do ecrã em vez de aguardar que o estado inativo real seja alterado.

Para emular estados inativos:

  1. Abra uma página Web, como a Demonstração de deteção de inatividade, numa nova janela ou separador.

  2. Clique com o botão direito do rato na página e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Prima Esc uma ou duas vezes para que a Vista Rápida seja aberta na parte inferior de DevTools.

  4. Na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas e, em seguida, selecione Sensores.

    A ferramenta Sensores é aberta no painel Vista Rápida .

  5. Na página de demonstração, clique no botão Iniciar deteção de estado inativo .

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

  6. Clique no botão Permitir .

    É concedida a permissão de deteção de inatividade à página de demonstração.

  7. Em DevTools, na ferramenta Sensores , desloque-se para baixo até ao menu pendente Emular estado do Detetor Inativo e, em seguida, selecione uma opção:

    • Sem emulação inativa
    • Utilizador ativo, ecrã desbloqueado
    • Utilizador ativo, ecrã bloqueado
    • Utilizador inativo, ecrã desbloqueado
    • Utilizador inativo, ecrã bloqueado

    A página de demonstração apresenta os estados de utilizador e ecrã emulados:

    Selecionar um estado inativo e bloqueado numa página de demonstração

Consulte também:

Emular simultaneidade de hardware

Para emular o desempenho do seu site em dispositivos com diferentes números de núcleos de processador, pode substituir o valor comunicado pela propriedade navigator.hardwareConcurrency . Algumas aplicações utilizam esta propriedade para controlar o grau de paralelismo da respetiva aplicação, por exemplo, para controlar o tamanho do conjunto Emscripten pthread .

Para emular a simultaneidade do hardware:

  1. Abra uma página Web, como a página de demonstração da aplicação TODO , numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Prima Esc uma ou duas vezes para que o painel Vista Rápida esteja aberto na parte inferior de DevTools.

  4. No painel Vista Rápida , clique no botão Mais ferramentas e, em seguida, selecione Sensores.

    A ferramenta Sensores é aberta no painel Vista Rápida na parte inferior das DevTools.

  5. Na ferramenta Sensores , desloque-se para baixo até à caixa de verificação Simultaneidade do hardware e, em seguida, selecione-a.

  6. Na caixa de entrada de número, introduza o número de núcleos que pretende emular:

    Ativado

    Atenção: exceder o valor predefinido pode degradar o desempenho.

Para reverter para o valor predefinido, clique no botão Repor (ícone Repor).

Emular pressão da CPU

A pressão da CPU ou da computação é um conjunto de estados comunicados que lhe dão uma ideia da quantidade de carga de trabalho em que a computação do sistema está a ser submetida e se está perto do limite. Estas informações permitem-lhe adaptar a sua aplicação em tempo real, por exemplo, videoconferências ou videojogos, para tirar partido de todo o poder de processamento disponível, mantendo o sistema reativo ao adaptar as cargas de trabalho em tempo real.

A ferramenta Sensores permite-lhe emular os estados que podem ser comunicados pela API de Pressão de Computação.

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

  1. Abra uma página Web, como a página de demonstração da aplicação TODO , numa nova janela ou separador.

  2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

    O DevTools é aberto.

  3. Prima Esc uma ou duas vezes para que o painel Vista Rápida esteja aberto na parte inferior de DevTools.

  4. No painel Vista Rápida , clique no botão Mais ferramentas e, em seguida, selecione Sensores.

    A ferramenta Sensores é aberta no painel Vista Rápida na parte inferior das DevTools.

  5. Na ferramenta Sensores , desloque-se para baixo até à secção de pressão da CPU e, em seguida, selecione um dos estados de pressão legíveis por humanos:

    • Sem substituição
    • Nominal
    • Justo
    • Grave
    • Crítico
  6. Na parte superior de DevTools, clique no botão Recarregar DevTools :

    Emulação da pressão

Consulte também

MDN:

Demonstrações:

Web.dev:

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 é da autoria de Kayce Bascos e Sofia Emelianova.

Licença Creative Commons Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.