El desarrollo para dispositivos móviles debería ser tan fácil como el desarrollo para computadoras. Trabajamos arduamente en las Herramientas para desarrolladores de Chrome para facilitarte el trabajo y es hora de presentar algunas funciones nuevas que deberían mejorar notablemente tu desarrollo web para dispositivos móviles. Primero, la depuración remota y, luego, presentaremos la emulación de dispositivos móviles adecuada.
Cómo transmitir la pantalla de tu dispositivo a la computadora
Hasta ahora, durante la depuración remota, tenías que alternar entre el dispositivo y las herramientas para desarrolladores. Ahora, la presentación en pantalla muestra la pantalla de tus dispositivos junto con las herramientas para desarrolladores. Verlo es bueno, pero interactuar con él es aún mejor:
- Los clics en la presentación se traducen en toques y se activan los eventos táctiles adecuados en el dispositivo.
- Inspecciona el elemento en tu dispositivo con el puntero de escritorio
- Escribe en el teclado de la computadora de escritorio. Todas las pulsaciones de teclas se envían al dispositivo. Ahorra mucho tiempo en comparación con escribir con los pulgares.
- Desplázate por la página con el puntero o simplemente desliza el panel táctil de la laptop.
La documentación completa sobre la transmisión de pantalla captura todo esto y mucho más, como enviar un gesto de zoom de pellizco. Se requiere Chrome en la versión beta de Android (m32).
Depuración remota sencilla
Hace 18 meses, Chrome introdujo la depuración remota adecuada para los navegadores WebKit, pero si lo probaste en ese momento, tuviste que lidiar con una descarga de 400 MB del SDK de Android, agregar el objeto binario adb a tu $PATH y algunos conjuros mágicos de línea de comandos.
Ahora, nos complace anunciar que puedes olvidarte de todo eso. Ahora Chrome puede descubrir y comunicarse de forma nativa con tus dispositivos conectados por USB. Implementamos el protocolo adb directamente a través de USB en Chrome, por lo que puedes ir fácilmente a Menu > Tools > Inspect Devices y comenzar de inmediato tu sesión de depuración remota.
Esto funciona muy bien en todas las plataformas, incluido ChromeOS. Sin embargo, ten en cuenta que, en Windows, primero deberás instalar los controladores USB adecuados para comunicarte con el dispositivo. Si nunca lo hiciste, también deberás habilitar la depuración USB en el dispositivo y confirmar que estás usando Chrome para Android beta. Lee la documentación completa.
Redirección de puertos para proyectos locales
Estás desarrollando en localhost:8000, pero tu teléfono no puede acceder a ese puerto. Por lo tanto, agregamos la redirección de puertos directamente al flujo de trabajo de depuración remota. Ahora es fácil trabajar en tus proyectos completos, sin ningún hack de tunelización. En about:inspect, haz clic en Redirección de puertos para establecer los puertos que deseas que estén disponibles. Se iluminarán de color verde si están listos para usarse.
Emulación de dispositivos móviles
No siempre tienes los dispositivos que necesitas para probar la compatibilidad, ¿verdad? Si bien la depuración remota de dispositivos reales te dará la mejor sensación de rendimiento y tacto, ahora puedes emular de forma realista muchas características de dispositivos en computadoras de escritorio, lo que te ahorrará tiempo y hará que tu ciclo de iteración sea mucho más rápido.
Emula el tamaño de la pantalla, devicePixelRatio y <meta viewport> con la simulación completa de eventos táctiles
Si ya conocías la función Métricas de dispositivos anterior, la que ahora está disponible es una gran actualización. El equipo trabajó arduamente para que la nueva emulación para dispositivos móviles obtenga una representación casi real de lo que verías en dispositivos reales. Por ejemplo, los navegadores WebKit mantienen un algoritmo complejo de ajuste automático de texto y, de hecho, cada dispositivo tiene un "factor de ajuste" específico para el ajuste automático de texto que cambia para ayudar a mantener la legibilidad del texto. En el modo de emulación, puedes confirmar que se aplica este comportamiento y ver los resultados.
Proporción de píxeles del dispositivo
Hasta ahora, era casi imposible ver lo que un dispositivo de alta densidad de píxeles (DPI) muestra en un dispositivo de baja densidad de píxeles. Ahora, la emulación de dPR en DevTools adaptará tu vista para permitirte acercarte a una situación de DPI profunda. Además, puedes esperar que window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), etc. reflejen tu configuración, lo que te permitirá ver cómo se adapta tu app, incluida la carga de diferentes recursos específicos de dpi.
La emulación de dispositivos no se extiende a las funciones o errores del navegador. Por lo tanto, mientras emulas iOS, WebGL seguirá funcionando y no se producirá el error de zoom de orientación de iOS 5. Para experimentar esa variabilidad, ve al dispositivo.
Emulación adecuada de <meta viewport> (y @viewport)
Anteriormente, probar el comportamiento de lo que hacen width=device-width y minimum-scale:1.0 era un juego solo para dispositivos. Ahora puedes probar rápidamente diferentes viewports y observar cómo se renderizan.
Simulación de eventos táctiles
La configuración de emular pantalla táctil se asegurará de que tus clics se interpreten como touchstart, etcétera. Además, funcionarán los eventos sintéticos, como el zoom, el desplazamiento y el desplazamiento panorámico. Para acercar o alejar con pellizco, simplemente presiona shift y arrastra o shift y desplázate para acercar el contenido. Obtendrás una excelente vista del contenido que se escala más allá del viewport.
Por último, tus funciones de resguardo de falsificación de usuario-agente (tanto en el encabezado de la solicitud como en el nivel de window.navigator), geolocalización y emulación de orientación te permiten explorar la funcionalidad completa de tu dispositivo.
Parámetros preestablecidos del dispositivo
Los parámetros de configuración predeterminados de emulación te permiten seleccionar un teléfono o una tablet y obtener el tamaño de pantalla, la dPR y la UA aplicados para ese dispositivo, junto con los eventos táctiles completos y el viewport emulados. Puedes probar ajustes predeterminados específicos o modificar fácilmente estas características una por una.
Ve a devtools.chrome.com para obtener la documentación completa sobre la emulación de dispositivos móviles con DevTools.
Demostración
Para obtener la demostración completa de todas estas funciones en acción, mira mi charla de 23 minutos de Chrome Dev Summit sobre las herramientas para desarrolladores para dispositivos móviles: