Emulación de dispositivos dentro de Chrome DevTools

  • Por
Desde las herramientas para desarrolladores de Chrome podemos emular características de dispositivos como pantalla, touchsreeen, sensores. Echa un vistazo a la pestaña emulation en DevTools.
12/12/2013 - Las herramientas de desarrolladores de Google Chrome (Chrome DevTools) son un amigo inseparable del desarrollador web y el equipo de Google está siempre buscando la manera de mejorar las prestaciones y utilidades que se ofrecen para los compañeros de gremio. Prueba de ello son las nuevas funcionalidades para desarrollo en dispositivos, basadas en emulación de las características del terminal móvil.

Pero no solo se han quedado en la parte más ligada a la pantalla, que muchas veces ya venimos "emulando" simplemente reduciendo la ventana del navegador o con diversas extensiones, sino que van un poco más allá. Podemos emular los comportamientos derivados del viewport, "user agent" pero también el "Device pixel ratio" o incluso la pantalla touch o los sensores.

La nueva característica la encuentras entrando en un icono que tiene forma de tres líneas y un símbolo mayor-que. Seguidamente pulsamos la opción o pestaña "emulation". Pero ojo, no sé si la tendrás disponible en tu Chrome en este momento, puesto que para encontrarla yo he tenido que abrir el Chrome Canary, que es la distribución del navegador que tiene las últimas características en estado de desarrollo.

Para hacerte una idea de lo que te comentamos y que puedas encontrar los iconos puedes ver la imagen que aparece a continuación, o bien el vídeo que ponemos al final del post, que está en inglés pero donde podrás ver el sistema en marcha.

Entre las características que nos permite emular tenemos:

- Pantalla: Donde nos permite colocar diversas características, como la anchura y la altura, además de pasar de portrait a landscape. (vertical u horizontal). Además nos permite cambiar el Device Pixel Ratio, que es el ratio de píxeles reales de la pantalla que se utilizan para representar un píxel lógico.

- User Agent: Este permite cambiar el agente de usuario, esa "clave" que mandan los navegadores a los sevidores para indentificarse inequívocamente, sistema operativo, navegador, dispositivo, etc.

- Sensores: nos permite emular las características de una pantalla táctil y hacer que el comportamiento del ratón sea como si estuviéramos trabajando con el dedo en la touch screen. Pero además hay otros sensores que se pueden emular, como las coordenadas de geolocalización o incluso el acelerómetro.

Finalmente, para facilitarnos todavía más la vida, tenemos la posibilidad de acceder a varios "presets" con características de dispositivos bien conocidos, como varios modelos de la familia Nexus, de los Apple iPad, iPhone, dispositivos de Samsung, HTC, etc. En cada uno de estos modelos nos viene ya preestablecidos valores como su pantalla, Viewport, Device Pixel Ratio y el User Agent.

Lo cierto es que a mi no me ha funcionado todo igual de bien que sería deseable y la emulación no es exactamente igual que lo que se ve en el dispositivo. Sobre todo me salen unas barras de scroll horizontal que no son verídicas y no se me adapta el contenido a las características de la pantalla. En el demo que han hecho los chicos de Google en el vídeo que verás a continuación parece que sí les funciona bien, así que seguramente en breve todos podamos aprovechar estas características al 100%.