Todo lo que se arrodilló para saber sobre Developer Console

Publicado: 2020-01-31

Buen profesional conoce sus herramientas. Una de las principales herramientas que tenemos a nuestra disposición los desarrolladores de WordPress es la consola para desarrolladores JavaScript incluida en nuestros navegadores. En este post veremos todo lo que necesitas saber sobre la consola del desarrollador del navegador, junto con algunos trucos y curiosidades que, quizás, no conocías.

Cómo acceder a la consola de desarrollador

Lo primero es lo primero: veamos cómo puede abrir la consola de desarrollador de su navegador. Si eres usuario de Firefox, simplemente haz clic en el menú (esquina superior derecha) y busca la opción Desarrollador web , como puedes ver a continuación:

Opciones de desarrollador en Firefox — Encontrarás las opciones de desarrollador de Firefox en su menú, en la parte superior derecha del navegador.

Luego, seleccione Consola web :

Consola JavaScript en Firefox — Una vez dentro del menú de opciones de desarrollador, busque *Web Console* para abrir la consola de JavaScript.

y la consola aparecerá en su navegador, como puede ver en la siguiente captura de pantalla. Recuerda que es posible configurar dónde quieres que aparezca exactamente el panel. Incluso puede configurarlo para que aparezca en una ventana separada (lo que resulta bastante útil si está utilizando varios monitores).

Si por el contrario eres usuario de Chrome, el procedimiento es muy similar. Simplemente acceda a su menú, seleccione Más herramientas y luego Herramientas de desarrollador :

Consola para desarrolladores de Chrome — Para abrir las herramientas de desarrollo en Chrome, abra su menú, busque "Más herramientas" y seleccione "Herramientas de desarrollo".

Cómo usar la consola de desarrollador

La consola de JavaScript de nuestro navegador es extremadamente útil para depurar nuestro código, ver qué registran nuestros scripts y ejecutar pequeños comandos y ver sus efectos en la web en tiempo real. Como desarrollador de complementos para WordPress, la principal utilidad que tiene la consola para mí es obviamente la depuración, así que veamos en detalle qué ofrece precisamente.

#1 Diferentes niveles de registro

La primera razón por la que un desarrollador suele abrir la consola de JavaScript es para depurar su código. Cuando se produce un error o algo falla, probablemente encontrará información al respecto en la consola. ¡Incluso puedes lanzar tus propios mensajes informativos, advertencias o errores cuando quieras!

En la captura de pantalla anterior, por ejemplo, vemos que el objeto de la console (objeto global cuyo objetivo es ayudarnos a depurar el código) tiene diferentes métodos para escribir mensajes en la consola:

la debug y log muestran mensajes simples.
info muestra mensajes de información. En Firefox muestran un icono de “info” al lado del mensaje.
warn muestra advertencias, generalmente señalando un problema o algo que no está del todo bien. Suele estar resaltado en amarillo y con un icono de advertencia.
error suele reservarse para los errores más graves (es decir, cosas que realmente han fallado). Se muestra en rojo y también imprime un seguimiento de la pila (es decir, qué función generó el error y todas sus llamadas).

La ventaja de utilizar diferentes niveles de registro es que podemos elegir en cualquier momento qué mensajes queremos que se muestren. Por ejemplo, en la siguiente captura de pantalla hemos desactivado los mensajes Info y Debug :

Mostrar u ocultar diferentes niveles de registro — La ventaja de usar diferentes niveles para los diferentes tipos de mensajes que muestra por consola es que puede filtrar los mensajes según su nivel, de modo que solo vea los que le interesen.

#2 Monitoreo de tiempos de ejecución

En ágil, a menudo escuchará esto: "haz que funcione, hazlo bien, hazlo rápido". Después de escribir algo de código "para que funcione", no es improbable que el resultado sea lento e ineficiente. Cuando esto sucede, es importante identificar dónde están los cuellos de botella y abordarlos.

Aunque existen herramientas como los generadores de perfiles para encontrar a los culpables y comprender exactamente lo que sucede debajo del capó con gran detalle, a veces queremos una solución "rápida y sucia". Es decir, simplemente queremos identificar la función más lenta en nuestro código... ¡y los temporizadores simples son excelentes para esta tarea!

Si desea saber cuánto tarda en ejecutarse una pieza de código en particular, inicie un temporizador al comienzo del código ( console.time ) y deténgalo ( console.timeEnd ) cuando finalice su código:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Cuando el código llegue a timeEnd , verá el tiempo que tardó en ejecutarse:

 Timer: 655ms - timer ended

Tenga en cuenta que cuando iniciamos y detenemos un temporizador, le damos un nombre (en mi ejemplo, "Temporizador"). Esto se debe a que podemos crear tantos contadores como queramos, cada uno con su propio nombre, y tenerlos todos funcionando a la vez.

#3 Contadores Automáticos

Si está interesado en controlar la cantidad de ejecuciones de cualquier función en su código o registrar la cantidad de veces que se ejecuta un ciclo, use console.count . Cada vez que se ejecute la función, obtendrá un nuevo registro en su consola con el valor actual del contador:

Contadores usando el método console.counter — Contadores utilizando el método `console.counter` .

#4 Cómo formatear sus registros

Los registros están aquí para ayudarnos a comprender qué sucede con nuestro código. Pero eso solo es posible si escribimos registros que luego podamos entender...

Cadenas de texto

Al comienzo de esta publicación, hablé brevemente sobre todos los métodos de registro que tiene la console . Los ejemplos que compartí imprimieron un poco de texto sin formato. Es decir, esta declaración:

 console.log( 'Hello world!' );

imprimió este texto:

 Hello world!

¿Qué pasaría si quisiéramos imprimir un objeto en su lugar? Bien, esto:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

se convierte en esto:

Mostrar un objeto en la consola — Cómo mostrar un objeto en la consola.

Pero, ¿y si queremos registrar varias cosas? ¿Tenemos que usar varias llamadas a console.log ? Bueno, la respuesta es no, no es necesario. Podemos registrar todo lo que queramos con una sola llamada:

Cómo escribir múltiples variables en un solo mensaje de registro — Cómo escribir múltiples variables (incluso de diferentes tipos) en un solo mensaje de registro.

Agrupando registros…

Cuando comenzamos a tener muchos registros en nuestro código (como, por ejemplo, aquí):

el resultado puede terminar siendo un poco confuso porque todos los registros se fusionan en una sola secuencia de texto:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Afortunadamente, el objeto de la console ofrece un par de métodos para resolver este problema: group y groupEnd . Con ellos, podemos agrupar nuestros mensajes de registro. Simplemente cree los grupos (por ejemplo, un grupo por función):

y se mostrarán así:

Mensajes de registro anidados — Puedes agrupar los mensajes de registro y así facilitar la lectura.

Mesas

Cuando trabajamos con colecciones de datos, no siempre es fácil visualizarlos. Por ejemplo, imagina que tenemos una lista de elementos como la siguiente:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Si los console.log , esto es lo que obtenemos:

Registro plano de un objeto — Si escribe cualquier objeto con `console.log` , se mostrará de una manera más o menos amigable.

lo cual está más o menos bien, hasta que tengamos más objetos con más campos cada uno. Cuando te enfrentes a este tipo de estructura de datos, te recomiendo que uses console.table para registrarlo:

Dar formato a los datos como una tabla — Cuando tiene una colección de datos (generalmente, objetos en una matriz), es mejor formatearlos como una tabla.

#5 Cómo mostrar correctamente tipos complejos (objetos y matrices)

Finalmente, me gustaría terminar el post de hoy con algo que no muchos desarrolladores conocen… Digamos, por ejemplo, que estás trabajando en un proyecto y quieres ver cuál es el valor de un objeto antes y después de actualizarlo. Para ello, es probable que console.log la variable antes de realizar el cambio y después, como ves en el siguiente GIF:

Registro de un objeto — Si registra un objeto, el resultado puede ser engañoso... ¡Actualizar el objeto cambia un registro anterior!

En el ejemplo anterior, registramos un objeto que contiene un valor establecido en 1. Luego actualizamos el valor a 200 y registramos el objeto nuevamente. Uno esperaría que el primer registro mostrara siempre el valor original (1), pero observe cómo, cuando expandimos el objeto, en realidad muestra el nuevo valor 200. ¿Qué está pasando?

Básicamente, un mensaje de registro tiene una referencia al objeto y, por lo tanto, cuando lo expandimos, nos muestra el objeto tal como es ahora y no como era cuando se hizo el registro. ¡Maldita mutabilidad!

Para resolver este problema, simplemente envíe una copia al registro (bibliotecas como lodash y su método cloneDeep lo hacen muy fácil). De esta manera, el primer objeto registrado será una copia que no se puede mutar (porque no tendrá una referencia a él):

Registro de un objeto clonado — Si quieres asegurarte de que lo que ves en el registro es el valor que tenía el objeto en el momento de hacer el registro, clonalo antes.

¡Y eso es todo por hoy! Espero que les haya gustado esta publicación. Si desea obtener más información sobre todo lo que puede hacer con console , consulte la documentación en MDN. ¿No te olvides de compartirlo con tus amigos? Y si haces algo diferente o tienes algún consejo para compartir con nuestros lectores, déjanos un comentario.

Imagen destacada de Tim van der Kuip en Unsplash.