Emular sensores de dispositivo

Usa la herramienta Sensores para emular la entrada de sensores de cualquier dispositivo.

La herramienta Sensores

Introducción

La herramienta Sensores le permite hacer lo siguiente:

Para simular una ventana gráfica de un dispositivo móvil y limitar la red y la CPU, consulte Emular dispositivos móviles (emulación de dispositivo).

Abrir la herramienta Sensores

  1. Abra una página web, como la página de demostración de la aplicación TODO , en una nueva ventana o pestaña.

  2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida se abra en la parte inferior de DevTools.

  4. En el panel Vista rápida , haga clic en el botón Más herramientas y, a continuación, seleccione Sensores.

    La herramienta Sensores se abre en el panel Vista rápida en la parte inferior de DevTools.

Abra la herramienta Sensores mediante el menú de comandos

  1. Según el sistema operativo, presione lo siguiente para abrir el menú de comandos:

    • En Windows, Linux o ChromeOS, Control+Mayús+P.
    • En MacOS, comando+Mayús+P.

    Uso del menú de comandos para abrir la herramienta Sensores

  2. Escriba sensores, seleccione Mostrar sensores y, a continuación, presione Entrar.

    La herramienta Sensores se abre en Vista rápida en la parte inferior de DevTools.

Reemplazar geolocalización

Muchos sitios web aprovechan la ubicación del usuario para proporcionar una experiencia más relevante para sus usuarios. Por ejemplo, un sitio web meteorológico puede mostrar la previsión local para el área de un usuario, una vez que el usuario ha concedido permiso al sitio web para acceder a su ubicación. Para acceder a la geolocalización de un usuario desde tu sitio web, consulta API de geolocalización, en MDN.

Si estás creando una interfaz de usuario que cambia en función de dónde se encuentre el usuario, probablemente quieras asegurarte de que el sitio se comporta correctamente en diferentes lugares del mundo.

Para invalidar la geolocalización, abra la herramienta Sensores y, en la lista Ubicación , seleccione una de las opciones siguientes:

  • Una de las ciudades preestablecidas, como Tokio.
  • Otros para especificar las coordenadas de longitud y latitud personalizadas.
  • Seleccione Ubicación no disponible para ver cómo se comporta el sitio cuando la ubicación del usuario no está disponible.

Seleccionar Tokio en la lista de ubicaciones

Simular la orientación del dispositivo

Los dispositivos móviles tienen sensores que pueden detectar su orientación física. Los sitios web, como los juegos basados en la web o las aplicaciones de mapas, pueden aprovechar la orientación del dispositivo para proporcionar una mejor experiencia. Para obtener información sobre cómo detectar la orientación del dispositivo, consulta Eventos de orientación del dispositivo, en MDN.

Si estás creando una interfaz de usuario que cambia en función de la orientación del dispositivo del usuario, debes probar la interfaz de usuario en diferentes orientaciones de dispositivo.

Para simular diferentes orientaciones de dispositivos, abra la herramienta Sensores y, a continuación, en la lista Orientación , seleccione una de las opciones siguientes:

  • Una de las orientaciones preestablecidas, como Retrato al revés:

    Selección de

  • Orientación personalizada, para proporcionar su propia orientación exacta.

    Después de seleccionar Orientación personalizada, se habilitan los campos alfa, beta y gamma . Para comprender cómo funcionan estos ejes, consulte:

    Después de seleccionar Orientación personalizada, también puede establecer una orientación personalizada arrastrando el modelo de orientación. Mantenga presionada la tecla Mayús antes de arrastrar para girar a lo largo del eje alfa:

    El modelo de orientación

Simular eventos táctiles al hacer clic

Para probar eventos táctiles en tu sitio web, incluso si lo haces en un dispositivo sin pantalla táctil:

  1. Abra una página web, como la página de demostración de la aplicación TODO , en una nueva ventana o pestaña.

  2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida se abra en la parte inferior de DevTools.

  4. En el panel Vista rápida , haga clic en el botón Más herramientas y, a continuación, seleccione Sensores.

    La herramienta Sensores se abre en el panel Vista rápida en la parte inferior de DevTools.

  5. En la herramienta Sensores , desplázate hacia abajo hasta el menú desplegable Función táctil y, a continuación, selecciona Habilitar fuerza:

    Forzar el toque en lugar del clic

  6. Haga clic en el botón Volver a cargar DevTools en la parte superior de DevTools.

Emular el estado de detección inactivo

La API de detección de inactividad le permite detectar usuarios inactivos y reaccionar ante los cambios de estado de inactividad. Con DevTools, puede emular cambios de estado inactivo tanto para el estado de usuario como para el estado de pantalla en lugar de esperar a que cambie el estado de inactividad real.

Para emular estados inactivos:

  1. Abre una página web, como la demostración de detección de inactividad, en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en la página y seleccione Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que se abra la Vista rápida en la parte inferior de DevTools.

  4. En la barra de herramientas de Vista rápida , haga clic en el botón Más herramientas y, a continuación, seleccione Sensores.

    La herramienta Sensores se abre en el panel Vista rápida .

  5. En la página de demostración, haga clic en el botón Iniciar detección de estado inactivo .

    Solo la primera vez, se abrirá un cuadro de diálogo Permitir .

  6. Haga clic en el botón permitir .

    A la página de demostración se le concede el permiso de detección de inactividad.

  7. En DevTools, en la herramienta Sensores , desplácese hacia abajo hasta la lista desplegable Emular estado de detección inactiva y, a continuación, seleccione una opción:

    • Sin emulación inactiva
    • Usuario activo, pantalla desbloqueada
    • Usuario activo, pantalla bloqueada
    • Usuario inactivo, pantalla desbloqueada
    • Usuario inactivo, pantalla bloqueada

    La página de demostración muestra los estados de usuario y pantalla emulados:

    Seleccionar un estado inactivo y bloqueado en una página de demostración

Consulta también:

Emular simultaneidad de hardware

Para emular el rendimiento de tu sitio web en dispositivos con diferentes números de núcleos de procesador, puedes reemplazar el valor notificado por la propiedad navigator.hardwareConcurrency . Algunas aplicaciones utilizan esta propiedad para controlar el grado de paralelismo de su aplicación, por ejemplo, para controlar el tamaño del grupo de Emscripten pthread .

Para emular la simultaneidad de hardware:

  1. Abra una página web, como la página de demostración de la aplicación TODO , en una nueva ventana o pestaña.

  2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida se abra en la parte inferior de DevTools.

  4. En el panel Vista rápida , haga clic en el botón Más herramientas y, a continuación, seleccione Sensores.

    La herramienta Sensores se abre en el panel Vista rápida en la parte inferior de DevTools.

  5. En la herramienta Sensores , desplácese hacia abajo hasta la casilla Simultaneidad de hardware y, a continuación, selecciónela.

  6. En el cuadro de entrada de número, escriba el número de núcleos que desea emular:

    Se ha activado

    Precaución: Si se excede el valor predeterminado, se puede degradar el rendimiento.

Para volver al valor predeterminado, haga clic en el botón Restablecer (icono Restablecer).

Emular la presión de la CPU

La presión de CPU o proceso es un conjunto de estados notificados que proporcionan una idea de cuánta carga de trabajo está experimentando el proceso del sistema y si está cerca del límite. Esta información le permite adaptar su aplicación en tiempo real, por ejemplo, videoconferencia o videojuego, para aprovechar toda la potencia de procesamiento disponible mientras mantiene el sistema receptivo adaptando las cargas de trabajo en tiempo real.

La herramienta Sensores permite emular los estados notificados por la API Presión de proceso.

Para emular la presión de la CPU en su sitio web:

  1. Abra una página web, como la página de demostración de la aplicación TODO , en una nueva ventana o pestaña.

  2. Haz clic con el botón derecho en la página web y, a continuación, selecciona Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida se abra en la parte inferior de DevTools.

  4. En el panel Vista rápida , haga clic en el botón Más herramientas y, a continuación, seleccione Sensores.

    La herramienta Sensores se abre en el panel Vista rápida en la parte inferior de DevTools.

  5. En la herramienta Sensores , desplácese hacia abajo hasta la sección Presión de la CPU y, a continuación, seleccione uno de los estados de presión legibles por humanos:

    • Sin invalidación
    • Nominal
    • Justo
    • En serio,
    • Crítico

  6. En la parte superior de DevTools, haga clic en el botón Volver a cargar DevTools :

    Emulación de presión de CPU

Consulte también

MDN:

Demostraciones:

Emscripten:

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está escrita por Kayce Basques y Sofia Emelianova.

Licencia de Creative Commons Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.

  • Se actualizó por última vez el