Depurando JavaScript con Opera

A los que desarrollamos aplicaciones web con JavaScript siempre se nos ha hecho mas complicado depurar el JavaScript, especialmente para los que no usamos grandes IDE’s, es mas en algunos casos las IDE’s no lo hacen bien haci siempre es mejor depurarlo desde el browser, bien aqui como hacerlo desde Opera.

Primero con la pagina que queremos depurar cargada le damos boton derecho sobre cualquier espacio vacio y en el menu seleccionamos “Inspeccionar elemento” y muestra algo como esto:

djs1

Como recomendacion para depurar JavaScript desacople la ventana es el segundo icono desde la derecha (el que esta al lado izquierdo de la X) cuando lo desacople pulse sobre el segundo icomo desde la izquierda que dice “Scripts” vera entonces esta ventana:

djs3

Como ven le indica que tiene que recargar la pagina para cargar los scripts, para hacelo pulse sobre el icono con la flecha en el centro de la pantalla, pues al hacerlo se van a cargar los scripts, como queremos depurar un script especifico desplegamos el combo donde estan los nombres de los JavaScript de esta manera:

djs4

Ene ste caso he seleccionado un archivo llamado genericos.js, ahora lo que queremos es poner un breakpoint (punto de interrupcion) pues nos vamos a la columna donde estan los numeros de linea y le damos click, aparecera un punto rojo en la linea que se ha colocado en este caso lo he puesto en la linea 96, pero no queremos quedarnos en eso queremos inspeccionar el ID del elemento select, para ello vamos a la parte superior derecha y pulsamos sobre “Añadir seguimiento” en donde escriiremos loq ue queremos inspeccionar ene ste caso “select.attr(id)”

djs5

Ahora vamos a depurar propiamente el JavaScript para ello volvamos a la pagina y a ejecutar la accion que desencadenara este evento, en este caso estoy intentado trazear el evento select de un combobox de Jquery-ui, asi que voy a combo y selecciono un elemento:

djs6

Al hacerlo van a sentir que el browser se queda detenido, que no hace nada loq ue sucede es que el depurador ha detenido la ejecucion de la pagina y si vamos a la ventana de inspeccion veremos esto:

djs7

Como podran ver se encuentra en celeste resaltada la linea donde se puso el breakpoint y en la parte derecha superior ya me muestra los valores que estoy inspeccionando

djs8

Pero que pasa si queremos inspeccionar todos los atributos del elemento select pues solo pongamos en Añadir seguimiento select:

djs9

Ahora si lo que se desea es ir paso por paso pues tenemos las opciones de la parte superior derecha los botones:

djs10

EL primero reanuda la ejecucion de todos los script’s, el segundo lo hace linea por linea ingresando a todas las subrutinas, el tercero salta las subrutinas.

Acerca de

Antes que nada voy a dejar en claro algo, en este blog escribo como se me place, asi que no busquen errores de ortografia o de redaccion que los van a encontrar a montones y tampoco me critiquen o me digan nada sobre ellos pues no tengo intencion alguna de cambiarlos, lo que escribo lo dejo asi y no lo corrijo,claro esta a menos que sean lineas de codigo. Jorge Prado Anci, profesional en desarrollo de aplicaciones, en especial las dirigidas a bases de datos. He trabajado con VFP en casi todas sus versiones, se algo de Java (que no me gusta, es eso solo no me gusta, es bueno pero no me gusta), lo suficiente de PHP como para tener mi propio CMS(es que sigue sin gustarme por la capacidad de desorden que te permite este “lenguaje”), VB lo conoci y lo deteste tanto que lo olvide al punto de no querer adoptar ni por obligacion a su reemplazante VB .NET (por lo mismo de Java) y si C# este si me encanta y aun que conozco bastante bien el lenguaje, la verdad es que me falta mucho del Framework (del 100% estare en un 65%). Soy un apasionado por el orden (en los proyectos de desarrollo), de la programacion en capas (de MVC conozco pero no he aplicado mucho), los estandares y las condenadas pruebas unitaria. Venga creo que ya con esto fue suficiente.

Tagged with: , , ,
Publicado en AJAX
One comment on “Depurando JavaScript con Opera
  1. […] y en fin le di un puntaje de 7/10, como aún seguía con lo de MyRAD4PHP al 100% intentaba depurar mis aplicaciones que usan JavaScript y logré hacerlo con Opera (que es mi browser favorito) y publiqué un post sobre ello, fuen en […]

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

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 441 seguidores

Blog Stats
  • 304,137 hits
A %d blogueros les gusta esto: