Cómo dar soporte a IE y no morir en el intento
Todos hemos tenido un día que estaba yendo realmente bien, los test pasan, el responsive funciona perfectamente, la consola no se queja de ningún error… Y entonces os recuerda el jefe de proyecto, que la página web debe dar soporte a Internet Explorer, y os reporta una ristra de errores de estilos en toda la plataforma. Qué catástrofe.
Para los desarrolladores que trabajen con MacOS o Linux, probablemente poder ver los errores que se reporten en el UI, sea una auténtica tortura. Mientras que Edge, por suerte o por desgracia, puedes instalarlo en tu Mac, y en Linux dentro de poco, todas las versiones anteriores son inposibles de instalar en ninguno de los dos sistemas operativo
Actualmente, Microsoft solo mantiene soporte para Internet Explorer 11, el cual dejará de tenerlo dentro de 5 años. Sin embargo, el 70% de las empresas tienen Internet Explorer 6 como navegador predefinido y el casi 3% de los usuarios de internet todavía utiliza alguna versión de Internet Explorer, sin contar con Edge, por lo que algunas empresas todavía desean que se dé soporte a Internet Explorer.
Para intentar evitar que los desarrolladores se vuelvan locos, a continuación, mostraremos algunas herramientas para poder lidiar con este explorador, sin tener que instalar una máquina virtual, y algunos de los principales problemas que se suelen dar a nivel de CSS.
Emuladores de Internet Explorer
Browserling te permite emular todos los navegadores e Internet Explorer en las versiones 9, 10 y 11, como si se estuvieran utilizando desde diferentes tipos de Windows y desde diferentes versiones de Android. Sin embargo, no es oro todo lo que reluce, y de forma gratuita solamente podrás hacer 5 consultas diarias durante 3 minutos cada una, y en 1024x768, por lo que probar el responsive te será muy difícil.
Otro de los fuertes de esta plataforma es que puedes inspeccionar elementos y ver cuál es el problema con los Devtools del propio Internet Explorer.
La extensión de Chrome IE Tab no tiene límite de tiempo, puedes configurar la extensión para que simule todas las versiones de Internet Explorer desde la 7 a la 11, y puedes usarla para todas las resoluciones sin ningún problema reescalando el navegador. Además es muy fácil de usar, solo tienes que introducir la web una vez ya inicializada la extensión.
No obstante, no puedes inspeccionar elementos, por lo que esta herramienta puede ser bastante limitada si necesitas más información sobre por qué algo no está funcionando cómo debería.
Browserstack es una herramienta muy potente, ya que te permite emular cualquier sistema operativo, desde Windows hasta diferentes tipos de Iphone, y la mayoría de los navegadores, incluso Yandex. Sin embargo, esta herramienta solo te permite disfrutar de cada sesión durante un minuto al día, aunque puedes hacer combinaciones con varios sistemas operativos para disfrutar de un minuto por cada navegador y cada sistema operativo.
Por otro lado, si eres lo suficientemente rápido, esta herramienta también te permite inspeccionar la consola.
Por otro lado, si buscas una herramienta sencilla, IE On Chrome puede ser lo que necesitas. No tiene límite de tiempo ni de usos, puedes escoger desde la versión 7 de Internet Explorer en adelante, y funciona con tu propio navegador, sin simular la barra de Internet Explorer, por lo que es más fácil navegar por ella.
Ngrok no es ningún emulador de navegadores, pero si tienes el proyecto en tu servidor local y tienes otro ordenador Windows, es la opción más cómoda. Esta plataforma te permite crear un tunel a tu servidor local que te permite acceder a él con una url pública. De esta forma, puedes acceder a tu proyecto desde otros equipos sin tener que instalarlo todo en otro ordenador.
Esta herramienta es muy sencilla de utilizar, solo hace falta descargar el zip que nos da gnrok al loguearnos, después descomprimir el archivo, con doble click en Windows, y con este comando en Linux o MacOC
unzip /path/to/ngrok.zipY por último con este comando creamos la URL que luego podemos copiar en nuestro Windows.
ngrok http <localhost>En lugar del ‘localhost’ debemos colocar el puerto local en el que esté la applicación donde queremos crear el tunel. Si no concoes el puerto, este por defecto, suele ser 80
ngrok http 80