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).
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.
Abrir Console 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 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 del Panel lateral junto a él.
Abrir configuración de la consola
Haz clic en Configuración de la consola en la esquina superior derecha de Consola.
En los siguientes vínculos, 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 rápida
- Autocompletar a partir del historial
Abre la barra lateral de la consola
Haz clic en Show Console Sidebar a fin de 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 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.*
llama en los puntos de interrupción condicionales con un signo de interrogación naranja?
- Mensajes de punto de registro con dos puntos rosa
..
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 que aparece junto a un error o una advertencia.
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.
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.
Para ver siempre el seguimiento de pila completa, inhabilita el parámetro de configuración Configuración > Lista de omisión > 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.
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.
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.
Para ocultar los mensajes de red, sigue estos pasos:
- Abra la configuración de la consola.
- 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:
- Abra la configuración de la consola.
- 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 del usuario para que solo se muestren 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.
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
.
También puedes filtrar por nivel de registro. Para ello, abre la barra lateral de la consola y haz clic en Errores, Advertencias, Información o Detallado.
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.
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 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]/
.
Busca texto en los registros
Para buscar texto en los mensajes del registro:
- Para abrir una barra de búsqueda integrada, presiona Comando + F (Mac) o Ctrl + F (Windows y Linux).
- En la barra, escribe tu consulta. En este ejemplo, la consulta es
legacy
. De forma opcional, puedes hacer lo siguiente:- Haz clic en Match Case para que tu consulta distinga entre mayúsculas y minúsculas.
- Haz clic en Usar expresión regular para buscar usando una expresión RegEx.
- 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.
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 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')
.
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.
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.
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.
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.
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 propiedades enumerables y no numerables
Las propiedades que se pueden enumerar son de color brillante. Las propiedades que no son numerables están silenciadas.
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 #
.
Console también puede autocompletar propiedades privadas incluso cuando las evalúas fuera del alcance de la clase.
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:
- Cualquier objeto tiene un
[[Prototype]]
. - Los wrappers primitivos tienen una propiedad
[[PrimitiveValue]]
. - Los objetos
ArrayBuffer
tienen las siguientes propiedades: - Además de las propiedades específicas de
ArrayBuffer
, los objetosWebAssembly.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,<reason>
si se rechaza
- Los objetos
Proxy
tienen las siguientes propiedades: objeto[[Handler]]
, objeto[[Target]]
y[[isRevoked]]
(desactivado 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 llama 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]]
. 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 debind()
.[[BoundThis]]
: El valor dethis
.[[BoundArgs]]
. Un array de argumentos de funciones.
- Las funciones de generador se marcan con una propiedad
[[IsGenerator]]: true
. - 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
orunning.
[[GeneratorFunction]]
: El generador que mostró el objeto.[[GeneratorReceiver]]
: Un objeto que recibe el valor.
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 .
- 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.