Todo lo que necesita saber sobre la consola de desarrolladores

Un buen profesional conoce sus instrumentos. Una de las principales herramientas que los desarrolladores de WordPress tienen disponibles es la consola para los desarrolladores de JavaScript incluidos en nuestros navegadores. En esta publicación, veremos todo lo que necesita saber sobre la consola para los desarrolladores de navegadores, junto con algunos trucos y curiosidades que quizás no sepa. Cómo acceder primero a la consola de desarrolladores: veamos cómo puede abrir la consola de desarrolladores de su navegador.

Encontrará las opciones para los desarrolladores de Firefox en su menú, a la parte superior del navegador.
Luego seleccione la consola web:

Una vez que llegue al menú de opciones de desarrollador, busque la consola web para abrir la consola JavaScript.
Y la consola aparecerá en el navegador, como puede ver en la próxima captura de pantalla. Recuerde que es posible configurar dónde desea aparecer exactamente el panel. Incluso puede configurarlo para que aparezca en una ventana separada (que es bastante útil si usa más monitores).

Consola JavaScript en Firefox. Si, por otro lado, usted es un usuario de Chrome, el procedimiento es muy similar. Vaya a su menú, seleccione múltiples herramientas y luego herramientas de desarrolladores:

Para abrir las herramientas para los desarrolladores en Chrome, abra su menú, busque “más herramientas” y seleccione “Herramientas de desarrollo”.
Cómo usar la consola para la consola JavaScript de nuestro navegador es extremadamente útil para solucionar problemas de nuestro código, ver qué registran nuestras Escrituras y ejecutar pequeños comandos y ver sus efectos en la web en tiempo real. Como desarrollador de complementos de WordPress, la utilidad principal tiene una consola para mí es una solución obvia de problemas, así que veamos en detalle qué exactamente.# 1 Niveles de diario diferentes La primera razón por la cual un desarrollador generalmente abre la consola JavaScript es distinguir su código. Cuando ocurre un error o algo no funciona, probablemente encontrará algo de información al respecto en la consola. ¡Incluso puede lanzar su propia información, advertencias o errores cuando lo desee!
Diferentes niveles de revista en la consola, dependiendo de la importancia (o gravedad) del mensaje que desea mostrar. En la captura de pantalla anterior, por ejemplo, vemos que el objeto de las consolas (objeto global cuyo propósito es ayudarnos a solucionar problemas) tiene diferentes métodos para escribir mensajes en la consola:

Depurar y registrar muestran mensajes simples.
La información muestra mensajes informativos. En Firefox muestra un icono de “información” cerca del mensaje.
Warn muestra advertencias que generalmente estresan un problema o algo que no está bien. Por lo general, se resalta con amarillo y un ícono de advertencia.
El error generalmente se reserva para los errores más graves (es decir, cosas que realmente fallaron). Se muestra con rojo y también imprime un rastro de pila (es decir, qué función ha generado el error y todos los que llaman).
La ventaja de usar diferentes niveles de diario es que podemos elegir en cualquier momento que los mensajes que queremos mostrar. Por ejemplo, en la siguiente captura de pantalla, he deshabilitado la información y los mensajes de depuración: la ventaja de usar diferentes niveles para los diferentes tipos de mensajes que puede mostrar en la consola es que puede filtrar los mensajes de acuerdo con su nivel, para que vea solo. Esos estás interesado. #2 Monitoreo de los tiempos de ejecución en ágil, a menudo escuchará esto: “Haz que funcione, hazlo bien, hazlo rápidamente”. Después de escribir un código “para que funcione”, no es poco probable que el resultado sea lento e ineficiente. Cuando esto sucede, es importante identificar dónde están los bloqueos y acercarse a ellos. Aunque hay herramientas como perfiladores para encontrar culpables y comprender exactamente lo que está sucediendo bajo el capó en detalle, a veces queremos una solución “rápida y sucia”. Quiero decir, simplemente queremos identificar la función más lenta en nuestro código … ¡y los cronómetros simples son excelentes en esta tarea!
Si desea saber cuánto dura una determinada pieza de código, inicie un cronómetro al comienzo del código (consolas.time) y pare (console.timeand) cuando termine el código: console.timer (‘temporizador’) ); // código que queremos monitorear … console.timeend (‘temporizador’); Cuando el código llega a la hora, verá la hora necesaria para ejecutar: Temporizador: 655ms – Temporizador finalizó que cuando comenzamos y detenemos un cronómetro, le damos un nombre (en mi ejemplo, “temporizador”). Esto se debe a que podemos crear cualquier medidor que queramos, cada uno con su propio nombre, y tenerlos todos simultáneamente.

# 3 medidores automáticos Si está interesado en controlar el número de ejecuciones de cualquier función en su código o registrar el número de rodamiento de un bucle, use consolas. Cada vez que se ejecute la función, recibirá un nuevo registro en su consola con el valor actual del medidor: medidores utilizando el método console.counter.
#4 Cómo formatear sus revistas Las revistas están aquí para ayudarnos a comprender lo que está sucediendo con nuestro código. Pero esto es posible solo si escribimos las revistas que podemos entender más tarde …
Hilas de texto Al comienzo de esta publicación, hablé brevemente sobre todos los métodos de revista que las consolas tienen. Los ejemplos que distribuimos han imprimido un texto simple. Me refiero a esta declaración:

console.log (‘¡Hola mundo!’); Impreso este texto: ¡Hola mundo! ¿Qué sucede si queremos imprimir un objeto? Bueno, esto: obj = {x: 1, y: {a: ‘hola’}}; console.log (obj); se convierte en esto:
Cómo mostrar un objeto en la consola.

Pero, ¿y si queremos grabar más cosas? ¿Tenemos que usar más llamadas para console.log? Bueno, la respuesta es no, no es necesario. Podemos grabar todo lo que queremos con una llamada:
Cómo escribir más variables (incluso diferentes tipos) en un solo mensaje de diario.

Agrupación de revistas … cuando comenzamos a tener muchas revistas en nuestro código (como aquí, aquí):
El resultado puede estar un poco confundido, porque todas las revistas se unen en un solo flujo de texto: recuperar x … recuperar y … calcula el resultado usando 2 y 3 obteniendo el resultado de valor máximo es 6 Afortunadamente, el objeto de las consolas ofrece algunas Métodos para resolver este problema: grupo y grupo. Con ellos, podemos agrupar nuestros mensajes de diario. Simplemente cree grupos (por ejemplo, un grupo por función): y aparecerán así:

Puede agrupar los mensajes del diario y, por lo tanto, facilitar la lectura.
Comidas Cuando trabajamos con colecciones de datos, no siempre es fácil verlas. Por ejemplo, imagine que tenemos una lista de elementos como los siguientes:
Data = [{Id: 1, nombre: ‘David’, Apellido: ‘Aguilera’, {id: 2, nombre: ‘Ruth’, Apellido: ‘Ravenos’}, {id: 3, nombre: ‘Antonio’, Apellido : ‘Villegas’},]; Si consolan.log, esto es lo que obtenemos:
Si escribe algún 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 experimenta este tipo de estructura de datos, le recomiendo usar console.table para registrarla:
Cuando tiene una recopilación de datos (generalmente objetos de una matriz), es mejor formatearlos como una tabla. #5 Cómo mostrar correctamente los tipos complejos (objetos y matriz) Finalmente, me gustaría finalizar la publicación hoy con algo que no muchos desarrolladores saben … Digamos, por ejemplo, que trabaja en un proyecto y que desea Vea cuál es el valor de un objeto antes y después de su actualización. Para hacer esto, es probable que console. Loge la variable antes de hacer el cambio y luego, como puede ver en el siguiente GIF: si registra un objeto, el resultado puede ser engañoso … Actualizar el objeto cambia a ¡Diario anterior!
En el ejemplo anterior, registramos un objeto que contiene un valor establecido en 1. Luego actualizamos el valor en 200 y nuevamente registramos el objeto. Esperamos que el primer registro muestre siempre el valor inicial (1), pero observe cómo, cuando extendemos el objeto, en realidad muestra el nuevo valor 200. ¿Qué sucede? Básicamente, un mensaje de revista tiene una referencia al objeto y, por lo tanto, cuando lo extendemos, nos muestra el objeto tal como es ahora y no como fue cuando se hizo la revista. ¡Maldita sea la mutabilidad! Para resolver este problema, solo envíe una copia en la revista (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 mover (porque no tendrá una referencia):

Si desea asegurarse de que lo que ve en el diario es el valor que el objeto tenía en el momento del diario, clonarlo antes.