Referencia de las funciones de la consola

Kayce vascos
Kayce Vascos
Sofía Emelianova
Sofía Emelianova

Esta página hace referencia a funciones relacionadas con la consola de Herramientas para desarrolladores de Chrome. Se supone que ya estás familiarizado con el uso de Console para ver los mensajes registrados y ejecutar JavaScript. De lo contrario, 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 la referencia sobre funciones como monitorEvents(), consulta la Referencia de la API de Console Utilities.

Abre la consola

Puede abrir Console 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).

La consola.

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

El comando para mostrar el panel de la consola.

Abrir Console en el Panel lateral

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

Mostrar el panel lateral de la consola.

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

La pestaña Console en el Panel lateral

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 del Panel lateral junto a él.

Es el comando para mostrar la pestaña Console en el Panel lateral.

Abrir configuración de la consola

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

Configuración de la consola.

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

Haz clic en Show Console Sidebar Mostrar la barra lateral de la consola. a fin de mostrar la barra lateral, que es útil para filtrar.

Barra lateral de la consola

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 Group similar para inhabilitar el comportamiento de agrupación de mensajes predeterminado de la consola. Consulta Registra solicitudes XHR y Recuperar para ver un ejemplo.

Ver mensajes de puntos de interrupción

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

Console marca los mensajes creados por puntos de registro y puntos de interrupción condicionales.

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

Ver seguimientos de pila

La consola 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 la consola, se muestran en orden inverso: el último fotograma se encuentra en la parte superior.

Si deseas ver un seguimiento de pila, haz clic en el ícono para expandir Expandir. que aparece junto a un error o una advertencia.

Seguimientos de pila

Ver seguimientos de pila asíncronos

Si lo admite el framework que estás usando 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.

Seguimiento de pila asíncrono.

Cómo mostrar marcos de terceros conocidos en los seguimientos de pila

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

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

Mostrar N marcos más.

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

Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista

Registrar solicitudes de recuperación y XHR

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 realicen.

Registrar solicitudes XMLHttpRequest y Fetch.

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

Cómo se ven las solicitudes XMLHttpRequest y Fetch registradas después del desagrupamiento.

Conserva los mensajes entre 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á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 la consola. Por ejemplo, el mensaje superior del siguiente ejemplo representa un error 404.

Un mensaje 404 en la consola

Para ocultar los mensajes de red, sigue estos pasos:

  1. Abra 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. Abra la configuración de la consola.
  2. Marca o desmarca la casilla de verificación Mostrar errores de CORS en la consola.

Muestra los 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:

Botones Network y Issues.

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 del usuario para que solo se muestren los mensajes provenientes del JavaScript de la página.

Visualización de mensajes de usuarios

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.

Todos los mensajes que el navegador registra en Console también tienen un nivel de gravedad. Puedes ocultar cualquier nivel de mensajes que no te interese. 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.

El menú desplegable Niveles de registro.

También puedes filtrar por nivel de registro. Para ello, Mostrar la barra lateral de la consola. abre la barra lateral de la consola y haz clic en Errores, Advertencias, Información o Detallado.

Uso de la barra lateral para ver advertencias

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 mostrarán todas las URLs relevantes.

Un filtro de URL.

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.

Un filtro de URL negativa. Herramientas para desarrolladores oculta todos los mensajes que coinciden con la URL especificada.

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.

Ver los mensajes de una secuencia de comandos específica.

Filtra mensajes de distintos contextos

Supongamos que tiene un anuncio en su página. El anuncio está incorporado en un <iframe> y genera muchos mensajes en tu consola. Debido a que 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 contexto seleccionado.

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

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

En el siguiente ejemplo, se filtran todos los mensajes que no coinciden con /[gm][ta][mi]/.

Filtrando los mensajes que no coinciden con /[gm][ta][mi]/.

Para buscar texto en los mensajes del registro:

  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. Escribiendo una consulta. De forma opcional, puedes hacer lo siguiente:
    • Haz clic en Hacer coincidir mayúsculas y minúsculas. Match Case para que tu consulta distinga entre mayúsculas y minúsculas.
    • Haz clic en Botón RegEx. Usar expresión regular para buscar usando una expresión RegEx.
  3. Presione Intro. Para ir al resultado de la búsqueda anterior o siguiente, presiona el botón de arriba o abajo.

Ejecuta JavaScript

Esta sección contiene 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 strings

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. Reemplaza los caracteres especiales correspondientes y une la string entre comillas simples, comillas dobles o acentos graves, según el contenido.
  • Copia el contenido de las cadenas. Copia la cadena sin procesar exacta en el portapapeles, incluidas las líneas nuevas y otros caracteres especiales.
  • Copiar como literal de JSON. Da formato a la string como un JSON válido.

Las opciones de copiado

Volver a ejecutar expresiones del 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 tienes que escribir la misma expresión de JavaScript en la consola de manera repetida, puede 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 pasiva

A medida que escribes expresiones de JavaScript en Console, 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ó.

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

Inhabilitar la función de autocompletar desde el historial

A medida que escribes una expresión, la ventana emergente de autocompletado de Console 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').

La ventana emergente de autocompletar que muestra expresiones del historial.

Abre la configuración de la consola e inhabilita la casilla de verificación Autocomplete desde el historial para dejar de mostrar expresiones de tu historial.

Selecciona el contexto de JavaScript

De forma predeterminada, el menú desplegable Contexto de JavaScript se establece en top, lo que representa el contexto de navegación del documento principal.

Menú desplegable de contexto de JavaScript.

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

Seleccionar un contexto de JavaScript diferente.

Cómo inspeccionar propiedades de objetos

En la consola, se puede mostrar una lista interactiva de propiedades del objeto 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.

Propiedades propias y heredadas del anuncio de TV

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

Mostrar propiedades de objetos

Las propiedades heredadas de la cadena del prototipo se muestran en fuentes normales. Console los muestra en el objeto en sí evaluando los descriptores de acceso nativos correspondientes de los objetos integrados.

Se muestran las propiedades heredadas.

Evalúa los descriptores de acceso personalizados

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

Detecta propiedades enumerables y no numerables

Las propiedades que se pueden enumerar son de color brillante. Las propiedades que no son numerables están silenciadas. Propiedades enumerables y no numerables. Las propiedades enumerables se pueden iterar con el bucle for … in o el método Object.keys().

Cómo detectar propiedades privadas de las instancias de clase

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

Propiedad privada de una instancia de clase

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

Autocompletado de propiedad privada

Cómo inspeccionar propiedades internas de JavaScript

Con la notación ECMAScript, la consola incluye 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 objetos diferentes:

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 llama en lugar de mostrar sus propiedades.

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

Inspeccionar las propiedades de una función

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 Visualiza y edita 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 funciones. Función vinculada.
  • Las funciones de generador se marcan con una propiedad [[IsGenerator]]: true. Función de generador.
  • Los generadores muestran 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]]: El generador que mostró el objeto.
    • [[GeneratorReceiver]]: Un objeto que recibe el valor. Iterator.

Borra la información de la consola

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

  • Haz clic en Clear Console claro.
  • 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.