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á pensado para completarse en orden. Se supone que comprendes los aspectos básicos del desarrollo web, por ejemplo, cómo usar 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. Si sigues físicamente la conversación, es más probable que más adelante recuerdes los flujos de trabajo.

1. Abre la demostración.

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

   

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

   

4. Opcional: Ancla las Herramientas para desarrolladores en la parte inferior de la ventana o desconéctalas en otra ventana.

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

   Herramientas para desarrolladores desconectadas en otra ventana:

Ver los mensajes registrados desde JavaScript

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

1. Haz clic en el botón Log Info en 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 causó que el mensaje se registrara en la consola.

   

   El mensaje se registró cuando el código JavaScript de la página llamó 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 Console esté enfocada.
   • 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 en la demostración. Abandon Hope All Ye Who Enter se registra en Console.

   

   Los mensajes con este formato son advertencias.

5. Opcional: Haz clic en log.js:12 para ver el código que generó el formato del mensaje y, luego, vuelve a Console cuando termines. Haz esto cuando quieras ver el código que provocó que un mensaje se registrara de cierta manera.

6. Haz clic en el ícono Expandir frente a Abandon Hope All Ye Who Enter. Las Herramientas para desarrolladores muestra 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 Error de registro. Se registra el siguiente mensaje de error: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Haz clic en Tabla de registros. Se registra en la consola una tabla sobre artistas famosos.

   

   Ten en cuenta que la columna birthday solo se propaga para una fila. Revisa el código para descubrir el motivo.

9. Haz clic en Grupo de registros. Los nombres de 4 tortugas luchadoras del crimen famosas se agrupan bajo la etiqueta Adolescent Irradiated Espionage Tortoises.

   

10. Haz clic en Registro personalizado. Un mensaje con un borde rojo y un fondo azul se registra en la consola.

    

La idea principal es que, cuando quieras registrar mensajes en Console desde tu código JavaScript, uses uno de los métodos console. Cada método da formato a los mensajes de manera diferente.

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

Ver los mensajes registrados por el navegador

El navegador también registra mensajes en la consola. Esto suele suceder cuando hay un problema con la página.

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

   

2. Haz clic en Causar error. El navegador registra un TypeError no detectado porque el JavaScript está intentando actualizar un nodo del DOM que no existe.

   

3. Haz clic en el menú desplegable Niveles de registro y habilita la opción Verbose si está inhabilitada. Aprenderás más sobre el filtrado en la siguiente sección. Debes hacer esto para asegurarte de que el siguiente 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. A continuación, filtra por origen del mensaje para obtener más información sobre la barra lateral de Console.

   

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

   

Cómo filtrar mensajes

En algunas páginas, verás que la consola está llena 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 filtra solo los mensajes de salida; todas las entradas que escribiste en Console 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 a nivel del Info, mientras que console.error() es un mensaje a nivel del Error.

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

Para filtrar por nivel de registro, haz lo siguiente:

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

   

2. Haz clic en el menú desplegable Niveles de registro y vuelve a habilitar los Errores. Volverán a aparecer los mensajes a nivel de Error.

Punto clave: La consola siempre recuerda el filtro desplegable que aplicas. Persiste en todas las páginas, así como en la página, Herramientas para desarrolladores y Chrome se vuelve a cargar. Para aplicar un filtro temporal rápidamente, usa la Barra lateral.

Filtrar por texto

Cuando solo desees ver los mensajes que incluyan una cadena exacta, escríbela en el cuadro de texto Filtro.

1. Escribe Dave en el cuadro de texto Filter. Se ocultan todos los mensajes que no incluyen la cadena Dave. También es posible que veas la etiqueta Adolescent Irradiated Espionage Tortoises. Eso es un error.

   

2. Borra Dave del cuadro de texto Filtro. Volverán a aparecer todos los mensajes.

Filtrar por expresión regular

Cuando desees mostrar todos los mensajes que incluyan un patrón de texto en lugar de una string específica, usa una expresión regular.

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

   

2. Borra /^[AH]/ del cuadro de texto Filtro. Vuelven a verse todos los mensajes.

Filtrar por fuente 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 y en las páginas, Herramientas para desarrolladores y Chrome.

1. Haz clic en Mostrar barra lateral de Console .

   

2. Haz clic en el ícono Expandir junto a 12 mensajes. La Barra lateral muestra una lista de las URLs que provocaron el registro de los mensajes. Por ejemplo, log.js generó 11 mensajes.

   

Filtrar por mensajes de los usuarios

Anteriormente, cuando hacías clic en Log Info, una secuencia de comandos llamada console.log('Hello, Console!') para registrar el mensaje en la consola. Los mensajes que se registran desde JavaScript como este se llaman mensajes del usuario. Por el contrario, cuando hiciste clic en la Causa 404, el navegador registró un mensaje de nivel Error que indica que no se pudo encontrar el recurso solicitado. Este tipo de mensajes se consideran mensajes de navegador. Puedes usar la Barra lateral para filtrar los mensajes del navegador y mostrar solo los mensajes de los usuarios.

1. Haz clic en 9 mensajes de usuario. Los mensajes del navegador están ocultos.

   

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

Usa Console junto con cualquier otro panel

¿Qué sucede si quieres editar estilos, pero necesitas buscar rápidamente en el registro de la consola? 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 Console que usaste durante este instructivo.

   

Próximos pasos

Felicitaciones, completaste el instructivo. Haz clic en Dispensar trofeo para recibir el trofeo.

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