Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Uso de Console

Obtén más información sobre cómo abrir Console de DevTools, apilar mensajes redundantes o mostrarlos en sus propias líneas, borrar o conservar resultados o guardarlos en un archivo, filtrar resultados y acceder a la configuración adicional de Console.

TL;DR

  • Abre Console como un panel dedicado o como un panel lateral junto a cualquier otro panel.
  • Apila mensajes redundantes o muéstralos en sus propias líneas.
  • Borra o conserva resultados entre páginas o guárdalos en un archivo.
  • Filtra los resultados por nivel de gravedad, ocultando los mensajes de la red o por patrones de expresiones regulares.

Apertura de Console

Accede a Console como un panel dedicado en pantalla completa.

Console como panel

También puedes acceder a Console como un panel lateral que se abre junto a cualquier otro panel.

Console como panel lateral

Abrir como panel

Para abrir el panel Console dedicado, puedes hacer esto:

  • Presiona Ctrl+Shift+J (Windows o Linux) o Cmd+Opt+J (Mac).
  • Si DevTools ya está abierto, presiona el botón Console.

Cuando abres el panel Console, el panel lateral Console se contrae automáticamente.

Abrir como panel lateral

Para abrir Console como un panel lateral junto a cualquier otro panel, puedes hacer esto:

  • Presiona Esc mientras DevTools esté seleccionada.
  • Presiona el botón Customize and control DevTools y luego presiona Show console.

Show console

Apilamiento de mensajes

Si un mensaje se repite consecutivamente, en lugar de imprimir cada instancia del mensaje en una línea nueva, Console "apila" los mensajes y muestra un número en el margen izquierdo. El número indica cuántas veces se repitió el mensaje.

Apilamiento de mensajes

Si prefieres una entrada de una sola línea por cada registro, habilita Show timestamps en la configuración de DevTools.

Show timestamps

Como la marca de tiempo de cada mensaje es diferente, cada mensaje se muestra en su propia línea.

Console con marcas de tiempo

Trabajo con el historial de Console

Borrar el historial

Puedes borrar el historial de la consola con cualquiera de los siguientes métodos:

  • Haz clic con el botón secundario en la consola y selecciona Clear console.
  • Ingresa clear() en la consola.
  • Llama a console.clear() en tu código JavaScript.
  • Escribe Ctrl+L (Mac, Windows, Linux).

Conservar el historial

Habilita la casilla de verificación Preserve log en la parte superior de Console para conservar el historial de Console entre actualizaciones y cambios de páginas. Los mensajes se guardarán hasta que borres la consola o cierres la pestaña.

Guardar el historial

Haz clic con el botón secundario en Console y selecciona Save as para guardar el resultado de la consola en un archivo de registro.

Guardar el resultado de Console en un archivo de registro

Elegir el contexto de ejecución

El menú desplegable destacado en azul en la captura de pantalla a continuación se denomina selector de contexto de ejecución.

Selector de contexto de ejecución

Por lo general, verás el contexto establecido en top (el marco superior de la página).

Otros marcos y extensiones funcionan en su propio contexto. Para trabajar con estos otros contextos, debes seleccionarlos en el menú desplegable. Por ejemplo, si deseas ver el resultado del registro de un elemento <iframe> y modificar una variable que existe en ese contexto, debes seleccionar el contexto en el menú desplegable del selector de contexto de ejecución.

Console muestra de manera predeterminada el contexto top, a menos que accedas a DevTools inspeccionando un elemento dentro de otro contexto. Por ejemplo, si inspeccionas un elemento <p> dentro de <iframe>, DevTools establece el selector de contexto de ejecución en el contexto de ese <iframe>.

Cuando trabajas en un contexto que no es top, DevTools destaca el selector de contexto de ejecución en rojo, como se muestra en la siguiente captura de pantalla. Esto se debe a que no es usual que los programadores tengan que trabajar en otro contexto que no sea top. Puede ser muy confuso escribir una variable, esperando que se genere un valor, y ver que el valor mostrado es undefined (porque está definido en otro contexto).

Selector de contexto de ejecución destacado en rojo

Filtrado de los resultados de Console

Haz clic en el botón Filter (Botón filter) para filtrar el resultado de Console. Puedes filtrar por nivel de gravedad, por una expresión regular u ocultando los mensajes de la red.

Resultado filtrado de Console

Filtrar por nivel de gravedad equivale a lo siguiente:

Opción y lo que muestra
Todos Muestra todos los resultados de Console.
Errors Solo muestra los resultados de console.error().
Warnings Solo muestra los resultados de console.warn().
Info Solo muestra los resultados de console.info().
Logs Solo muestra los resultados de console.log().
Debug Solo muestra los resultados de console.timeEnd() y console.debug().

Configuración adicional

Abre la configuración de DevTools, ve a la pestaña General y baja hasta la sección Console para ver otra configuración de Console.

Configuración de Console

Configuración y descripción
Hide network messages De manera predeterminada, la consola informa los problemas de la red. Si activas esta configuración, la consola no mostrará los registros de estos errores. Por ejemplo, no se registrarán los errores 404 y 500.
Log XMLHttpRequests Determina si la consola registra cada XMLHttpRequest.
Preserve log upon navigation Conserva el historial de la consola durante las actualizaciones de las páginas o mientras se las recorre.
Show timestamps Antepone una marca de tiempo a cada mensaje de la consola que muestra cuándo se realizó la llamada. Es útil para realizar depuraciones de un evento en particular. Esto inhabilitará el apilamiento de mensajes.
Enable custom formatters Controla el formato de los objetos de JavaScript.