Referencia de las funciones de la consola

En esta página, se hace referencia a las funciones relacionadas con la consola de las Herramientas para desarrolladores de Chrome. Se supone que ya sabes cómo usar la consola para ver los mensajes registrados y ejecutar JavaScript. Si no es así, consulta Cómo comenzar.

Si buscas la referencia de la API sobre funciones como console.log(), consulta la Referencia de la API de Console. Para obtener información de referencia sobre funciones como monitorEvents(), consulta la referencia de la API de Console Utilities.

Abre la consola

Puedes abrir la consola como un panel o como una pestaña en el panel lateral.

Abre el panel de la consola

Presiona Control + Mayúsculas + J o Comando + Opción + J (Mac).

Para abrir la consola desde el menú de comandos, comienza a escribir Console y, luego, ejecuta el comando Show Console que tiene la insignia Panel junto a él.

Cómo abrir la consola en el panel

Presiona Escape o haz clic en Personalizar y controlar DevTools y, luego, selecciona Mostrar panel de la consola.

El panel se abrirá en la parte inferior de la ventana de Herramientas para desarrolladores, con la pestaña Console abierta.

Para abrir la pestaña Console desde el menú de comandos, comienza a escribir Console y, luego, ejecuta el comando Show Console que tiene la insignia Drawer junto a él.

Abrir la configuración de la consola

Haz clic en Configuración de la consola en la esquina superior derecha de la Consola.

En los siguientes vínculos, se explica cada parámetro de configuración:

• Ocultar red
• Guardar el registro
• Solo el contexto seleccionado
• Agrupar mensajes similares en la consola
• Mostrar errores de CORS en la consola
• Registrar XMLHttpRequests
• Evaluación eager
• Autocompletar con el historial

Cómo abrir la barra lateral de la consola

Haz clic en Mostrar la barra lateral de la consola para mostrar la barra lateral, que es útil para filtrar.

Ver los mensajes

En esta sección, se incluyen funciones que cambian la forma en que se presentan los mensajes en la consola. Consulta Cómo ver mensajes para obtener una explicación práctica.

Inhabilita la agrupación de mensajes

Abre la configuración de la consola y deshabilita Agrupar similares para inhabilitar el comportamiento predeterminado de agrupación de mensajes de la consola. Consulta Cómo registrar solicitudes de XHR y Fetch para ver un ejemplo.

Cómo ver mensajes de puntos de interrupción

La consola marca los mensajes activados por los puntos de interrupción de la siguiente manera:

• Llamadas de console.* en puntos de interrupción condicionales con un signo de interrogación naranja ?
• Mensajes de punto de registro con dos puntos rosas ..

Para ir al editor de puntos de interrupción intercalado en el panel Fuentes, haz clic en el vínculo de anclaje junto al mensaje del punto de interrupción.

Cómo ver seguimientos de pila

La consola captura automáticamente los seguimientos de pila para los errores y las advertencias. Un seguimiento de pila es un historial de las llamadas a funciones (marcos) que provocaron el error o la advertencia. La consola los muestra en orden inverso: el fotograma más reciente está en la parte superior.

Para ver un seguimiento de pila, haz clic en el ícono de expansión junto a un error o una advertencia.

Cómo ver las causas de los errores en los seguimientos de pila

La consola puede mostrarte cadenas de causas de errores en el seguimiento de pila, si las hay.

Para facilitar la depuración, puedes especificar las causas de los errores cuando los detectes y los vuelvas a arrojar. A medida que la consola recorre la cadena de causas, imprime cada pila de errores con un prefijo Caused by: para que puedas encontrar el error original.

Cómo ver seguimientos de pila asíncronos

Si el framework que usas lo admite o cuando usas directamente primitivas de programación del navegador, como setTimeout, DevTools puede hacer un seguimiento de las operaciones asíncronas vinculando ambas partes del código asíncrono.

En este caso, el seguimiento de pila muestra el "historial completo" de la operación asíncrona.

Mostrar los marcos conocidos de terceros en los seguimientos de pila

Cuando los mapas de origen incluyen el campo ignoreList, de forma predeterminada, la consola oculta de los seguimientos de pila los marcos de terceros de las fuentes generadas por los bundlers (por ejemplo, webpack) o los frameworks (por ejemplo, Angular).

Para ver el seguimiento de pila completo, incluidos los marcos de terceros, haz clic en Mostrar N marcos más en la parte inferior del seguimiento de pila.

Para ver siempre el seguimiento de pila completo, inhabilita el parámetro de configuración Configuración > Lista de elementos ignorados > Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista.

Registra las solicitudes de XHR y Fetch

Abre la configuración de la consola y habilita Registrar XMLHttpRequests para registrar todas las solicitudes XMLHttpRequest y Fetch en la consola a medida que se producen.

El mensaje superior del ejemplo anterior muestra el comportamiento de agrupación predeterminado de la consola. En el siguiente ejemplo, se muestra cómo se ve el mismo registro después de inhabilitar la agrupación de mensajes.

Cómo conservar los mensajes entre las cargas de página

De forma predeterminada, la consola se borra cada vez que cargas una página nueva. Para conservar los mensajes entre las cargas de página, abre la configuración de la consola y, luego, habilita la casilla de verificación Conservar registro.

Ocultar mensajes de la red

De forma predeterminada, el navegador registra los mensajes de red en la consola. Por ejemplo, el mensaje superior del siguiente ejemplo representa un error 404.

Para ocultar los mensajes de la red, haz lo siguiente:

1. Abre la Configuración de la consola.
2. Habilita la casilla de verificación Ocultar red.

Cómo mostrar u ocultar errores de CORS

La consola puede mostrar errores de CORS si las solicitudes de red fallan debido al uso compartido de recursos entre dominios (CORS).

Para mostrar u ocultar los errores de CORS, haz lo siguiente:

1. Abre la Configuración de la consola.
2. Marca o desmarca la casilla de verificación Mostrar errores de CORS en la consola.

Si la consola está configurada para mostrar errores de CORS y los encuentras, puedes hacer clic en los siguientes botones junto a los errores:

• para abrir la solicitud con un TypeError relacionado con CORS en el panel Red
• para obtener una posible solución en la pestaña Problemas

Cómo filtrar mensajes

Existen muchas formas de filtrar los mensajes en la consola.

Cómo filtrar los mensajes del navegador

Abre la barra lateral de la consola y haz clic en Mensajes del usuario para mostrar solo los mensajes que provienen del JavaScript de la página.

Filtra por nivel de registro

Las Herramientas para desarrolladores asignan niveles de gravedad a la mayoría de los métodos de console.*.

Existen cuatro niveles:

• Verbose
• Info
• Warning
• Error

Por ejemplo, console.log() está en el grupo Info, mientras que console.error() está en el grupo Error. En la Referencia de la API de la consola, se describe el nivel de gravedad de cada método aplicable.

Cada mensaje que el navegador registra en la consola también tiene un nivel de gravedad. Puedes ocultar cualquier nivel de mensajes que no te interesen. Por ejemplo, si solo te interesan los mensajes de Error, puedes ocultar los otros 3 grupos.

Haz clic en el menú desplegable Niveles de registro para habilitar o inhabilitar los mensajes Verbose, Info, Warning o Error.

También puedes filtrar por nivel de registro abriendo la barra lateral de la consola y, luego, haciendo clic en Errores, Advertencias, Información o Detallado.

Cómo filtrar mensajes por URL

Escribe url: seguido de una URL para ver solo los mensajes que provienen de esa URL. Después de escribir url:, las Herramientas para desarrolladores muestran todas las URLs pertinentes.

Los dominios también funcionan. Por ejemplo, si https://example.com/a.js y https://example.com/b.js registran mensajes, url:https://example.com te permite enfocarte en los mensajes de estos 2 secuencias de comandos.

Para ocultar todos los mensajes de una URL específica, escribe -url: seguido de la URL, por ejemplo, https://b.wal.co. Este es un filtro de URL negativo.

También puedes mostrar mensajes de una sola URL abriendo la barra lateral de la consola, expandiendo la sección Mensajes del usuario y, luego, haciendo clic en la URL de la secuencia de comandos que contiene los mensajes en los que deseas enfocarte.

Filtrar mensajes de diferentes contextos

Supongamos que tienes un anuncio en tu página. El anuncio está integrado en un <iframe> y genera muchos mensajes en la consola. Como este anuncio se encuentra en un contexto de JavaScript diferente, una forma de ocultar sus mensajes es abrir la Configuración de la consola y habilitar la casilla de verificación Solo contexto seleccionado.

Cómo filtrar los mensajes que no coinciden con un patrón de expresión regular

Escribe una expresión regular, como /[foo]\s[bar]/, en el cuadro de texto Filtro para filtrar los mensajes que no coincidan con ese patrón. No se admiten espacios. Usa \s en su lugar. Las Herramientas para desarrolladores verifican si el patrón se encuentra en el texto del mensaje o en la secuencia de comandos que provocó que se registrara el mensaje.

Por ejemplo, el siguiente filtro excluye todos los mensajes que no coinciden con /[gm][ta][mi]/.

Cómo buscar texto en los registros

Para buscar texto en los mensajes de registro, haz lo siguiente:

1. Para abrir una barra de búsqueda integrada, presiona Comando + F (Mac) o Ctrl + F (Windows y Linux).
2. En la barra, escribe tu consulta. En este ejemplo, la búsqueda es legacy. De manera opcional, puedes hacer lo siguiente:
   • Haz clic en Coincidir mayúsculas y minúsculas para que tu búsqueda distinga mayúsculas de minúsculas.
   • Haz clic en Usar expresión regular para realizar una búsqueda con una expresión de RegEx.
3. Presiona Intro. Para ir al resultado de la búsqueda anterior o siguiente, presiona el botón hacia arriba o hacia abajo.

Ejecutar JavaScript

Esta sección contiene funciones relacionadas con la ejecución de JavaScript en la consola. Consulta Ejecuta JavaScript para obtener una explicación práctica.

Opciones de copia de cadenas

De forma predeterminada, la consola genera cadenas como literales de JavaScript válidos. Haz clic con el botón derecho en un resultado y elige entre tres opciones de copia:

• Copiar como literal de JavaScript Aplica escape a los caracteres especiales adecuados y encierra la cadena entre comillas simples, comillas dobles o acentos graves, según el contenido.
• Copiar el contenido de la cadena Copia la cadena sin procesar exacta en el portapapeles, incluidos los saltos de línea y otros caracteres especiales.
• Copiar como literal JSON Da formato a la cadena como JSON válido.

Cómo volver a ejecutar expresiones anteriores y borrar el historial

Presiona la tecla de flecha hacia arriba para recorrer el historial de expresiones de JavaScript que ejecutaste anteriormente en la Consola. Presiona Intro para volver a ejecutar esa expresión.

Para borrar el historial de la consola, haz clic con el botón derecho en un espacio vacío de la consola y selecciona Borrar el historial de la consola en el menú contextual.

Borrar, copiar, expandir, contraer y guardar mensajes

Para borrar la ventana de la consola, realiza una de las siguientes acciones:

• Haz clic en block Borrar consola en la barra de acciones de la parte superior.
• Presiona Ctrl + L o Cmd + K.
• Haz clic con el botón derecho en un espacio vacío de la consola y selecciona Borrar consola en el menú contextual.

Para expandir o contraer todos los mensajes, haz clic en expandir Expandir todo o comprimir Contraer todo en la barra de acciones de la parte superior.

En el menú contextual, también puedes hacer lo siguiente:

• Copiar consola: Copia todos los mensajes actuales en el portapapeles, pero no el historial de comandos anteriores.
• Guardar como…: Guarda todos los mensajes actuales en un archivo .log de texto sin formato.

Observa el valor de una expresión en tiempo real con Live Expressions

Si te encuentras escribiendo la misma expresión de JavaScript en la Consola de forma repetida, te resultará más fácil crear una expresión activa. Con Live Expressions, escribes una expresión una vez y, luego, la fijas en la parte superior de la consola. El valor de la expresión se actualiza casi en tiempo real. Consulta Cómo observar los valores de las expresiones de JavaScript en tiempo real con Live Expressions.

Cómo inhabilitar la evaluación eager

A medida que escribes expresiones de JavaScript en la consola, la Evaluación anticipada muestra una vista previa del valor de devolución de esa expresión. Abre la configuración de la consola y deshabilita la casilla de verificación Evaluación anticipada para desactivar las vistas previas de los valores de devolución.

Activar el usuario a partir de la evaluación

La activación del usuario es el estado de una sesión de navegación que depende de las acciones del usuario. Un estado "activo" significa que el usuario está interactuando con la página o que interactuó con ella desde que se cargó.

Para activar al usuario con cualquier evaluación, abre la Configuración de la consola y marca Tratar la evaluación de código como acción del usuario.

Inhabilita el autocompletado con el historial

A medida que escribes una expresión, la ventana emergente de autocompletado de la consola muestra las expresiones que ejecutaste anteriormente. Estas expresiones están precedidas por el carácter >. En el siguiente ejemplo, Herramientas para desarrolladores evaluó document.querySelector('a') y document.querySelector('img') anteriormente.

Abre la configuración de la consola y deshabilita la casilla de verificación Autocompletar con el historial para dejar de mostrar expresiones de tu historial.

Selecciona el contexto de JavaScript

De forma predeterminada, el menú desplegable Contexto de JavaScript está configurado en top, que representa el contexto de navegación del documento principal.

Supongamos que tienes un anuncio en tu página incorporado en un <iframe>. Quieres ejecutar JavaScript para modificar el DOM del anuncio. Para ello, primero debes seleccionar el contexto de navegación del anuncio en el menú desplegable Contexto de JavaScript.

Cómo inspeccionar las propiedades de un objeto

La consola puede mostrar una lista interactiva de las propiedades de un objeto de JavaScript que especifiques.

Para explorar la lista, escribe el nombre del objeto en la consola y presiona Intro.

Para inspeccionar las propiedades de los objetos DOM, sigue los pasos que se indican en Cómo ver las propiedades de los objetos DOM.

Cómo detectar propiedades propias y heredadas

La consola ordena primero las propiedades del objeto y las destaca en negrita.

Las propiedades heredadas de la cadena de prototipos se muestran en fuente normal. La consola los muestra en el objeto mismo evaluando los descriptores de acceso nativos correspondientes de los objetos integrados.

Evalúa los descriptores de acceso personalizados

De forma predeterminada, Herramientas para desarrolladores no evalúa los descriptores de acceso que creas. Para evaluar un accesor personalizado en un objeto, haz clic en (...).

Cómo detectar propiedades enumerables y no enumerables

Las propiedades enumerables son de color brillante. Las propiedades no enumerables se atenúan. Las propiedades enumerables se pueden iterar con el bucle for … in o el método Object.keys().

Cómo detectar propiedades privadas de instancias de clase

La consola designa propiedades privadas de instancias de clase con un prefijo #.

La consola también puede autocompletar propiedades privadas, incluso cuando las evalúas fuera del alcance de la clase.

Inspecciona las propiedades internas de JavaScript

Tomando prestada la notación de ECMAScript, la consola encierra algunas propiedades internas de JavaScript entre corchetes dobles. No puedes interactuar con esas propiedades en tu código. Sin embargo, puede ser útil inspeccionarlos.

Es posible que veas las siguientes propiedades internas en diferentes objetos:

• Cualquier objeto tiene un [[Prototype]].
• Los wrappers primitivos tienen una propiedad [[PrimitiveValue]].
• Los objetos ArrayBuffer tienen las siguientes propiedades:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Además de las propiedades específicas de ArrayBuffer, los objetos WebAssembly.Memory tienen una propiedad [[WebAssemblyMemory]].
• Las colecciones con claves (mapas y conjuntos) tienen una propiedad [[Entries]] que contiene sus entradas con claves.
• Los objetos Promise tienen las siguientes propiedades:
  • [[PromiseState]]: pendiente, completado o rechazado
  • [[PromiseResult]]: undefined si está pendiente, <value> si se completó y <reason> si se rechazó
• Los objetos Proxy tienen las siguientes propiedades: objeto [[Handler]], objeto [[Target]] y [[isRevoked]] (encendido o no).

Cómo inspeccionar funciones

En JavaScript, las funciones también son objetos con propiedades. Sin embargo, si escribes el nombre de una función en la consola, Herramientas para desarrolladores la llamará en lugar de mostrar sus propiedades.

Para ver las propiedades de la función internas de JavaScript, usa el comando console.dir().

Las funciones tienen las siguientes propiedades:

• [[FunctionLocation]]: Es un vínculo a la línea con la definición de la función en un archivo fuente.
• [[Scopes]]: Enumera los valores y las expresiones a los que tiene acceso la función. Para inspeccionar los alcances de las funciones durante la depuración, consulta Cómo ver y editar propiedades locales, de cierre y globales.
• Las funciones vinculadas tienen las siguientes propiedades:
  • [[TargetFunction]]: Es el objetivo de bind().
  • [[BoundThis]], el valor de this
  • [[BoundArgs]]: Es un array de argumentos de la función.
• Las funciones de generador se marcan con una propiedad [[IsGenerator]]: true.
• Los generadores devuelven objetos iteradores y tienen las siguientes propiedades:
  • [[GeneratorLocation]]: Es un vínculo a una línea con la definición del generador en un archivo fuente.
  • [[GeneratorState]]: suspended, closed o running.
  • [[GeneratorFunction]]: Es el generador que devolvió el objeto.
  • [[GeneratorReceiver]]: Es un objeto que recibe el valor.

Borra la consola

Puedes usar cualquiera de los siguientes flujos de trabajo para borrar la consola:

• Haz clic en Borrar consola .
• Haz clic con el botón derecho en un mensaje y, luego, selecciona Borrar consola.
• Escribe clear() en la consola y, luego, presiona Intro.
• Llama a console.clear() desde el código JavaScript de tu página web.
• Presiona Control + L mientras la consola esté en primer plano.