Cómo simular otros navegadores para probar desarrollos Web

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Como-simular-otros-navegadores-para-probar-desarrollos-Web.aspx

En ocasiones es muy útil poder engañar al servidor web y hacerle creer que te estás conectando con cualquier navegador, aunque en realidad estés usando Internet Explorer o Chrome bajo Windows, por ejemplo.

Como sabes, los controles de ASP.NET Web Forms tienen lo que se llama renderizado adaptativo, que consiste en que generan un HTML diferente según el dispositivo que solicite la página, pudiendo así adaptarse a las características de cada navegador de la mejor forma posible.

Así puedes ver qué efecto causa sobre el HTML que renderiza tu aplicación si estás usando un navegador muy viejo (Netscape?) o saber si cambia según sea el sistema operativo (puedes decir que estás trabajando desde Linux o Mac aunque estés en Windows), etc.. Un caso muy habitual es, por ejemplo, si estás probando una aplicación móvil y quieres ver qué HTML te devolvería cuando te conectas con un iPhone o un Windows Phone, puedes engañar al servidor fácilmente y hacerte pasar por uno de estos navegadores simplemente cambiando el User-Agent.

Obviamente el HTML no se interpretará como si fueras uno de esos navegadores, sin que seguirá siendo el motor de tu navegador el que renderice las páginas, así que que no te permite simular a otros navegadores, sólo te permite indicar otro agente de usuario para ver qué HTML te devuelve exactamente la aplicación en función del navegador que utilices.

La buena noticia es que como la mayoría de los navegadores de moviles son muy compatibles con HTML5 en lo que se refiere a maquetado de la página y sus funciones principales el motor de renderizado de IE9 te servirá para obtener una representación bastante fiel de cómo se verá en los  navegadores móviles reales. Si además le cambias el tamaño a la ventana para que tenga las dimensiones de la pantalla de un móvil o tablet será más fiel todavía:

  • 640×960 en el caso de un iPhone
  • 1024×768 en un iPad
  • 1024×600 en un Samsung Galaxy Tab con Android
  • 480×800 en un típico terminal con Android (HTC Sensation, HTC Desire, Samsung Galaxy S y SII)
  • 1280×800 en un Samsung Galaxy Note de 5,3» con Android (¡impresionante!)
  • 480×800 si es cualquier Windows Phone

En esta página puedes encontrar las resoluciones de la mayoría de los modelos de móviles en el mercado.

Cómo simular cualquier agente de usuario con Internet Explorer

El navegador del mercado que mas nos facilita hoy en día el hacer este cambio es Internet Explorer. Para conseguirlo basta con acudir a las herramientas del programador (pulsar F12 cuando estés con cualquier página abierta). Una vez en ellas vamos al menú Herramientas y vemos que hay una opción precisamente para ello, que ya trae además configurados los agentes de usuario de los navegadores de escritorio más comunes:

IE_CambiarUserAgent

Así podemos simular rápidamente a Google Chrome, versiones antiguas de Internet Explorer, Opera, la araña/robot de búsqueda de Bing…

También podemos añadir cadenas propias a la colección "Custom" y tenerlas ahí guardadas para reutilizar:

IE_CustomUA

En Internet hay multitud de listas con las cadenas de agente de usuario de cientos de navegadores, pero a mi me gusta especialmente esta de Zytrax. No es muy bonita ni fácil de buscar pero creo que es bastante certera.

En otros navegadores (Firefox y Chrome) es posible cambiar también este ajuste pero no es ni de lejos tan cómodo e inmediato.

¡Espero que te sea útil!

Sin categoría

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *