Noticias sobre mis proyectos

lunes, 6 de junio de 2011

Uso local de Dragonfly para depurar sitios web con Opera

Dragonfly = Firebug para Opera

Escribo este artículo después de descubrir cómo utilizar una herramienta desarrollo tan importante como Dragonfly sin tener que estar conectado a los servidores de Opera. Despúes de haber pasado mucho tiempo creyendo firmemente que la mejor opción era tener algo como su equivalente Firebug por fin he logrado instalarlo y hacerlo funcionar en la PC donde desarrollo aplicaciones web. Todo parece indicar que encontré el checkbox correcto ;o). Si sigue leyendo este artículo hasta el final Usted descubrirá una forma más cómoda de depurar con Opera los errores o defectos de sus aplicaciones. Como siempre le invito a suscribirse mediante RSS a este blog; especialmente si desea estar informado de temas relacionados con programación, diseño de sitios, herramientas o trucos útiles, y muchas otras cosas interesantes del mundo de la informática.

Instalación paso a paso de Dragonfly

El proceso es realmente simple. Lo primero que hay que hacer es descargar la versión más reciente de Dragonfly desde los servidores de Opera.

Descargar Dragonfly

Una vez hecho esto, extraiga los contenidos del fichero .zip en una carpeta en su sistema de archivos local. En este caso, como utilizo Ubuntu 10.04 Lucid, la carpeta que escogí fue /var/www/dragonfly , pero puede ser cualquiera (... donde el usuario tenga derechos de lectura, por supuesto ;o).

Posteriormente, es preciso sobre-escribir la URL desde donde se descargará la herramienta y remplazarla por una que haga referencia a la ubicación de la carpeta creada anteriormente. Hay dos formas de hacerlo. Las describo a continuación .

Editando el fichero operaprefs.ini

La vía más avanzada consiste en editar manualmente el fichero operaprefs.ini (así que si Usted prefiere los diálogos de configuración, mejor consulte el próximo epígrafe ;o) . En Ubuntu 10.04 este fichero se encuentra en la ruta ~/.opera/operaprefs.ini . En Windows la ruta sería C:\Documents and Settings\<Usuario>\Application Data\Opera\Opera\operaprefs.ini. Cuando lo encuentre, utilice el editor de texto de su preferencia para ver sus contenidos. Debe haber un fragmento similar al que se muestra a continuación

[Developer Tools]
Developer Tools URL=https://dragonfly.opera.com/app/

Remplace esta URL por otra de la forma file://localhost/path/to/dragonfly/client-en.xml. En mi caso, como he extraído los ficheros en /var/www/dragonfly, la configuración quedaría así.

[Developer Tools]
Developer Tools URL=file://localhost/var/www/dragonfly/client-en.xml

Utilizando el editor de preferencias de Opera

Si Usted prefiere utilizar diálogos de configuración, sin dudas esta variente es más apropiada. Si Usted está utilizando Opera simplemente haga click en el enlace que se muestra a continuación y verá el editor de preferencias del navegador. Su apariencia es parecida a la que se muestra en la figura.

Editor de preferencias de Opera

URL predeterminada en panel de preferencias de Opera

Remplace la URL (i.e. https://dragonfly.opera.com/app/) por otra de la forma file://localhost/path/to/dragonfly/client-en.xml. En mi caso, como he extraído los ficheros en /var/www/dragonfly, la URL sería file://localhost/var/www/dragonfly/client-en.xml.

URL predeterminada en panel de preferencias de Opera

Posteriormente, presione la combinación de teclas Shift + Ctrl + I e immediatamente aparecerá Dragonfly en la parte baja de la ventana . Poco tiempo después Usted podrá ver las pestañas que permiten observar y manipular el DOM, inspeccionar las peticiones hechas a través de la red, conocer el espacio dedicado al almacenamiento de datos de sesión, ... y así sucesivamente.

Consejos útiles

Si siguió los pasos anteriores, entonces my probablemente ya estará utilizando Dragonfly sin tener que estar conectado a los servidores de Opera. En este caso quizás desee añadir los siguientes botones para facilitar el acceso directo a estas herramientas. Simplemente arrástrelos (drag) y suéltelos (drop) sobre cualquier panel de Opera.

Enlaces directos a Dragonfly

Reload from cache
Dragonfly

En caso que no le funcione algo o tenga dudas en algun paso, simelo pide, podria ayudarle. Espero sus comentarios ;o).

No hay comentarios:

Publicar un comentario en la entrada