« # »

Entorno de prueba para desarrolladores web (Windows)

Todo buen desarrollador web tiene la necesidad de probar todas sus creaciones – ya sea maquetación, programación, velocidad de renderizado, etc.. – en varios navegadores. Hasta ahora la opción más sencilla era la virtualización de sistemas operativos, instalando una versión de cada navegador en cada uno de ellos, así podríamos tener un Windows 95 con el IE3, el Netscape 4 y el Opera 6.06, el Windows 98 con el IE4, el Netscape 5 y el Opera 7.54, el Windows 2000 con el IE5 o 5.5, el Firefox 1.0.8 o 1.5.0.11 y el Opera 8.54 y finalmente el Windows XP con el IE6 o 7 con la última versión del Firefox y la última de Opera.

Sencillamente esta formula es costosa de mantener y utilizar, ya que abrir tantos sistemas operativos en una misma máquina es casi imposible si no disponemos de un ordenador con toneladas de RAM.

Lo que vengo a proponer es una solución que ya se ha visto en otros sitios, pero añadiendo aparte del Internet Explorer, el Firefox y el Opera (con las correspondientes versiones). De hecho, el motor de renderizado de dichos navegadores es el mismo tanto en Windows 95 como en Windows XP.

Mis accesos directos!

Desgraciadamente de momento no podremos cubrir todas las necesidades (Linux y MAC OS) pero eso se puede solucionar virtualizando ambos sistemas y siguiendo un patrón similar.

A continuación podéis ver las estadísticas de nbsp.es por navegadores. Como podréis ver no vale la pena instalar según que versiones (como el IE3, IE4, Opera 6 y 7 y FF1.0.8 o inferiores):

Stats navegadores

Si quieres seguir leyendo:

Empezaremos por el más sencillo, el Internet Explorer. Para poder tener todas las versiones anteriores y poder ejecutarlas a la vez, tenéis que descargar el MultipleIE, el cual es un programa que os instalará todas las versiones del IE que queráis de entre la 3.0, 4.01, 5.01, 5.5 y 6.0.

Instalación de diferentes versiones de Internet Explorer

El IE7 doy por sentado que habréis actualizado el navegador de vuestro winXP.

No dejo mucho espacio a duda con este programa, os lo descargáis, lo ejecutáis y elegís donde queréis que se instale, una vez instalado os pedirá de crear los accesos directos y os los creará directamente en el listado de inicio rápido.

El siguiente paso (vamos por dificultad) es el Opera.

A continuación os pongo un listado de las versiones que me he instalado en mi máquina de producción ya que aunque es de los menos utilizados, renderiza las páginas de una forma MUY correcta (hoy no voy a evangelizar a nadie):

Opera 6.06
Opera 7.54
Opera 8.54
Opera 9.02 (la última versión durante la edición de esta entrada)
TODAS

Una vez descargados, empezaremos instalando el Opera 6.06 y le indicaremos que lo haga en la carpeta Opera 6.06, ya que así podremos tener todas las versiones instaladas y no se sobrescribirán como sucedería si lo instalásemos en la carpeta Opera.

Instalamos de la misma forma el 7 y el 8 y llegado al 9 nos pide de actualizar el 8, le indicaremos que queremos realizar una instalación limpia y seleccionaremos la carpeta 9.02 (o la que toque cuando instaléis esta versión).

Una vez instaladas, las distintas versiones de Opera.

Finalmente vamos a por las 3 versiones más estables de Firefox, la 1.0.8, la 1.5.0.12 y la 2.0.0.9 (que no es la más estable de la 2.0 pero es la que hay ahora mismo, si cuando leáis esto hay versiones más nuevas de 2.0.0.9 descargad la más nueva). TODAS.

Vamos por partes que esto lleva un poco más de trabajo. Supongo que tendréis una versión de Firefox instalada a estas alturas, lo que vamos a hacer es crear un perfil para cada Firefox que tengamos instalado. Para ello, editaremos el acceso directo al Firefox y teclearemos:

-ProfileManager

Acceso directo al gestor de perfiles

Al ejecutar el acceso directo nos abrirá una ventanita donde veremos los perfiles actuales. Para ir bien (o no, da igual) tenemos que tener el usuario “default”, este lo usaremos para la versión actual, luego creamos dos nuevos perfiles y les daremos un nombre para identificar el perfil con una versión del Firefox, por ejemplo: firefox15 y firefox108.

Listado de perfiles (siento el idioma, es lo que tiene)

Ahora, instalamos la versión 1.5.0.11 y la 1.0.8, seleccionando otra carpeta para la instalación.

Bien, llegados a este punto tenemos que tener 3 Firefox instalados y un gran problema, no se pueden ejecutar a la vez (bien!).

Una vez instaladas, las distintas versiones de Firefox.

No hay ningún problema si no llamáis así a vuestras carpetas, de hecho esto solo sirve para que no se sobrescriban las versiones de Firefox.

Una vez llegado a este punto, solo nos queda crear un acceso directo a cada una de las versiones de Firefox y usar un pequeño truco para que Firefox nos permita ejecutar distintas versiones a la vez (esto incluye el Thunderbird).

El acceso directo tiene que ser tal como os indico:
%SystemRoot%\System32\cmd.exe /C set MOZ_NO_REMOTE=1 & start "Firefox" "Ruta al Firefox" -p nombre_del_perfil

La variable de entorno MOZ_NO_REMOTE nos permite ejecutar varias versiones a la vez de Firefox. Si os interesa el tema, echad un ojo a los enlaces del parrafo anterior.

Entonces tenemos los tres accesos directos que tendrán esta pinta:

%SystemRoot%\System32\cmd.exe /C set MOZ_NO_REMOTE=1 & start "Firefox" "C:\Archivos de programa\Mozilla Firefox 1.0.8\firefox.exe" -p firefox108

%SystemRoot%\System32\cmd.exe /C set MOZ_NO_REMOTE=1 & start "Firefox" "C:\Archivos de programa\Mozilla Firefox 1.5.0.11\firefox.exe" -p firefox10511

%SystemRoot%\System32\cmd.exe /C set MOZ_NO_REMOTE=1 & start "Firefox" "C:\Archivos de programa\Mozilla Firefox\firefox.exe" -p default

Y voilá, tenemos los 3 Firefox corriendo a la vez.

Para terminar, os dejo un proceso por lotes (.bat) que uso para abrir todos los navegadores a la vez con la URL que yo quiera:

@echo off
echo "Abriendo %1"
%SystemRoot%\System32\cmd.exe /C set MOZ_NO_REMOTE=1
start "Firefox 1.0.8" "C:\Archivos de programa\Mozilla Firefox 1.0.8\firefox.exe" -p firefox108 %1
start "Firefox 1.5.0.11" "C:\Archivos de programa\Mozilla Firefox 1.5.0.11\firefox.exe" -p firefox10511 %1
start "Firefox 2.0.0.3" "C:\Archivos de programa\Mozilla Firefox\firefox.exe" -p default %1
start "Opera 6.06" "C:\Archivos de programa\Opera 6.0.6\Opera.exe" %1
start "Opera 7.54" "C:\Archivos de programa\Opera 7.54\Opera.exe" %1
start "Opera 8.54" "C:\Archivos de programa\Opera 8.54\Opera.exe" %1
start "Opera 9.02" "C:\Archivos de programa\Opera 9.02\Opera.exe" %1
start "Internet Explorer 3.0" "C:\Archivos de programa\MultipleIEs\IE3\iexplore.exe" %1
start "Internet Explorer 4.01" "C:\Archivos de programa\MultipleIEs\IE401\IEXPLORE.EXE" %1
start "Internet Explorer 5.01" "C:\Archivos de programa\MultipleIEs\IE501\IEXPLORE.EXE" %1
start "Internet Explorer 5.5" "C:\Archivos de programa\MultipleIEs\IE55\IEXPLORE.EXE" %1
start "Internet Explorer 6.0" "C:\Archivos de programa\MultipleIEs\IE6\iexplore.exe" %1
start "Internet Explorer 7.0" "C:\Archivos de programa\Internet Explorer\iexplore.exe" %1

NOTA: Tenéis que adaptar las rutas a vuestras instalaciones y perfiles!!!

Y luego un acceso directo al .bat indicando el URL:

"C:\Documents and Settings\Administrador\Escritorio\todos.bat" http://www.cdmon.com

donde la ruta es lo que queréis abrir.

Todos los navegadores a la vez (el FF2.0.0.3 queda al fondo y no se ve) 307Kb

Más info y weblografía (en inglés):

- Rob Cherny
- De aquí he sacado el acceso directo que setea la variable MOZ_NO_REMOTE desde el acceso directo. Visita obligada!
- Cómo manejar los perfiles

Espero que os sea de ayuda, dudas en los comentarios o a mi correo marc (arr) palaueb (pun) com.

Comentarios

  1. Emiliano Velasco | Mayo 30th, 2007 | 9:09 pm

    Hey Marc Lechooguero :P

    Son geniales, super recomendable… yo la uso hace tiempo para mis aplicaciones multiusuario, para correr varias sesiones en dif browsers y va increíblemente…

    Un saludo!!
    e

  2. Joan | Garnet Flex:Flash:PHP:MySQL:JS » Entorno de prueba para desarrolladores web | Mayo 31st, 2007 | 1:54 pm

    [...] Marc Palau ha escrito un completo artículo en el que muestra como preparar un entorno de prueba para desarrollo web. Esto incluye todos los navegadores en los que testear. Muy útil para desarrollos en los que tiremos de mucho JavaScript o CSS. Ir a: Entorno de prueba para desarrolladores web (Windows) [...]

  3. Diego | Junio 1st, 2007 | 3:01 am

    muy bueno, aunque yo personalmente, me decanto por testear solo en dos firefox, en ie7, ie6, y un opera. Creo que mas que eso es demasiado para mis proyectillos… ;)

  4. AKELARREWEB » Alatakeerl | Junio 1st, 2007 | 9:26 am

    [...] Marc Palau a escrito una pequeña guía donde da las claves para crear un entorno para desarrolladores web. Ideal para testear tus web en distintos navegadores. Hasta aquí la parte seria del artículo. Como siempre me gusta colocar en los post algo visual, tipo foto o gráfico puse en el google “Marc Palau” y cual fue mi sorpresa al ver a la reencarnación misma de chiquito “Grijandememore”. Este enlace friki va para vos Marc [...]

  5. La Zona Muerta » Blog Archive » links for 2007-06-01 | Junio 1st, 2007 | 10:24 am

    [...] Blog[nbsp] » Blog Archive » Entorno de prueba para desarrolladores web (Windows) (tags: blog browsers internet util web testing) [...]

  6. Avanzaweb | Julio 10th, 2007 | 11:04 am

    Intereante entorno. Hace tiempo que gasto el multipleie para ver el ie6. En cuanto a los demás, no creo que haga falta probar versiones antiguas de firefox y Opera. En general, los usuarios de estos navegadores se actualizan bastante rápido, excepto en el momento de la salida de una nueva versión.

    Te ha faltado utilizar konqueror jejeje

    Por otra parte, las estadísticas de tu web tratan muy bien al firefox. En webs que no son para desarrolladores los porcentajes caen bastante.

  7. teresa | Julio 18th, 2007 | 11:09 am

    hola marc!

    genial este artículo, me ha encantado y nunca había probado nada semejante, más que lo que comentas al pcpio; tener instalados unos cuantos navegadores e ir probando 1 por 1.

    tio, una pregunta…. tú currarías en Mac? para lo que tú haces, osea desarrollo web. Es que siempre he usado Pc y me da miedín el tema de optimizar y todos esos rollos que ya de por sí son lo peor… pienso que lo mismo pasándome a mac todos estos problemas se multiplican por el factor “minoría”

    saludines!!!

  8. marc | Julio 18th, 2007 | 11:26 am

    Pues yo creo que cuando desarrollas para Firefox ya estás creando una web compatible con la mayoría de navegadores más usados de MAC: Safari y FireFox.

    saludos!

  9. eduardo | Septiembre 5th, 2007 | 3:40 pm

    increible lo tuyo campeon, muy bue laburo

  10. Compartiendo el conocimiento » Blog Archive » Instalar varios navegadores en un ordenador | Enero 22nd, 2008 | 4:29 pm

    [...] Entorno de prueba para desarrolladores web (Windows) [...]

  11. Daniel Moya | Enero 30th, 2008 | 6:45 pm

    Hola Marc, muy buen artículo. Lo que no encuentro son las versiones previas a la 2.0.0.1, parece que las han quitado de http://releases.mozilla.org/pub/mozilla.org/firefox/releases/
    Saludos,

  12. marc | Febrero 3rd, 2008 | 8:22 pm

    Daniel Moya, ya he actualizado los enlaces :)

    saludos!

  13. Albert | Febrero 10th, 2008 | 1:13 am

    HOla!! jaja! ke wena! :D

    Quiero ver si puedo tomarme la patudes de preguntarte algunas cosas, ya que me interesa tu blog y tus datos sobre programación web (la cual la estoy aprendiendo!) :D

    -tu trabajas en Linux????
    -que editor ocupas?
    -puedes recomendar alguna pagina para aprender flash, por favor?
    -enséñame algún truco o secreto !! jajajaja! :D

    eso chao excelente tu blog aioz :D
    :D

  14. Entorno de prueba para desarrolladores web : Joan Garnet :: Arquitectura y desarrollo RIA | Enero 1st, 2010 | 8:39 pm

    [...] en los que testear. Muy útil para desarrollos en los que tiremos de mucho JavaScript o CSS. Ir a: Entorno de prueba para desarrolladores web (Windows) May 31, 2007 | Filed Under CSS, [...]

Deja un comentario

(*: Datos necesarios para dejar un comentario)

Get Adobe Flash playerPlugin by wpburn.com wordpress themes