Desarrollar contenido para dispositivos móviles debe ser tan fácil como desarrollar 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. Primero, realizaremos la depuración remota y, luego, revelaremos la emulación adecuada de dispositivos móviles.
Presenta en pantalla la pantalla de tu dispositivo en el escritorio
Hasta ahora, durante la depuración remota, debías cambiar de vista entre tu dispositivo y las Herramientas para desarrolladores. Ahora, Screencast muestra la pantalla del dispositivo junto con las Herramientas para desarrolladores. Verlo está bien, pero interactuar con él es aún mejor:
- Los clics en la presentación en pantalla se traducen en toques y se activan los eventos táctiles adecuados en el dispositivo.
- Inspecciona el elemento en tu dispositivo con el puntero del escritorio.
- Escribe en el teclado de tu escritorio (todas las combinaciones de teclas se envían al dispositivo). Te ahorra mucho tiempo cuando escribes con el pulgar.
- Deslízate por la página con el puntero o solo deslízala por el panel táctil de tu laptop.
La documentación completa sobre la presentación en pantalla captura todo esto y más, como enviar un gesto de pellizco de zoom. Se requiere la versión 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 ese entonces, tenías que lidiar con una descarga del SDK de Android de 400 MB, agregando el objeto binario adb a tu $PATH y algunos encantamientos mágicos de línea de comandos.
Nos complace anunciar que puedes olvidar todo eso. Chrome ahora puede descubrir tus dispositivos conectados por USB y comunicarse con ellos de forma nativa. Implementamos el protocolo adb directamente a través de USB en Chrome, por lo que puedes ir fácilmente a Menu > Tools > Inspect Devices e iniciar de inmediato tu sesión de depuración remota.
Esta opción funciona muy bien en todas las plataformas, incluido el Sistema operativo Chrome, aunque debes tener en cuenta que en Windows, primero tendrás que instalar los controladores USB adecuados para comunicarte con el dispositivo. Si nunca lo has intentado antes, tendrás que habilitar la depuración por USB en el dispositivo y confirmar que estás utilizando 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 acceder a eso. Por lo tanto, agregamos la redirección de puertos directamente al flujo de trabajo de depuración remota. Ahora te será más fácil trabajar en todos tus proyectos sin complicaciones. En about:inspect, haz clic en Redirección de puertos para configurar los puertos que deseas que estén disponibles, y se encenderán en verde si están listos.
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á una mejor idea de rendimiento y tacto, ahora puedes emular de manera realista muchas características del dispositivo en una computadora de escritorio, lo que te ahorrará tiempo y hará que tu 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 anterior Métricas del dispositivo, ahora hay una gran actualización disponible. El equipo trabajó duro para lograr que la nueva emulación móvil tenga una representación casi realista de lo que se vería en dispositivos reales. Por ejemplo, los navegadores WebKit mantienen un algoritmo complejo para ajustar automáticamente el tamaño del texto y, de hecho, cada dispositivo tiene un "factor de relleno" 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.
Proporción de píxeles del dispositivo
Hasta ahora, era casi imposible ver lo que muestra un dispositivo con valores altos de DPI en dispositivos con valores bajos de DPI. Ahora, la emulación de dPR en Herramientas para desarrolladores adaptará tu vista para permitirte hacer zoom en 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 según el DPI.
La emulación de dispositivos no se extiende por completo a las funciones o los errores del navegador. Por lo tanto, mientras emulas iOS, WebGL seguirá funcionando y no verás el error de 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 lo que hacen width=device-width y minimum-scale:1.0 antes 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 la opción para emular la pantalla táctil garantizará que tus clics se interpreten como touchstart, etcétera. Además, funcionarán los eventos sintéticos como zoom, desplazamiento y desplazamiento lateral. Para pellizcar y acercar, solo debes shift + arrastrar o shift + desplazar para hacer zoom en el contenido. Obtendrás una gran vista del contenido que se expande más allá del viewport.
Por último, las instancias en espera de falsificación de identidad de 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 la funcionalidad completa 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) y UA aplicados a ese dispositivo, junto con eventos táctiles completos y viewport emulado. Puedes probar ajustes predeterminados específicos o modificar estas características una por una.
Ve a devtools.chrome.com para consultar la documentación completa sobre la emulación de dispositivos móviles con Herramientas para desarrolladores
Demostración
Para ver la demostración completa de todas estas funciones en acción, mira mi charla de 23 minutos de Chrome Dev Summit en Herramientas para dispositivos móviles: