Un nuevo modo de dispositivo para una generación que prioriza los dispositivos móviles
Presentamos el modo de dispositivo, una forma de emular dispositivos y trabajar con diseños responsivos, hace poco más de un año. Ahora es el momento de su primera actualización importante, a partir de Chrome 49. ¿Qué hay de nuevo?
Los dispositivos móviles se están convirtiendo en el punto de partida de las Herramientas para desarrolladores de Chrome. Si bien ofrecimos formas de emular dispositivos móviles en el pasado, el desarrollo predeterminado era para computadoras. La emulación para dispositivos móviles siempre debía estar activada. Ahora que el consumo de sitios para dispositivos móviles superó al de computadoras en muchos lugares, también cambiaremos nuestra posición en DevTools.
Novedades
En primer lugar, la IU está optimizada y usa mucho menos espacio. Esperamos que el nuevo modo de dispositivo se convierta en el modo de desarrollo principal para la mayoría, por lo que era un requisito un diseño simple y limpio que extienda la barra de navegación principal de DevTools.
La nueva regla de dispositivo de salto rápido sobre las consultas de contenido multimedia.
Además, centramos el viewport y agregamos una nueva regla de dispositivo de salto rápido en la parte superior, que es de gran ayuda cuando se diseña de forma responsiva y te da una idea de los tamaños de dispositivos más comunes.
Por último, muchas opciones se agruparon o se ocultaron detrás de un botón de activación siempre que fue posible. Estas nuevas opciones de composición facilitan mucho el cambio entre modos. Para activar o desactivar ciertos controles o personalizar tu experiencia en la barra de herramientas, presiona el ícono de menú de tres puntos.
Responsivo de forma predeterminada
La barra de herramientas principal de DevTools ahora se expande al lado izquierdo de la ventana del navegador y 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 tamaño variable dentro de Chrome. Esto tiene la gran ventaja de que puedes maximizar la ventana del navegador y DevTools como quieras y no tener que cambiar de una a otra cuando pruebas varios tamaños de tu página y vas y vuelves.
Responsivo es el modo que te recomendamos usar 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 junto al viewport de forma libre.
Dispositivo específico se refiere a cuando eliges un dispositivo específico y bloqueas el viewport en su tamaño. Esto es útil cuando quieres realizar las correcciones finales y los toques finales para algunos dispositivos populares cerca del lanzamiento. Por eso, no solo mostramos una lista enorme de todo tipo de dispositivos en el menú desplegable, sino los más populares en la actualidad. Si seleccionas uno, haremos todo lo posible para que se comporte lo más cerca posible de la realidad: Se emulan los eventos de tacto, el usuario-agente, la vista del cliente, el zócalo del dispositivo y la IU (si está disponible).
Depuración remota integrada
Las emulaciones, incluso las mejores disponibles, solo pueden ayudarte hasta cierto punto. Hay algunas acciones que las emulaciones no pueden realizar en la actualidad, como las siguientes:
- Comprueba si un botón es lo suficientemente grande para tu pulgar.
- Prueba el rendimiento de tu sitio en un teléfono más lento.
- Depurar peculiaridades y limitaciones aleatorias de ciertos dispositivos
Para probar todas estas situaciones de forma suficiente, debes probar, trabajar y depurar con dispositivos físicos reales.
Desde hace un tiempo, puedes navegar a chrome://inspect, conectar tu dispositivo a través de USB y abrir una sesión de depuración remota a través de DevTools. Sin embargo, ahora dimos un paso más y refactorizamos el aspecto y el comportamiento de la depuración remota, y la incorporamos al núcleo de DevTools. En lugar de navegar a otra página, ahora puedes acceder a Inspect Devices como un diálogo directamente en el nuevo menú principal. Esto facilita mucho la inclusión de la depuración física en tu flujo de trabajo: solo debes conectar el teléfono, no es necesario salir de DevTools.
Nuevos lugares para el resto de los controles de emulación anteriores
Dado que los dispositivos móviles ahora son la opción predeterminada en DevTools, las funciones como la limitación de la red se movieron a su lugar correcto, 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 coherente en el Drawer. Puedes encontrar todos los extras en el nuevo menú principal, en "Más herramientas".
Sabemos que este es un cambio significativo al que todos tendremos que acostumbrarnos. Encontrarás una cobertura completa de todo lo que incluye en las documentaciones del modo de dispositivo que se actualizaron recientemente. Nos encantaría saber de ti en Twitter o, si necesitas más de 140 caracteres, en nuestro seguimiento de errores (sí, incluso para solicitudes de funciones).