Referencia de las funciones de la consola

Esta página es una referencia de funciones relacionadas con la consola de Herramientas para desarrolladores de Chrome. Se supone que ya estás familiarizado con el uso de la consola para ver los mensajes registrados y ejecutar JavaScript. De lo contrario, consulta Cómo comenzar.

Si buscas la referencia de la API en funciones como console.log(), consulta Referencia de la API de Console. Para obtener 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.

Abrir el panel de la consola

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

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

Abre la consola en el panel lateral.

Presiona Escape o haz clic en Customize And Control Herramientas para desarrolladores y, luego, selecciona Show Console Drawer.

El panel lateral aparece en la parte inferior de la ventana de Herramientas para desarrolladores, con la pestaña Consola abierta.

Para abrir la pestaña Console desde el Menú de comandos, comienza a escribir Console y, luego, ejecuta el comando Mostrar consola que tiene la insignia Panel lateral 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 vínculos que aparecen a continuación, se explica cada parámetro de configuración:

• Ocultar red
• Conservar el registro
• Solo el contexto seleccionado
• Agrupa los mensajes similares en la consola
• Mostrar errores de CORS en la consola
• Registra XMLHttpRequests
• Evaluación más sencilla
• Autocompletar a partir del historial

Abre la barra lateral de la consola

Haz clic en Show Console Sidebar para mostrar la barra lateral, que es útil para filtrar.

Visualiza los mensajes

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

Inhabilitar la agrupación de mensajes

Abre Console Settings y, luego, inhabilita Grupo similar para inhabilitar el comportamiento de agrupación de mensajes predeterminado de Console. Consulta cómo registrar solicitudes XHR y recuperar para ver un ejemplo.

Cómo ver los mensajes de las interrupciones

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

• console.* llama en interrupciones condicionales con un signo de interrogación naranja ?
• Mensajes de punto de registro con dos puntos rosados ..

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.

Ver seguimientos de pila

Console captura automáticamente seguimientos de pila en busca de errores y advertencias. Un seguimiento de pila es un historial de llamadas a funciones (marcos) que generaron el error o la advertencia. En Console, se muestran en orden inverso: el último fotograma se encuentra 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.

Ver las causas de los errores en los seguimientos de pila

Console puede mostrarte cadenas de causas de errores en el seguimiento de pila, si las hubiera.

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

Ver seguimientos de pila asíncronos

Si lo admite el framework que usas o cuando usas directamente las primitivas de programación del navegador, como setTimeout, Herramientas para desarrolladores 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 la "historia completa" de la operación asíncrona.

Mostrar marcos de terceros conocidos en seguimientos de pila

Cuando los mapas de origen incluyen el campo ignoreList, de forma predeterminada, Console oculta los marcos de terceros de fuentes generados por agrupadores (por ejemplo, webpack) o frameworks (por ejemplo, Angular) de los seguimientos de pila.

Para ver el seguimiento de pila completo, incluidos los marcos de terceros, haz clic en Mostrar N más marcos 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 a la lista de elementos ignorados.

Registrar solicitudes XHR y recuperar

Abre la configuración de la consola y habilita Log 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.

Conserva los mensajes entre las cargas de las páginas

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

Ocultar mensajes de la red

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

Para ocultar los mensajes de red, sigue estos pasos:

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

Oculta o muestra errores de CORS

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

Para ocultar o mostrar los errores de CORS, sigue estos pasos:

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 Network.
• para obtener una posible solución en la pestaña Problemas.

Cómo filtrar mensajes

Existen muchas formas de filtrar mensajes en la consola.

Cómo filtrar los mensajes del navegador

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

Filtra por nivel de registro

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

Hay 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 Console, 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 Verbose.

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:, Herramientas para desarrolladores muestra todas las URLs relevantes.

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 estas 2 secuencias de comandos.

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

También puedes mostrar mensajes de una sola URL. Para ello, abre la barra lateral de la consola, expande la sección Mensajes del usuario y, luego, haz clic en la URL de la secuencia de comandos que contiene los mensajes en los que quieres enfocarte.

Filtra mensajes de diferentes contextos

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

Filtra los mensajes que no coincidan con un patrón de expresiones regulares.

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

Por ejemplo, a continuación se filtran todos los mensajes que no coinciden con /[gm][ta][mi]/.

Busca 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 consulta es legacy. De manera opcional, puedes hacer lo siguiente:
   • Haz clic en Match case para que tu consulta distinga mayúsculas de minúsculas.
   • Haz clic en Usar expresión regular para buscar mediante una expresión RegEx.
3. Presiona Intro. Para ir al resultado de la búsqueda anterior o siguiente, presiona los botones de arriba o abajo.

Ejecuta JavaScript

En esta sección, se incluyen funciones relacionadas con la ejecución de JavaScript en la consola. Consulta Cómo ejecutar JavaScript para obtener una explicación práctica.

Opciones de copia de cadenas

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

• Copiar como literal de JavaScript. Escapa los caracteres especiales adecuados y une la string entre comillas simples, comillas dobles o acentos graves, según el contenido.
• Copia el contenido de las cadenas. Copia la string sin procesar exacta en el portapapeles, incluidas las líneas nuevas y otros caracteres especiales.
• Copiar como literal de JSON. Da formato a la cadena como un JSON válido.

Volver a ejecutar expresiones desde el historial

Presiona la tecla de flecha hacia arriba para desplazarte por el historial de expresiones de JavaScript que ejecutaste antes en la consola. Presiona Intro para volver a ejecutar esa expresión.

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

Si necesitas escribir la misma expresión de JavaScript en la consola de forma reiterada, es posible que te resulte más fácil crear una expresión instantánea. Con Live Expressions, puedes escribir una expresión una vez y, luego, fijarla en la parte superior de la consola. El valor de la expresión se actualiza casi en tiempo real. Consulta cómo mirar los valores de expresiones de JavaScript en tiempo real con expresiones en vivo.

Inhabilitar evaluación veloz

A medida que escribes expresiones de JavaScript en la consola, Eager Evaluation muestra una vista previa del valor que se muestra de esa expresión. Abre Console Settings y, luego, inhabilita la casilla de verificación Eager Evaluation para desactivar las vistas previas de los valores que se muestran.

Activar la activación del usuario con 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. El estado "activo" significa que el usuario está interactuando con la página o que interactuó desde que se cargó la página.

Para activar la activación del usuario con cualquier evaluación, abre la Configuración de Console y marca Evaluar la activación de los activadores de usuarios.

Inhabilitar autocompletar desde el historial

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

Abre la configuración de la consola y, luego, inhabilita la casilla de verificación Autocompletar a partir del 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 la posición arriba, lo que representa el contexto de navegación del documento principal.

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

Cómo inspeccionar propiedades de objetos

Console puede mostrar una lista interactiva de propiedades de un objeto de JavaScript que especifiques.

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

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

Detección de propiedades propias y heredadas

La consola ordena primero las propiedades de los objetos y las destaca en negrita.

Las propiedades heredadas de la cadena de prototipos tienen fuentes normales. La consola los muestra en el objeto, 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 descriptor de acceso personalizado en un objeto, haz clic en (...).

Detecta las propiedades que se pueden enumerar y no se pueden enumerar.

Las propiedades enumerables tienen colores brillantes. Se silenciarán las propiedades que no son enumerables. Las propiedades enumerables se pueden iterar con el bucle for … in o el método Object.keys().

Identifica las propiedades privadas de las instancias de clase

Console designa propiedades privadas de instancias de clase con un prefijo #.

Console también puede autocompletar propiedades privadas incluso cuando las evalúes dentro del alcance de la clase.

Cómo inspeccionar propiedades internas de JavaScript

Usando la notación ECMAScript, la consola encierra algunas propiedades internas de JavaScript entre corchetes dobles. No puedes interactuar con esas propiedades en tu código. Sin embargo, podría 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]] y [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Además de las propiedades específicas de ArrayBuffer, los objetos WebAssembly.Memory tienen una propiedad [[WebAssemblyMemory]].
• Las colecciones con clave (mapas y conjuntos) tienen una propiedad [[Entries]] que contiene sus entradas con clave.
• Los objetos Promise tienen las siguientes propiedades:
  • [[PromiseState]]: Pendiente, completado o rechazado
  • [[PromiseResult]]: undefined si está pendiente, <value> si se completa y <reason> si se rechaza
• Los objetos Proxy tienen las siguientes propiedades: [[Handler]], [[Target]] y [[isRevoked]] (desactivados 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 en 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]]. Muestra una lista de los valores y las expresiones a las que tiene acceso la función. Para inspeccionar los alcances de la función 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]]. Un array de argumentos de función.
• Las funciones de generador están marcadas con una propiedad [[IsGenerator]]: true.
• Los generadores muestran objetos de iterador 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]]: El generador que mostró el objeto.
  • [[GeneratorReceiver]]: Un objeto que recibe el valor.

Borra los datos de la consola

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

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