Registrar mensajes en Console

Kayce vascos
Kayce Vascos

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

Mensajes en la consola.

El objetivo de este instructivo es completarlo en orden. Se supone que comprendes los aspectos básicos del desarrollo web, como el uso de JavaScript para agregar interactividad a una página.

Configurar la demostración y 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, 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.

    Este instructivo está 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 Herramientas para desarrolladores. De forma predeterminada, Herramientas para desarrolladores se abre a la derecha de la demostración.

    Herramientas para desarrolladores se abre a la derecha de la demostración.

  4. Opcional: Puedes conectar Herramientas para desarrolladores en la parte inferior de la ventana o desconéctala de otra ventana.

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

    Se desancló Herramientas para desarrolladores en otra ventana: Se desancló Herramientas para desarrolladores en otra ventana.

Ver mensajes registrados desde JavaScript

La mayoría de los mensajes que ves en la consola 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 Console y explicar cómo puedes registrar cada uno desde tu propio JavaScript.

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

    La consola después de hacer clic en Información de registro.

  2. Junto al mensaje Hello, Console! en Console, haz clic en log.js:2. El panel Fuentes (Sources) se abre y destaca la línea de código que provocó que el mensaje se registrara en Console.

    Herramientas para desarrolladores abre el panel Sources después de hacer clic en log.js:2.

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

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

    • Haz clic en la pestaña Consola.
    • Presiona Control + [ o Comando + [ (Mac) hasta que la consola esté enfocada.
    • Abre el menú de comandos, comienza a escribir Console, selecciona el comando Mostrar panel de 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.

    en la consola después de hacer clic en Log Warning.

    Los mensajes que tienen un formato como este son advertencias.

  5. Opcional: Haz clic en log.js:12 para ver el código que provocó que el mensaje tuviera un formato como este y, luego, vuelve a Console cuando termines. Haz esto cuando quieras ver el código que hizo que se registrara un mensaje de una manera determinada.

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

    Un seguimiento de pila

    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 se realizó 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.

    Un mensaje de error.

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

    Una tabla en la consola.

    Observa que la columna birthday solo se propaga para una fila. Revisa el código para averiguar a qué se debe.

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

    Un grupo de mensajes en la consola.

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

    Un mensaje con formato personalizado en la consola.

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

Existen incluso más métodos de los que se demostraron 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 los mensajes en la consola. Esto suele suceder cuando hay un problema con la página.

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

    Un error 404 en la consola

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

    Un TypeError en la consola.

  3. Haz clic en el menú desplegable Niveles de registro y habilita la opción Detallar si está inhabilitada. Obtendrás más información sobre el filtrado en la siguiente sección. Debes hacerlo 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. Filtra por fuente del mensaje a continuación para obtener más información sobre la barra lateral de la consola.

    Habilita el nivel de registro detallado.

  4. Haz clic en Causa del incumplimiento. 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.

    Un incumplimiento en la consola.

Cómo filtrar mensajes

En algunas páginas, verás que la Consola está llena de mensajes. Las Herramientas para desarrolladores ofrecen muchas formas diferentes de filtrar los mensajes que no son relevantes para la tarea en cuestión.

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 Info, mientras que console.error() es un mensaje a nivel Error.

Para filtrar por nivel de registro, haz lo siguiente:

  1. Haz clic en el menú desplegable Niveles de registro y, luego, inhabilita los Errores. Los niveles se inhabilitan cuando ya no hay una marca de verificación junto a ellos. Los mensajes a nivel del Error desaparecen.

    Inhabilitación de los mensajes de nivel de error en la consola.

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

Filtrar por texto

Cuando solo quieras ver los mensajes que incluyen una string exacta, escríbela en el cuadro de texto Filtro.

  1. Escribe Dave en el cuadro de texto Filtrar. Se ocultarán todos los mensajes que no incluyan la string Dave. También es posible que veas la etiqueta Adolescent Irradiated Espionage Tortoises. Este es un error.

    Se filtra cualquier mensaje que no incluya "Dave".

  2. Borra Dave del cuadro de texto Filtrar. 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 Filtrar. Escribe este patrón en RegExr para obtener una explicación de lo que hace.

    Filtrado de cualquier mensaje que no coincida con el patrón "/^[AH]/".

  2. Borra /^[AH]/ del cuadro de texto Filtrar. Se volverán a ver todos los mensajes.

Filtrar por fuente del mensaje

Si solo quieres ver los mensajes que provienen de una URL determinada, usa la Barra lateral.

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

    La barra lateral

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

    Visualización del origen de los mensajes en la barra lateral

Filtrar por mensajes del usuario

Anteriormente, cuando hiciste clic en Información de registro, una secuencia de comandos llamada console.log('Hello, Console!') a fin de registrar el mensaje en Console. Los mensajes registrados de JavaScript como este se denominan mensajes del usuario. Por el contrario, cuando hiciste clic en Causa 404, el navegador registraba un mensaje a nivel de Error que indicaba que no se pudo encontrar el recurso solicitado. Este tipo de mensajes se consideran mensajes del 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 del usuario. Los mensajes del navegador están ocultos.

    Filtrado de 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 revisar rápidamente el registro de Console para buscar algo? Usa el panel lateral.

  1. Haz clic en la pestaña Elementos.
  2. Presiona Escape. Se abrirá la pestaña Console del panel lateral. Incluye todas las funciones de Console que usaste durante este instructivo.

    La pestaña **Console** del Panel lateral.

Próximos pasos

¡Felicitaciones! Completaste el instructivo. Haz clic en Dispensar trofeo para recibirlo.