Un nuevo Modo de dispositivo para una generación que prioriza los dispositivos móviles
Hace poco más de un año, presentamos Device Mode, una forma de emular dispositivos y trabajar con diseños responsivos. Llegó el momento de la primera actualización importante, a partir de Chrome 49. Entonces, ¿cuáles son las novedades?
Los dispositivos móviles se están convirtiendo en el punto de partida de las Herramientas para desarrolladores de Chrome. Si bien antes ofrecíamos formas de emular dispositivos móviles, la configuración predeterminada de desarrollo era para computadoras de escritorio. La emulación móvil siempre tenía que estar activada. Ahora que el consumo de sitios móviles superó las computadoras de escritorio en muchos lugares, también cambiaremos nuestra posición en Herramientas para desarrolladores.
Novedades
En primer lugar, la IU está optimizada y usa mucho menos espacio. Esperamos que el nuevo Device Mode se convierta en el modo de desarrollo principal para la mayoría de los usuarios, por lo que era obligatorio tener un diseño limpio y simple que extienda la barra de navegación principal de Herramientas para desarrolladores.
La nueva regla de acceso rápido sobre las consultas de medios.
Además, centramos el viewport y agregamos una nueva regla de dispositivo de salto rápido en la parte superior, lo que es de gran ayuda a la hora de diseñar de forma responsiva y te da una idea de los tamaños de dispositivos más comunes.
Por último, se ocultan o agrupan muchas opciones con un botón de activación siempre que sea posible. Estas nuevas opciones compuestas facilitan mucho el cambio entre modos. Para activar o desactivar ciertos controles o personalizar tu experiencia de la barra de herramientas, presiona el ícono del menú de tres puntos.
Responsivo de forma predeterminada
La barra de herramientas principal de Herramientas para desarrolladores ahora se expande hacia el lado izquierdo de la ventana del navegador e incluye las herramientas más importantes para emular una variedad de dispositivos móviles y de escritorio. Puedes elegir entre dos modos de desarrollo:
- Responsivo
- Dispositivo específico
En ambos modos, el viewport se encuentra en su propia ventana de Chrome que puede cambiar de tamaño. Esto tiene la ventaja significativa de que puedes maximizar la ventana del navegador y las Herramientas para desarrolladores de la manera que prefieras y no hacer que salten cuando pruebes varios tamaños de tu página y vayan una y otra vez.
El modo responsivo es el que debes utilizar durante la iteración activa para asegurarte de que tu sitio funcione en todo tipo de dispositivos, no solo en algunos específicos. En este modo, se puede cambiar el tamaño de los controladores que se encuentran junto al viewport.
Dispositivo específico hace referencia a cuando eliges un dispositivo específico y bloqueas el viewport a su tamaño. Esto es útil cuando quieres obtener correcciones y toques finales para algunos dispositivos populares cerca del lanzamiento. Por eso, no solo mostramos una lista enorme de dispositivos de todo tipo en el menú desplegable, sino los más populares en la actualidad. Si seleccionas uno, haremos todo lo posible para que se comporte de la forma más similar posible: se emulan los eventos táctiles, el usuario-agente, el viewport y el dispositivo de Chrome y la IU (si están disponibles).
Depuración remota integrada
Las emulaciones, incluso las mejores disponibles, solo te pueden ayudar hasta cierto punto. Hay tareas que las emulaciones no pueden hacer actualmente, por ejemplo:
- Verifica si un botón es lo suficientemente grande para el pulgar.
- Prueba el rendimiento de tu sitio en un teléfono más lento.
- Depurar peculiaridades y limitaciones aleatorias de ciertos dispositivos
Para probar de forma suficiente todas estas situaciones, debes probar, trabajar y depurar con dispositivos físicos reales.
Por un tiempo, puedes navegar a chrome://inspect, conectar tu dispositivo mediante USB y abrir una sesión de depuración remota a través de Herramientas para desarrolladores. Sin embargo, dimos un paso más allá, refactorizamos la apariencia y el comportamiento de la depuración remota y la integramos en el núcleo de Herramientas para desarrolladores. En lugar de navegar a otra página, ahora puedes acceder a Inspect Devices como un diálogo directamente desde el nuevo menú principal. Esto facilita mucho la inclusión de la depuración física en tu flujo de trabajo; solo conecta tu teléfono, no es necesario salir de Herramientas para desarrolladores.
Nuevas casas para el resto de los controles de emulación anteriores
Dado que los dispositivos móviles ahora son la configuración predeterminada en Herramientas para desarrolladores, las funciones como la limitación de la red se trasladaron a su pantalla principal correcta, en este caso, el panel de red.
Algunas funciones, como la emulación de sensores o la configuración de renderización, como la emulación de medios impresos, se movieron a un lugar consistente en el panel lateral. Encontrarás todos los extras en el nuevo menú principal en "Más herramientas".
Sabemos que este es un cambio significativo al que todos debemos acostumbrarnos. Encontrarás cobertura completa sobre todo su contenido en los documentos de Device Mode que se acaban de actualizar. Nos encantaría saber tu opinión en Twitter o si necesitas más de 140 caracteres en nuestra herramienta de seguimiento de errores (sí, incluso para solicitudes de funciones).