Compartir vía

Emulación de sensores de dispositivo

Use la herramienta Sensores para emular la entrada del sensor de cualquier dispositivo.

La herramienta Sensores

Introducción

La herramienta Sensores le permite hacer lo siguiente:

Para simular una ventanilla de un dispositivo móvil y limitar la red y la CPU, consulte Emulación de 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida esté abierto 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ú Comando

  1. En función del sistema operativo, presione lo siguiente para abrir el menú Comando:

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

    Uso del menú Comando para abrir la herramienta Sensores

  2. Escriba sensores, seleccione Mostrar sensores y 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 podría mostrar la previsión local para el área de un usuario, una vez que el usuario haya concedido al sitio web permiso para acceder a su ubicación. Para acceder a la geolocalización de un usuario desde el sitio web, consulte Geolocation API en MDN.

Si va a compilar una interfaz de usuario que cambia en función de dónde se encuentre el usuario, probablemente quiera asegurarse 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 siguientes opciones:

  • Una de las ciudades preestablecidas, como Tokio.
  • Otros para especificar 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.

Selección de Tokio en la lista Ubicación

Simular la orientación del dispositivo

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

Si va a compilar una interfaz de usuario que cambia en función de la orientación del dispositivo del usuario, debe probar la interfaz de usuario con distintas orientaciones de dispositivo.

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

  • Una de las orientaciones preestablecidas, como Vertical boca abajo:

    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:

    Modelo de orientación

Simulación de eventos táctiles al hacer clic

Para probar eventos táctiles en tu sitio web, incluso si estás probando en un dispositivo sin una 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida esté abierto 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 el menú desplegable Táctil y, a continuación, seleccione Forzar habilitado:

    Forzar el toque en lugar de hacer clic

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

Emular el estado del detector de inactividad

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 los cambios de estado de inactividad para el estado de usuario y el estado de la pantalla en lugar de esperar a que cambie el estado de inactividad real.

Para emular estados inactivos:

  1. Abra 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, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

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

  4. En la barra de herramientas 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 la detección del estado de inactividad .

    Solo la primera vez, se abre 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 del detector de inactividad 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

    En la página de demostración se muestran los estados de usuario y pantalla emulados:

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

Consulta también:

Emular la simultaneidad de hardware

Para emular el rendimiento del sitio web en dispositivos con diferentes números de núcleos de procesador, puede invalidar el valor notificado por la propiedad navigator.hardwareConcurrency . Algunas aplicaciones usan 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida esté abierto 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 selecciónela.

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

    Activado

    Precaución: superar el valor predeterminado puede degradar el rendimiento.

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

Emular la presión de CPU

La presión de CPU o proceso es un conjunto de estados notificados que le dan 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 la aplicación en tiempo real, por ejemplo, videoconferencias o videojuegos, para aprovechar toda la potencia de procesamiento disponible y, al mismo tiempo, mantener la capacidad de respuesta del sistema adaptando las cargas de trabajo en tiempo real.

La herramienta Sensores le permite emular los estados que puede notificar la API de presión de proceso.

Para emular la presión de 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. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

    Se abre DevTools.

  3. Presione Esc una o dos veces para que el panel Vista rápida esté abierto 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 CPU y, a continuación, seleccione uno de los estados de presión legibles por el usuario:

    • Sin invalidación
    • Nominal
    • Justo
    • Serio
    • Crítico

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

    Emulación de la presión de CPU

Consulte también

MDN:

Demos:

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á creada por Kayce Basques y Sofia Emelianova.

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.

  • Last updated on