¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

2.6.15

Cómo depurar Javascript o Jquery - ACTUALIZADO

A continuación os vamos a dar unos consejos para depurar código Javascript, que seguro os van a resultar muy útiles a la hora de maquetar.

Para ello, tenemos que usar las herramientas de desarrollador de los navegadores. Os recomendamos el que lleva Google Chrome (Chrome Developer Tools), que podemos activar pulsando F12 y que nos permitirá, entre otras cosas:

- Detectar errores de sintaxis Este tipo de errores son bastante comunes. Nos lo puede indicar la consola de formas diferentes, dependiendo del tipo de error. Por ejemplo, si escribimos mal el nombre de una variable nos dará un error y si escribimos mal el nombre de un método o función nos dará un error distinto.

- Analizar los valores que van tomando nuestras variables Tenemos el siguiente ejemplo para analizar:
See the Pen MYdxZM by Pedro Marín (@pedromarin) on CodePen.
Vamos a poner un punto de ruptura o breakpoint en la línea 2, que es la siguiente:

$("ul > li").each(function(index, element) {

Para ello, vamos al Developer Tools, pulsamos la pestaña "Sources" y pulsamos encima del número de línea a partir del cual queremos depurar. Este número de línea se pondrá de color blanco y con un fondo azul para dejar constancia de que ahí hemos establecido un breakpoint de forma correcta. Para eliminarlo, volvemos a pulsar sobre el número de línea y desaparece el formato que cogió cuando el breakpoint estaba activo:
Actualizamos la página para que empiece a ejecutar el código jQuery de nuevo. Al llegar a la segunda línea, se interrumpe la ejecución y la pantalla del navegador se oscurecerá un poco, además en la parte superior nos mostrará un mensaje en una caja con fondo amarillo que dice "Paused in debugger".
En la ventana de Developer Tools vemos cómo coge el color de fondo azul la instrucción que se está ejecutando en ese momento. A partir aquí podemos ir ejecutando instrucción tras instrucción pulsando F11, y si queremos que ejecute el resto de la función sin ir línea por línea, pulsamos Mayusculas+F11. En todo momento se seleccionará la línea que se está ejecutando.

Llegados a este punto, podemos por ejemplo saber el valor de las variables que tenemos declaradas y que están situadas en el código antes de o en el punto de ruptura que hemos definido (en nuestro caso hasta la línea 4 como mucho (inclusive)). Para ello, colocamos el ratón por encima del nombre de la variable (en este caso index) y se mostrará un tooltip con el valor que toma dicha variable (en este caso cero).


Además de variables también podemos comprobar el valor de expresiones. Algunas no funcionan directamente, es decir, en nuestro ejemplo, si ponemos el ratón encima de la expresión $("ul > li") no aparece ningún tooltip con ninguna información.  En estos casos tenemos que seleccionar la expresión completa primero, entonces sí podemos situar el ratón encima de la expresión seleccionada.

En este caso nos dice que es un objeto, con la propiedad length: 3, es decir tiene 3 elementos <li>
- Comprobar que las instrucciones se van ejecutando correctamente Partimos del siguiente ejemplo, sin código HTML, que crearemos dinámicamente
See the Pen XJwGeL by Pedro Marín (@pedromarin) on CodePen.
He escrito el nombre del método "after" mal con la intención de que el navegador no ejecute correctamente esa instrucción, ni tampoco las siguientes, como podemos comprobar (el alert no se ejecuta). Al ejecutar este código nos da un error
A la derecha del error tenemos el nombre del archivo y el número de línea donde se ha encontrado el error, y si pulsamos nos lleva directo al fragmento de código que da error, dentro del archivo, e ilumina la línea errónea brevemente, poniéndole un fondo amarillo por un instante, después desaparece.

En el ejemplo de debajo se ha corregido este error de sintaxis, por lo tanto está bien escrito y funciona correctamente.

See the Pen gbJEKX by Pedro Marín (@pedromarin) on CodePen.

- Comprobar el origen de los cambios css de un elemento
Otra cosa que nos va a resultar muy útil (sobre todo cuando tenemos mucho código y no sabemos que función provoca ese cambio), es seguirle la pista a las funciones que cambian cualquier propiedad CSS de un elemento.

Para ello:

1.- Pulsamos la pestaña "Elements".
2.- Seleccionamos el elemento cuyas propiedades CSS cambian.
3.- Pulsamos el botón derecho, y en el menú contextual que aparece, seleccionamos la opción  "break on" y a continuación pulsamos "Attributes modifications".

Cuando el atributo cambie, el depurador se activará y nos llevará al origen que queremos, a veces de forma directa y a veces nos situará directamente en el archivo jquery.min.js, habiendo pasado ya por nuestro origen. Si este es el caso, podemos consultar en zona donde visualizamos la pila de llamadas (call stack) en la pestaña "Sources".


Hemos dejado un ejemplo en codepen como siempre, en el cual establecemos el punto de ruptura en el elemento "<div class="contenedor">", y cuando pulsamos el enlace "animar ancho", el depurador se activa y nos sitúa en el archivo jquery.js.
Lo comprobamos en "Sources", en la zona de la derecha (call stack).

Vemos cómo arriba del todo como se llama al archivo "jquery.min.js", linea 4. Esta es la última llamada.

Las anteriores son las que encontramos debajo.
Bajando hasta la llamada 10, comprobamos a la izquierda que se ejecuta la función "animarDiv", y a la derecha, que lo hace desde el archivo "pen.js", linea 5, el cual es el origen que estábamos buscando.

See the Pen Break on attribute modifications by Pedro Marín (@pedromarin) on CodePen.

No hay comentarios:

Publicar un comentario