Curso de Javascript: Debug con Eclipse y Firefox

Dec 7 2013

Una de las principales tareas del programador es realizar la depuración de un programa que está fallando e inicialmente se desconoce porqué. En la presente unidad se expone una guía de instalación y configuración de las herramientas sobre eclipse y firefox que permiten realizar el debut.

Instalación de componentes

Componentes de Firefox

• Firebug: https://addons.mozilla.org/es/firefox/addon/firebug/
• Crossfire: https://getfirebug.com/wiki/index.php/Firebug_Extensions#Crossfire

Componentes de Eclipse

• Repositorio JSDT: http://download.eclipse.org/webtools/repository/juno
• Instalar las Javascript Development Tools SDK

Configuraciones

Configuración en Firefox

• Abrir Firebug (F12)

• Habilitar cada pestaña de Firebug

• Arrancar el Servidor de Crossfire: Botón derecho en el botón de CrossFire (abajo a la derecha), Star Server.

• En el diálogo: host: localhost, port: 5000

• Pulsar Ok

• Comprobar en la pestaña de Firebug/Remote que el servidor está arrancado.

Configuración en Eclipse

• Menú: Window->Preferences
• En el apartado: Run/Debug->Launching
• Desmarcar: Build (if required) before launching
• Pulsar Ok
• Menú: Project
• Desmarcar: Build Automatically

Lanzando del proyecto

• En eclipse:
• Abrir los ficheros del proyecto a depurar.
• Abrir la Perspectiva de Debug: Window->Open Perspective-> Debug
• En la barra de Iconos de acceso directo, Abrir el desplegable al lado del botón de Debug
• Seleccionar Debug Configurations…
• Selecionar el apartado Remote Javascript
• Pulsar en el botón nuevo (Hoja en blanco, arriba a la izquireda)
• Cambiar el nombre a: CrossFire
• En el Connector: Seleccionar Remote Attach
• Host: localhost
• Port: 5000
• Seleccionar todas las checkbox menos la última
• En la pestaña Source, Añadir el proyecto: botón Add
• Selecionar Proyecto
• Pulsar en Ok
• Seleccionar el proyecto a depurar
• Pulsar Ok
• Pulsar en Apply (abajo al a derecha)
• Pulsar en Close
• En Firefox:
• Abrir el fichero html que se quiere depurar a través de la barra de navegación o el menú Archivo->Abrir Archivo
• En el Firebug/Script
• Añadir los Breakpoints que se quiera en el código JS, mediante dobleclick en las líneas que se desee
• En eclipse:
• Pulsar en el boton Debug
• Aparecerán los procesos de debug
• Recargar el HTML en Firefox

Tanto en el Eclipse como en Firebug aparecerá el código en la primera línea que tenga un BreakPoint.

Entonces ya podremos ver la ejecución del código paso a paso.

Finalizando

Una vez finalizada la depuración podremos Terminar la ejecución, pulsando botón derecho sobre el proceso de Crossfire de la pestaña de debug-> Terminate

Y podemos sobre el mismo proceso eliminarlo pulsado botón derecho sobre él->Remove all terminated

Repitiendo la depuración

Una vez configurado todo simplemente pulsando en el desplegable al lado del botón de Debug, podremos seleccionar la opción Crossfire que configuramos en Debug Configurations.

Este obra está bajo una licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 España.