jQuery : Herramientas De Desenvolvimiento

Como la comparación de código mostrada en el Artículo Anterior, el código de jQuery es típicamente más corto y más claro que su equivalente básico de JavaScript. Sin embargo, esto no significa que siempre escribiremos código que esté libre de errores, o que forma intuitiva entenderemos lo que está sucediendo en nuestras páginas en todo momento. Nuestra experiencia de codificación jQuery será mucho más cómoda con la ayuda de herramientas de desarrollo estándar.

Herramientas de desarrollo de alta calidad están disponibles en todos los navegadores modernos. Podemos sentirnos libres de usar el ambiente que es más cómodo para nosotros. Las opciones incluyen:

• Las herramientas de desarrollo de Internet Explorer: 

http://msdn.microsoft.com/en-us/library/dd565628.aspx

• El Inspector Web de Safari: 

http://developer.apple.com/technologies/safari/developer-tools. html

• Las herramientas para desarrolladores de Chrome: 

http://code.google.com/chrome/devtools/

• Firebug para Firefox: 

http://getfirebug.com/
Cada uno de estos kits de herramientas ofrecen características de desarrollo similares, incluyendo:

• La capacidad de explorar y modificar aspectos del DOM

• Investigar la relación entre el CSS y su efecto en la presentación de la página

• Rastreo conveniente de la ejecución de secuencias de comandos mediante métodos especiales

• Pausar la ejecución de secuencias de comandos en ejecución e inspeccionar los valores de las variables

Aunque los detalles de estas características varían de un navegador a otro, los conceptos generales permanecen constantes. En este site, algunos ejemplos requerirán
el uso de uno de estos conjuntos de herramientas; Usaremos Firebug para estas demostraciones, pero las herramientas de desarrollo para otros navegadores son buenas alternativas tambien.

Firebug

Las instrucciones actualizadas para instalar y usar Firebug se pueden encontrar en la página principal del proyecto en http://getfirebug.com/. La herramienta está muy involucrada que no se podría explorar con gran detalle aquí, pero un test de algunas de las características más relevantes nos será útil.

Tomando en cuenta el Navegador Mozilla Firefox y su complemento Firebug, así como el ejemplo comentado en el Artículo Anterior, veamos:

• Cuando Firebug es activado, aparece un nuevo panel que ofrece información sobre la página actual. En la pestaña HTML predeterminada de este panel, podemos ver una representación de la estructura de la página en el lado izquierdo y detalles del elemento seleccionado (como las reglas CSS que se aplican a él) en el lado derecho. Esta pestaña es especialmente útil para investigar la estructura de la página y solucionar problemas de CSS, como se muestra en la siguiente captura de pantalla: