En este instructivo interactivo, se muestra cómo registrar y filtrar mensajes en la consola de las herramientas para desarrolladores de Chrome.
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.
- Abre la demostración.
Opcional: Mueve la demostración a otra ventana. En este ejemplo, el instructivo está a la izquierda y la demostración, a la derecha.
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 ancladas en la parte inferior de la demostración:
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.
Haz clic en el botón Log Info en la demostración.
Hello, Console!
se registra en la consola.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.El mensaje se registró cuando el JavaScript de la página llamó a
console.log('Hello, Console!')
.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.
Haz clic en el botón Log Warning en la demostración.
Abandon Hope All Ye Who Enter
se registra en Console.Los mensajes que tienen un formato como este son advertencias.
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.
Haz clic en el ícono Expandir frente a
Abandon Hope All Ye Who Enter
. 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 llamadaquoteDante
. 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 aconsole.trace()
.Haz clic en Log Error. Se registra el siguiente mensaje de error:
I'm sorry, Dave. I'm afraid I can't do that.
Haz clic en Tabla de registros. Se registra una tabla sobre artistas famosos en la consola.
Observa que la columna
birthday
solo se propaga para una fila. Revisa el código para averiguar a qué se debe.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
.Haz clic en Log Custom. Se registra un mensaje con un borde rojo y un fondo azul en Console.
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.
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.Haz clic en Causa del error. El navegador registra un
TypeError
no detectado porque JavaScript intenta actualizar un nodo del DOM que no existe.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.
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.
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:
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.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.
Escribe
Dave
en el cuadro de texto Filtrar. Se ocultarán todos los mensajes que no incluyan la stringDave
. También es posible que veas la etiquetaAdolescent Irradiated Espionage Tortoises
. Este es un error.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.
Escribe
/^[AH]/
en el cuadro de texto Filtrar. Escribe este patrón en RegExr para obtener una explicación de lo que hace.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.
Haz clic en Mostrar barra lateral de la consola .
Haz clic en el ícono 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.
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.
Haz clic en 9 mensajes del usuario. Los mensajes del navegador están ocultos.
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.
- Haz clic en la pestaña Elementos.
Presiona Escape. Se abrirá la pestaña Console del panel lateral. Incluye todas las funciones de Console que usaste durante este instructivo.
Próximos pasos
¡Felicitaciones! Completaste el instructivo. Haz clic en Dispensar trofeo para recibirlo.
- 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 demostraron en Cómo ver los mensajes registrados desde JavaScript y explorar los otros métodosconsole
que no se trataron en este instructivo. - Consulta Comenzar para explorar qué más puedes hacer con Herramientas para desarrolladores.
- Consulta Formato y estilo de los mensajes en Console para obtener más información sobre todos los métodos de formato y estilo
console
.