Weblog de Victor Ramirez

Miércoles, febrero 25, 2009

Haciendo debug de Javascript en Netbeans 6.5

Filed under: javascript, netbeans, tips, web — Etiquetas: , , , , , — 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.
  5. Vista de Navigator

    Vista de Navigator

  6. 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
  7. Abrimos el archivo llamado script.js y pegamos el sgte código
  8. 
    function alerta(msj){
        var uno=1;
        uno+=89;
        alert(msj+uno);
    }
    
  9. 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 “)
  10. 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.
  11. 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)
  12. 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.
  13. Confirmacion JavaScript1

    Confirmacion JavaScript1

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

    Instalación de plugin para firefox

  16. 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

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.

4 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

  4. hola quisiera saber como hacer un menu desplegable en jsf utilizando script y estilos estoy utilizando netbeans
    gracias

    Comentario por andrea — Miércoles, enero 18, 2012 @ 10:01 AM


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Blog de WordPress.com.

A %d blogueros les gusta esto: