Miércoles, febrero 25, 2009

Haciendo debug de Javascript en Netbeans 6.5

Archivado en: javascript, netbeans, tips, web — Etiquetas: aplicacion, debug, javascript,
netbeans, web — vramirez @ 7:14 am

Entre las múltiples características que brinda el IDE Netbeans 6.5, una de las más
llamativas y quizás poco explotadas es el debugger para Javascript. A continuación
mostraré como se puede hacer este debug en un ejemplo sencillo.

1. Crear una aplicación Web, colocándole el nombre deseado (WebApplication1?) y

escogemos el framework a utilizar en este casodeberá ser Visual Web
JavaServerFaces(Luego explicaré por qué).
2. Agregamos al proyecto un archivo de javascript. Vamos a File->New File. En la
sección Other, seleccionamos JavaScript File. Le colocamos como nombre script.
3. En vista de diseño de la pagina principal, vamos a la ventana Palette, buscamos una
sección que dice Advanced, ahí seleccionamos script y lo arrastramos a la página.
4. Sin cambiarnos de la vista de diseño vamos a la ventana Navigator, en la cual
buscamos el objeto script que acabamos de agregar.

Vista de Navigator

5. Luego de haberlo encontrado y seleccionado, vamos a la ventana de Properties,

donde editamos la propiedad url. Al hacer click en el boton [...] nos lleva a una
especie de selector de archivos. Debe aparecer en los candidatos el archivo
JavaScript que acabamos de crear; script.js. Lo seleccionamos y damos click en OK.
Hasta acá se han ejecutado los  pasos necesarion para poder utilizar en la página, las
funciones de JavaScript que se creen en el archivo script.js
6. Abrimos el archivo llamado script.js y pegamos el sgte código

function alerta(msj){
   var uno=1;
    uno+=89;
   alert(msj+uno);
}

7. Arrastramos un botón a la página principal. Editamos sus propiedades,

seleccionando el botón y luego haciendo click en la ventana Properties. En la
opción onClick, escribimos alerta(“Hola mundo de debugger “)
8. Si ejecutamos de una vez la aplicación, seguro saldrá un botón, al que si le damos
click dirá Hola mundo de debugger 90. Sin embargo, aún no tenemos debugger
sobre el JavaScript.
9. Hacemos click derecho sobre el nodo del proyecto y luego en Properties. En la
categoría debug, seleccionamos el que dice JavaScript. Luego seleccionamos el
browser (recomiendo de lejos Firefox, he tenido malos ratos con el debugger en IE)
10. A continuación vamos al archivo JavaScript, llamado script.js y seleccionamos
cualquiera de las filas donde deseamos que el debugger se detenga. Aparecerá el
cuadro rojo en la linea como en el código java normal, es decir un breakpoint.
Ahora si le damos ejecutar a la aplicación pero con debugger. Aparece un mensaje,
confirmando lo que habiamos seleccionado antes. Podemos incluso indicarle en la
parte inferior que no queremos ver ese mensaje de nuevo. Esta configuración se
puede cambiar en cualquier momento en las propiedades del proyecto editadas en el
paso anterior.

Confirmacion JavaScript1

11. La primera vez, se instalará un plugin para que Firefox soporte el debug de la
aplicación. Será necesario reiniciar el navegador.
 Instalación de plugin para firefox

12. Luego de un par de minutos, se instala el plugin y podemos hacer debug del código
escrito en JavaScript.

Debugger en NetBeans IDE 6.5

Por alguna razón, cuando el programa llega a un breakponit y estas en el navegador, no

salta a NetBeans. Hay que ir manualmente y hacer click en el IDE, para ver el programa.
Los controles para avanzar son idénticos al debugger normal. Por último quiero decir que la
razón por la que escogí Woodstock, sobre IceFaces es simplemente porque IceFaces no
tiene un equivalente para el componente script, añadido en el paso 3.

Como vemos este debugger es una nueva ayuda para entender el funcionamiento de código
JavaScript en nuestras aplicaciones web.

Una última observación es que no es recomendable que naveguemos mientras está arriba el
debugger en modo javascript. La razón es que páginas con javascript (casi todas) tendrán
comportamientos extraños.

 Share this:
  StumbleUpon

 Facebook
 Reddit
 Digg


Comentarios (3)
Like
Be the first to like this post.

3 comentarios »

1.

¿Sería posible que pudieras publicar un ejemplo sencillo de como crear una
Aplicación Web utilizando Netbeans 6.5?

Me sería de gran ayuda, pues me han recomendado este IDE y cuando me he

puesto, la verdad, me he sentido un pokitin perdio…

Si no es mucha molestia… Gracias!!

Comentario por Pakito — Miércoles, marzo 25, 2009 @ 5:50 am

2.

Revisa este post o

este otro

Comentario por vramirez — Sábado, abril 11, 2009 @ 8:01 pm

3.

Esta muy bien el ejemplo.. Por favor si pudieras ayudarme con una ejemplo usando
el onMouseOut y onMouseOver pero con imagenes.. es decir quiero que se cambien
la imagene al momento de deslizar el raton por un boton, he tratado peron no me
funciona, al parecer no carga las imagenes en el metodo que trato de hacer…
 Comentario por Edwin — Viernes, septiembre 11, 2009 @ 12:38 pm

RSS feed para los comentarios de esta entrada. URI para TrackBack.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están

marcados *

Nombre *