JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Logpoints en Chrome: una excelente utilidad para depurar y no ensuciar el código

Una de las novedades que trae Chrome 73 es pequeña pero súper-interesante. Se trata de los Logpoints.

Un logpoint es un tipo especial de punto de interrupción que podemos añadir a nuestro código JavaScript y que, en lugar de detener la ejecución del código, se limita a "loguear" a la consola lo que le digamos. Esto nos evita tener que andar metiendo console.log constantemente en el código tan solo para ver algunos valores.

Obviamente disponemos de muchas otras maneras de ver los valores durante la ejecución, siendo el más obvio el de añadir "watches" (o "ojeadores", como me gusta llamarlos a mi), para ir viendo cómo cambian ciertos valores y expresiones. Sin embargo console.log sigue siendo muy interesante si, por ejemplo, queremos tener un histórico de todos los valores que pasan por una variable sin tener que estar siguiendo la ejecución paso a paso del código.

Así, podemos añadir un logpoint pulsando con el botón secundario sobre el número de línea en donde nos interese meterlo, así:

Animación que muestra cómo se pone el punto de log

y escribimos la expresión que queramos que aparezca en la consola de depuración al pasar por ese punto. El nuevo logpoint se verá de color naranja.

La expresión no tiene por qué ser simplemente el nombre de una variable, sino que cualquier expresión o código JavaScript válido que pudieras meter en un console.log puedes escribirlo también aquí.

A partir de este momento, cada vez que el código pase por ahí se nos mostrará por consola la expresión que le hayamos indicado:

El resultado de mostrar por consola la expresión anterior

En este caso se trata de un objeto representando un anuncio, con todas sus propiedades, que podemos examinar con detalle desplegándolo en la consola.

Nota: si te fijas en la figura anterior, aunque se muestra el objeto completo lo que no vemos es cuál era su nombre, por lo que si teneos varios puntos de log con datos parecidos a mostrar, puede ser fácil perdernos. Un truco interesante es envolver la variable que vamos a mostrar entre llaves, en este caso así: {anuncio}. Al hacerlo, lo que se muestra por consola es un objeto con una única propiedad llamada anuncio que contiene a nuestro objeto.Esto nos ayuda a ver también el nombre de lo que estamos mostrando y facilita el seguimiento en estos casos:

El resultado esta vez envuelto en un objeto

Si pulsamos sobre el punto de log con el ratón, al igual que pasa con cualquier punto de interrupción se elimina. Pero ojo, porque si lo vuelves a pulsar reaparece pero no conserva sus propiedades, es decir, obtenemos un punto de interrupción normal y corriente de color azul, en el que se detendrá el código.

Si pulsamos sobre él con el botón derecho se nos da la opción de editarlo, y desde el mini-diálogo de edición, aparte de cambiar la expresión a mostrar podemos desplegar las opciones para transformarlo en un punto de interrupción normal o condicionado:

Animación que muestra cómo se edita el punto de log

Finalmente, cabe preguntarse una cosa: cuando se llega a un logpoint y se muestra algo por consola ¿el código de la línea actual se ha ejecutado ya o no?. Es decir, ¿el logpoint es equivalente a poner un console.log antes o después de esa línea?

La respuesta es que es equivalente a ponerlo antes. Por lo tanto cuando lo colocas la línea actual todavía no se ha ejecutado. Tenlo en cuenta al utilizarlos.

¡Espero que te resulte útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Agregar comentario