Opera Dragonfly

A veces cuando desarrollamos una página trabajamos "a ciegas", puesto que las páginas web se ejecutan en entornos que quedan fuera del control del desarrollador, los navegadores, que tienen sus propias estructuras y formas de entender lo que se ha programado o diseñado. De esta manera, muchas veces surgen comportamientos inesperados de las páginas web que resultan difíciles de entender y corregir, porque no sabemos lo que realmente el navegador está interpretando con nuestro código.

Para trabajar con mayor conocimiento de los procesos internos que realiza el navegador, como consecuencia de la interpretación de la página, existen herramientas como Opera Dragonfly, que ofrecen toda la información que podamos necesitar sobre la página web, los scripts, estilos, objetos DOM, etc, de la página web que estamos visualizando. Siendo de vital importancia el sistema de Debug en Javascript, que permite incluso hacer debug, para búsqueda de errores en páginas que utilizan Ajax.

Opera Dragonfly es un producto que se integra en las versiones más modernas del navegador Opera, por ejemplo en Opera 9.5, que es la última versión del navegador en el momento de escribir estas líneas. No es necesario descargar Dragonfly aparte como complemento, sino que se instala automáticamente junto con el navegador.

Podemos obtener el navegador Opera en la página de descargas de la compañía: http://www.opera.com/download/

Una vez instalado Opera, tenemos acceso a la ventana de trabajo de DragonFly desde el menú de "Herramientas - Avanzado - Herramientas de desarrollo". Con ello nos aparecerá una barra adicional de control, en la parte de debajo del área del navegador, con acceso a diversas áreas donde se desplegarán informaciones de la página y a partir de la cual se puede inspeccionar cualquier elemento o script que se esté ejecutando en el navegador.

Entre las posibilidades de Dragonfly podríamos destacar:

• Debugger de Javascript: Dispone de una herramienta de Debug en Javascript que tiene como particularidad que se pueden configurar distintos puntos de ruptura en cualquiera de los scripts de la página. De este modo, cuando vamos usando la página y se ejecuta un script con un punto de ruptura, la ejecución de los scripts de Javascript se detiene en ese punto y entonces podemos inspeccionar todo el entorno, variables creadas, objetos DOM, etc. Como cualquier otra herramienta de debug, permite ejecución de los programas paso a paso, metiéndose en estructuras de control, funciones, etc. o ejecutándolas de golpe. Todo ello nos dará posibilidades de afrontar el desarrollo con mayores garantías y facilidades, incluso en entornos de programación con Ajax.
• Depuración de errores HTML, CSS: Dragonfly nos ofrece un completo listado de los errores de sintaxis HTML o CSS que estamos realizando, como atributos inexistentes o valores de los atributos no permitidos.
• Inspección de los estilos CSS: Permite ver qué estilos CSS se aplican a cada elemento de la página. Pero no sólo eso, sino que permite saber qué estilos pertenecen específicamente al elemento, cuáles los está heredando de otros elementos donde esté contenido, o cuáles pertenecen a los estilos que el navegador usa por defecto. Informan que en versiones venideras también se podrán alterar los estilos CSS de los elementos sobre la marcha.
• Inspeccionar el DOM: Permite visualizar cualquier elemento de la jerarquía de objetos de Javascript, para ver sus funciones, eventos, o cualquiera de sus propiedades. Se permitirá alterarlo en tiempo de ejecución en versiones posteriores.

En general, Opera Dragonfly ofrece visores o herramientas de inspección de todo lo que podemos necesitar para llevar un control exhaustivo de lo que está pasando en el navegador. Quizás, la propia complejidad del componente es lo que más puede limitarnos en un principio.Pero después de utilizarlo durante un par de horas podremos controlar bien la mayoría de las funcionalidades y sacarle un buen partido a las herramientas, para extraer el máximo partido a los reportes de DragonFly

La visión inicial de Dragonfly es la siguiente:

En la imagen he marcado algunos elementos de interés de la interfaz de Dragonfly. No obstante esta es una pantalla reducida, que se puede ampliar apretando el botón de paso a pantalla completa, con lo que Dragonfly se mostrará en una ventana aparte, ganando un mayor espacio para control de los scripts y visionado de las propiedades de los elementos. Cuando Opera DragonFly se muestra en una ventana independiente, la distribución de pantalla cambia algo, porque al haber más espacio, algunas partes de la interfaz se muestran sin tener que usar pestañas.

Esta página ofrece información general sobre las características de Opera DragonFly: http://www.opera.com/products/dragonfly/

Este artículo, en inglés, ofrece algunas claves para el manejo de DragonFly: http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/

Dragonfly no es el único sistema que permite inspeccionar cualquier elemento de la página, hace poco comentamos una extensión para Firefox llamada Firebug, que también permite inspeccionar cualquier elemento de la página, el DOM, así como alterar en tiempo de ejecución cualquier elemento o atributo CSS.

Cualquiera de estas herramientas son muy importantes para poder desarrollar páginas web de una manera más sencilla y sin duda debemos aprender a manejar alguna de ellas, o Dragonfly o Firebug. Con estas herramientas podrás hacer frente a errores con mayores ayudas y garantías de localizarlos, entenderlos y solucionarlos.