Registrar mensajes en Console

Kayce Basques

En este instructivo interactivo, se muestra cómo registrar y filtrar mensajes en la consola de Herramientas para desarrolladores de Chrome.

Este instructivo está diseñado para completarse en orden. Se supone que comprendes los aspectos fundamentales del desarrollo web, como el uso de JavaScript para agregar interactividad a una página.

Configura la demostración y las Herramientas para desarrolladores

Este instructivo está diseñado para que puedas abrir la demostración y probar todos los flujos de trabajo por tu cuenta. Cuando sigues los pasos físicamente, es más probable que recuerdes los flujos de trabajo más adelante.

1. Abre la demostración.

2. Opcional: Mueve la demostración a otra ventana. En este ejemplo, el instructivo está a la izquierda y la demostración a la derecha.

   

3. Enfoca la demostración y, luego, presiona Control+Mayúsculas+J o Comando+Opción+J (Mac) para abrir las Herramientas para desarrolladores. De forma predeterminada, las Herramientas para desarrolladores se abren a la derecha de la demostración.

   

4. Opcional: Ancla las Herramientas para desarrolladores en la parte inferior de la ventana o desanclarlas en una ventana separada.

   Herramientas para desarrolladores anclado en la parte inferior de la demostración:

   Herramientas para desarrolladores desanclado en una ventana separada:

Visualiza los mensajes registrados desde JavaScript

La mayoría de los mensajes que ves en la consola provienen de los desarrolladores web que escribieron el JavaScript de la página. El objetivo de esta sección es presentarte los diferentes tipos de mensajes que es probable que veas en la consola y explicar cómo puedes registrar cada tipo de mensaje desde tu propio JavaScript.

1. Haz clic en el botón Log Info de la demostración. Hello, Console! se registra en la consola.

   

2. Junto al mensaje Hello, Console! en la consola, haz clic en log.js:2. Se abrirá el panel Fuentes y se destacará la línea de código que hizo que el mensaje se registrara en la consola.

   

   El mensaje se registró cuando el JavaScript de la página llamó a console.log('Hello, Console!').

3. Vuelve a la consola con cualquiera de los siguientes flujos de trabajo:

   • Haz clic en la pestaña Consola.
   • Presiona Control+[ o Comando+[ (Mac) hasta que la consola esté en primer plano.
   • Abre el menú de comandos, comienza a escribir Console, selecciona el comando Mostrar panel de la consola y, luego, presiona Intro.

4. Haz clic en el botón Log Warning de la demostración. Abandon Hope All Ye Who Enter se registra en la consola.

   

   Los mensajes con este formato son advertencias.

5. Opcional: Haz clic en log.js:12 para ver el código que hizo que el mensaje se formateara de esta manera y, luego, vuelve a la consola cuando termines. Haz esto cada vez que quieras ver el código que hizo que un mensaje se registrara de una manera determinada.

6. Haz clic en el ícono Expandir delante de Abandon Hope All Ye Who Enter. Las Herramientas para desarrolladores muestran el seguimiento de pila que lleva a la llamada.

   

   El seguimiento de pila te indica que se llamó a una función llamada logWarning, que, a su vez, llamó a una función llamada quoteDante. En otras palabras, la llamada que ocurrió primero está en la parte inferior del seguimiento de pila. Puedes registrar seguimientos de pila en cualquier momento llamando a console.trace().

7. Haz clic en Log Error. Se registra el siguiente mensaje de error: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Haz clic en Log Table. Se registra en la consola una tabla sobre artistas famosos.

   

   Observa cómo la columna birthday solo se propaga para una fila. Consulta el código para averiguar por qué.

9. Haz clic en Log Group. Los nombres de 4 tortugas famosas que luchan contra el crimen se agrupan bajo la etiqueta Adolescent Irradiated Espionage Tortoises.

   

10. Haz clic en Log Custom. Se registra en la consola un mensaje con un borde rojo y un fondo azul.

    

La idea principal aquí es que, cuando quieras registrar mensajes en la consola desde tu JavaScript, uses uno de los métodos console. Cada método formatea los mensajes de manera diferente.

Hay incluso más métodos que los que se demostraron en esta sección. Al final del instructivo, aprenderás a explorar el resto de los métodos.

Visualiza los mensajes registrados por el navegador

El navegador también registra mensajes en la consola. Por lo general, esto sucede cuando hay un problema con la página.

1. Haz clic en Cause 404. El navegador registra un error de red 404 porque el JavaScript de la página intentó recuperar un archivo que no existe.

   

2. Haz clic en Cause Error. El navegador registra un TypeError no detectado porque JavaScript intenta actualizar un nodo DOM que no existe.

   

3. Haz clic en el menú desplegable Niveles de registro y habilita la opción Detallado si está inhabilitada. Obtendrás más información sobre el filtrado en la siguiente sección. Debes hacer esto para asegurarte de que el próximo mensaje que registres sea visible. Nota: Si el menú desplegable Niveles predeterminados está inhabilitado, es posible que debas cerrar la barra lateral de la consola. Filtra por origen del mensaje a continuación para obtener más información sobre la barra lateral de la consola.

   

4. Haz clic en Cause Violation. La página deja de responder durante unos segundos y, luego, el navegador registra el mensaje [Violation] 'click' handler took 3000ms en la consola. La duración exacta puede variar.

   

Cómo filtrar mensajes

En algunas páginas, verás que la consola se inunda de mensajes. Las Herramientas para desarrolladores proporcionan muchas formas diferentes de filtrar los mensajes que no son relevantes para la tarea en cuestión.

Punto clave: La consola solo filtra los mensajes de salida. Todas las entradas que escribiste en la consola permanecen allí.

Filtra por nivel de registro

A cada método console.* se le asigna un nivel de gravedad: Verbose, Info, Warning o Error. Por ejemplo, console.log() es un mensaje de nivel Info, mientras que console.error() es un mensaje de nivel Error.

Nota: Para obtener una lista completa de los métodos console.* y sus niveles de gravedad, consulta la referencia de la API de la consola.

Para filtrar por nivel de registro, haz lo siguiente:

1. Haz clic en el menú desplegable Niveles de registro y inhabilita Errores. Un nivel se inhabilita cuando ya no hay una marca de verificación junto a él. Desaparecen los mensajes de nivel Error.

   

2. Vuelve a hacer clic en el menú desplegable Niveles de registro y vuelve a habilitar Errores. Reaparecen los mensajes de nivel Error.

Punto clave: La consola siempre recuerda el filtro del menú desplegable que aplicas. Se mantiene en todas las páginas, así como en las recargas de páginas, Herramientas para desarrolladores y Chrome. Para aplicar rápidamente un filtro temporal, usa la barra lateral.

Filtrar por texto

Cuando quieras ver solo los mensajes que incluyen una cadena exacta, escribe esa cadena en el cuadro Filtro.

1. Escribe Dave en el cuadro Filtro. Se ocultan todos los mensajes que no incluyen la cadena Dave.

   

2. Borra Dave del cuadro Filtro. Reaparecen todos los mensajes.

Filtrar por expresión regular

Cuando quieras mostrar todos los mensajes que incluyen un patrón de texto, en lugar de una cadena específica, usa una expresión regular.

1. Escribe /^[AH]/ en el cuadro Filtro. Escribe este patrón en RegExr para obtener una explicación de lo que hace.

   

2. Borra /^[AH]/ del cuadro Filtro. Todos los mensajes vuelven a estar visibles.

Filtrar por origen del mensaje

Cuando quieras ver solo los mensajes que provienen de una URL determinada, usa la barra lateral.

Punto clave: Los filtros de la barra lateral son temporales. La consola no conserva esos filtros en todas las páginas, así como en las recargas de páginas, Herramientas para desarrolladores y Chrome.

1. Haz clic en Mostrar barra lateral de la consola .

   

2. Haz clic en el ícono Expandir junto a 12 mensajes. La barra lateral muestra una lista de URLs que hicieron que se registraran mensajes. Por ejemplo, log.js causó 11 mensajes.

   

Filtrar por mensajes del usuario

Anteriormente, cuando hiciste clic en Log Info, una secuencia de comandos llamó a console.log('Hello, Console!') para registrar el mensaje en la consola. Los mensajes registrados desde JavaScript como este se denominan mensajes del usuario. Por el contrario, cuando hiciste clic en Cause 404, el navegador registró un mensaje de nivel Error que indicaba que no se pudo encontrar el recurso solicitado. Los mensajes como ese se consideran mensajes del navegador. Puedes usar la barra lateral para filtrar los mensajes del navegador y mostrar solo los mensajes del usuario.

1. Haz clic en 9 mensajes del usuario. Se ocultan los mensajes del navegador.

   

2. Haz clic en 12 mensajes para volver a mostrar todos los mensajes.

Usa la consola junto con cualquier otro panel

¿Qué sucede si editas estilos, pero necesitas verificar rápidamente el registro de la consola para algo? Usa el panel lateral.

1. Haz clic en la pestaña Elementos.

2. Presiona Escape. Se abrirá la pestaña Consola del panel lateral. Tiene todas las funciones de la consola que usaste durante este instructivo.

   

Próximos pasos

Felicitaciones. Completaste el instructivo. Haz clic en Entregar trofeo para recibirlo.

• Consulta la referencia de la consola para explorar más funciones y flujos de trabajo relacionados con la IU de la consola.
• Consulta la referencia de la API de la consola para obtener más información sobre todos los métodos console que se demostraron en Visualiza los mensajes registrados desde JavaScript y explora los otros métodos console que no se abordaron en este instructivo.
• Consulta Cómo comenzar para explorar qué más puedes hacer con las Herramientas para desarrolladores.
• Consulta Cómo dar formato y aplicar estilo a los mensajes en la consola para obtener más información sobre todos los métodos de formato y estilo console.