Desarrollar para dispositivos móviles debería ser tan fácil como para computadoras de escritorio. Hemos trabajado mucho en las Herramientas para desarrolladores de Chrome para facilitarte las cosas y es hora de revelar algunas funciones nuevas que deberían mejorar drásticamente tu desarrollo web móvil. En primer lugar, realizaremos la depuración remota y, luego, veremos la emulación móvil adecuada.
Realiza una presentación en pantalla de la pantalla de tu dispositivo en el escritorio
Hasta ahora, durante la depuración remota, tenías que cambiar la vista entre tu dispositivo y las Herramientas para desarrolladores. Ahora Screencast muestra la pantalla de tus dispositivos junto a las Herramientas para desarrolladores. Verlo es bueno, pero interactuar con él es aún mejor:
- Los clics en la presentación en pantalla se traducen en toques, y los eventos táctiles adecuados se activan en el dispositivo.
- Inspecciona el elemento en tu dispositivo con el puntero de computadora.
- Escribe en el teclado del escritorio: todas las combinaciones de teclas se envían al dispositivo. Ahorrar mucho tiempo cuando escribes con los pulgares
- Desliza el puntero con el puntero para desplazarte por la página o deslízate por el panel táctil de tu laptop.
En la documentación completa sobre presentación en pantalla se captura todo esto y más, como el envío de un gesto de pellizcar de zoom. Se requiere la versión beta de Chrome en Android (m32).
Depuración remota sencilla
Hace 18 meses, Chrome introdujo la depuración remota adecuada para los navegadores WebKit, pero si la probaste en algún momento, tenías que lidiar con una descarga del SDK de Android de 400 MB, agregar el objeto binario adb a tu $PATH y algunos encantamientos mágicos de la línea de comandos.
Ahora, nos complace anunciar que puedes olvidar todo eso. Chrome ahora puede descubrir de forma nativa tus dispositivos conectados por USB y comunicarse con ellos. Implementamos el protocolo adb directamente por USB en Chrome para que puedas ir con facilidad a Menu > Tools > Inspect Devices e iniciar de inmediato tu sesión de depuración remota.
Esto funciona muy bien en todas las plataformas, incluido el Sistema operativo Chrome. Sin embargo, ten en cuenta que, en Windows, primero deberás instalar controladores USB adecuados para comunicarte con el dispositivo. Si nunca lo has probado antes, también deberás habilitar la depuración por USB en el dispositivo y confirmar que estás usando la versión beta de Chrome para Android. Lee los documentos completos.
Redirección de puertos para proyectos locales
Estás desarrollando en localhost:8000, pero tu teléfono no puede alcanzarlo. Por lo tanto, agregamos la redirección de puertos directamente al flujo de trabajo de depuración remota. Ahora es fácil trabajar en todos tus proyectos, sin usar trucos de tunelización. En about:inspect, haz clic en Redirección de puertos para configurar los puertos que deseas que estén disponibles y se iluminarán de color verde si están listos para usarse.
Emulación de dispositivo móvil
No siempre tienes los dispositivos que necesitas para probar la compatibilidad, ¿verdad? Si bien la depuración remota de dispositivos reales te brindará la mejor experiencia táctil y de rendimiento, ahora puedes emular de manera realista muchas características del dispositivo en computadoras de escritorio, lo que te ahorrará tiempo y hará que el bucle 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 viste la función Métricas del dispositivo anterior, lo que ahora está disponible es una gran actualización. El equipo se esforzó mucho por lograr que la nueva emulación móvil obtuviera 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 tamaño de texto y, de hecho, cada dispositivo tiene un “factor caramelo” específico para el ajuste automático del texto que cambia para ayudar a que el texto sea legible. En el modo de emulación, puedes confirmar que se está aplicando este comportamiento y ver los resultados.
Relación de píxeles del dispositivo
Hasta ahora, es casi imposible ver lo que muestra un dispositivo con valores altos de PPP en uno con valores bajos de PPP. Ahora, la emulación de dPR en Herramientas para desarrolladores adaptará su vista para permitirle hacer zoom en una situación de DPI profundo. Además, es posible 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 hasta las funciones o errores del navegador. Por lo tanto, mientras se emula a iOS, WebGL seguirá funcionando y no se mostrará el error del zoom de orientación de iOS 5. Para experimentar esa variabilidad, dirígete al dispositivo.
Emulación adecuada de <meta viewport> (y @viewport)
Probar el comportamiento de width=device-width y minimum-scale:1.0 anteriormente fue 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 emular pantalla táctil garantizará que tus clics se interpreten como touchstart, y así sucesivamente. Además, funcionarán los eventos sintéticos, como el zoom, el desplazamiento y el desplazamiento lateral. Para pellizcar la pantalla, simplemente shift + arrastra o shift + desplaza el mapa para acercar el contenido. Obtendrás una excelente vista del contenido que se escala más allá del viewport.
Por último, las esperas de la falsificación de identidad del usuario-agente (tanto en el encabezado de la solicitud como en el nivel de window.navigator), la ubicación geográfica y la emulación de orientación te permiten explorar toda la funcionalidad de tu dispositivo.
Ajustes predeterminados del dispositivo
Los ajustes predeterminados de emulación te permiten seleccionar un teléfono o una tablet y obtener el tamaño de pantalla correcto (dPR, UA aplicado para ese dispositivo), junto con eventos táctiles completos y viewport emulado. Puedes probar ajustes predeterminados o modificar estas características fácilmente uno por uno.
Visita DevTools.chrome.com para ver los documentos completos sobre la emulación de dispositivos móviles con Herramientas para desarrolladores
Demostración
Para obtener la demostración completa de todas estas funciones en acción, mira mi charla de 23 minutos de la Chrome Dev Summit en Herramientas para dispositivos móviles: