DevTools simula red lenta y CPU débil para probar

Contenido del curso

Introducción

Elementos y Estilos

Mobile Simulation

JavaScript

Network

Performance

18
Optimización de animaciones con Performance DevTools
12:54 min

Audits

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:53

DevTools simula red lenta y CPU débil para probar

Curso de Debugging con Chrome DevTools

Clase 12 de 22

Clase 12 / 22

Recursos

Probar un proyecto web en condiciones ideales puede ser engañoso. Si tu computadora es potente y tu conexión a internet es rápida, nunca sabrás cómo se comporta tu página en un celular de gama baja con señal 3G. DevTools ofrece herramientas para simular velocidades de red reducidas, limitar el rendimiento del CPU y manipular sensores como la geolocalización y la orientación del dispositivo, todo sin salir del navegador.

¿Cómo reducir la velocidad de internet y CPU desde DevTools?

Cuando un cliente indica que la mayoría de sus usuarios tienen dispositivos de gama media o baja, es fundamental replicar esas condiciones durante el desarrollo. Para hacerlo, hay que ir a la pestaña Performance dentro de DevTools [01:40].

Dentro de esa pestaña se encuentran dos controles clave:

Network: permite cambiar la conexión simulada entre online (tu internet real), 3G rápido, 3G lento u offline.
CPU: permite reducir artificialmente la capacidad de procesamiento de tu computadora, por ejemplo a 4X o 6X más lento [02:48].

Al seleccionar 3G lento y reducir el CPU a 6X, se puede observar cómo los tiempos de carga aumentan considerablemente, incluso en proyectos livianos. La lógica es simple: si tu proyecto carga bien en estas condiciones simuladas, va a funcionar sin problemas en dispositivos de gama alta [03:30].

¿Para qué sirve el modo offline?

El modo offline resulta útil para probar Progressive Web Apps (PWA), que son páginas diseñadas para funcionar parcialmente sin conexión a internet [02:05]. Si tu proyecto no incluye un Service Worker, al activar el modo offline simplemente aparecerá un error de conexión. Pero si estás desarrollando una PWA, puedes verificar qué partes de la experiencia siguen funcionando sin necesidad de desconectar manualmente tu red.

¿Por qué probar también en dispositivos reales?

Aunque DevTools es muy útil para estas simulaciones, siempre es recomendable probar en dispositivos físicos baratos [03:55]. Dispositivos que cuestan entre veinte y veinticinco dólares, con 3G limitado y poca capacidad de cómputo, permiten validar la experiencia real del usuario. Si tu proyecto carga correctamente en uno de estos dispositivos, tendrás la certeza de que funcionará en cualquier equipo.

¿Cómo simular la geolocalización y orientación del celular?

Para acceder a los sensores desde DevTools, hay que ir al menú principal, seleccionar Más herramientas y luego Sensores [04:40].

Al abrir el panel de sensores se encuentran dos secciones principales:

Geolocalización: permite establecer una latitud y longitud específicas. Chrome incluye ubicaciones preconfiguradas como Mountain View para pruebas rápidas [05:05]. También es posible ingresar coordenadas personalizadas si necesitas simular una ubicación precisa.
Orientación del dispositivo: permite modificar los valores de alfa, beta y gamma, que representan los tres ejes de rotación del celular [05:50].

La orientación del dispositivo es especialmente relevante en aplicaciones que dependen de la posición física del celular. Por ejemplo, aplicaciones como Pokémon GO utilizan sensores de movimiento y velocidad de localización para detectar si el usuario está caminando o en un vehículo [05:30]. Con DevTools puedes programar y probar triggers que se activen cuando el celular alcance una orientación determinada.

¿Qué beneficios aportan estas herramientas al diseño responsive?

Estas funcionalidades van más allá de adaptar un diseño a diferentes breakpoints. Permiten construir proyectos verdaderamente multiplataforma que consideren:

La velocidad de conexión real de los usuarios.
El rendimiento del hardware donde se ejecutará la aplicación.
La ubicación geográfica y cómo afecta al contenido mostrado.
La orientación del dispositivo como detonante de funciones específicas.

Dominar estos aspectos de DevTools significa poder garantizar que un proyecto no solo se ve bien, sino que se comporta de forma estable y rápida sin importar el dispositivo que utilicen los usuarios. Si ya estás usando estas herramientas en tus pruebas, comparte tu experiencia y qué configuraciones te han resultado más útiles.