Registrar mensajes en Console

Kayce Basques
Kayce Basques

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

Mensajes en la consola

Este instructivo está diseñado para que lo completes en orden. Se da por sentado que comprendes los aspectos básicos del desarrollo web, como 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. Cuando los 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 a la izquierda y la demostración a la derecha.

  3. Enfócate en la demostración y, luego, presiona Control+Mayúsculas+J o Comando+Opción+J (Mac) para abrir DevTools. De forma predeterminada, DevTools se abre a la derecho de la demostración.

    Se abrirán las herramientas para desarrolladores a la derecha de la demostración.

  4. Opcional: Ancla DevTools en la parte inferior de la ventana o desancla en una ventana separada.

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

    DevTools desanclada en otra ventana: DevTools se desancla en otra ventana.

Cómo ver los mensajes registrados desde JavaScript

La mayoría de los mensajes que ves en Console provienen de los 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 es probable que veas en Console y explicarte cómo puedes registrar cada tipo de mensaje desde tu propio código 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. Se abrirá el panel Sources y se destacará la línea de código que causó que el mensaje se registrara en la consola.

    Las Herramientas para desarrolladores abren el panel Sources después de que haces clic en log.js:2.

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

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

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

    La consola después de hacer clic en Log Warning

    Los mensajes con este formato son advertencias.

  5. Opcional: Haz clic en log.js:12 para ver el código que causó que el mensaje tenga este formato y, luego, vuelve a Consola cuando termines. Haz esto cada vez que quieras ver el código que causó que un mensaje se registrara de una manera determinada.

  6. Haz clic en el ícono Expandir Expandir. frente a Abandon Hope All Ye Who Enter. DevTools muestra el seguimiento de pila que conduce 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 produjo 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 Registrar 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 cómo la columna birthday solo se propaga para una fila. Revisa el código para descubrir por qué.

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

    Es un grupo de mensajes en la consola.

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

    Un mensaje con formato personalizado en Play Console.

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

Hay aún 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.

Cómo ver los mensajes registrados por el navegador

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

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

    Un error 404 en Console

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

    Un TypeError en la consola

  3. Haz clic en el menú desplegable Niveles de registro y habilita la opción Detallada 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 de mensajes a continuación para obtener más información sobre la barra lateral de Console.

    Habilita el nivel de registro detallado.

  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.

    Un incumplimiento en Play Console

Cómo filtrar mensajes

En algunas páginas, verás que Console se inunda de mensajes. DevTools proporciona 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 de nivel Info, mientras que console.error() es un mensaje de nivel Error.

Para filtrar por nivel de registro, sigue estos pasos:

  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 de Error.

    Inhabilitar los mensajes a nivel de error en la consola

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

Filtrar por texto

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

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

    Filtra cualquier mensaje que no incluya "Dave".

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

Cómo filtrar por expresión regular

Cuando quieras mostrar todos los mensajes que incluyan un patrón de texto, en lugar de una cadena 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.

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

  2. Borra /^[AH]/ del cuadro de texto Filtrar. Todos los mensajes volverán a estar visibles.

Filtrar por fuente del mensaje

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

  1. Haz clic en Mostrar la 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. En la barra lateral, se muestra una lista de las URLs que provocaron que se registraran los mensajes. Por ejemplo, log.js generó 11 mensajes.

    Visualizar la fuente de los mensajes en la barra lateral

Filtrar por mensajes del usuario

Antes, cuando hiciste clic en Log Info, se llamó a una secuencia de comandos llamada console.log('Hello, Console!') para registrar el mensaje en Play Console. Los mensajes registrados desde JavaScript de esta manera se denominan mensajes del usuario. En cambio, cuando hiciste clic en Causa 404, el navegador registró un mensaje a nivel de Error que indicaba que no se pudo encontrar el recurso solicitado. Los mensajes de este tipo 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. Los mensajes del navegador están ocultos.

    Filtra los mensajes del navegador.

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

Usa Console junto con cualquier otro panel

¿Qué sucede si estás editando estilos, pero necesitas buscar algo rápidamente en el registro de Console? Usa el Drawer.

  1. Haz clic en la pestaña Elementos.
  2. Presiona Escape. Se abrirá la pestaña Consola del Panel. Tiene todas las funciones de Console que usaste a lo largo de este instructivo.

    La pestaña **Consola** en el panel lateral.

Próximos pasos

Felicitaciones, completaste el instructivo. Haz clic en Dispense Trophy para recibir tu trofeo.