JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Cómo simular otros navegadores para probar desarrollos Web

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:

  • 640x960 en el caso de un iPhone
  • 1024x768 en un iPad
  • 1024x600 en un Samsung Galaxy Tab con Android
  • 480x800 en un típico terminal con Android (HTC Sensation, HTC Desire, Samsung Galaxy S y SII)
  • 1280x800 en un Samsung Galaxy Note de 5,3'' con Android (¡impresionante!)
  • 480x800 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!

José Manuel Alarcón José Manuel Alarcón
Fundador y director de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (4) -

Instala la extension WoVS  

Responder

Spain José Manuel Alarcón

Imagino que te estás refiriendo a esto:

blog.wovs.com/.../...o-change-default-browser.html

No es lo mismo: esto (que por cierto viene incluido ya en Visual Studio, aunque no sea tan cómodo como esa barra) lo que hace es lanzar el navegador de verdad, el que tienes instalado.
Lo que yo explico es cómo cambiar el agente de usuario para simular que eres otro navegador. Son cosas muy distintas.

De todos modos gracias por comentar.

Saludos,

Responder

Spain José Manuel Alarcón

Claro que es fácil, ya lo pongo arriba. El problema es que no te deja almacenar los agentes de usuario "extras" que añadas a los que ya trae, por lo que si los debes usar habitualmente tienes que ponerlos en "Other" de cada vez. En ese sentido IE10 es más cómodo.

Responder

Pingbacks and trackbacks (1)+

Agregar comentario