Información general sobre la consola

La Consola es como una línea de comandos inteligente y enriquecida dentro de DevTools, y es una excelente herramienta complementaria para usar con otras herramientas. La consola proporciona una forma eficaz de generar scripts de funcionalidad e inspeccionar la página web actual con JavaScript.

La herramienta Consola ayuda con varias tareas, que se tratan con más detalle en los siguientes artículos:

• Realice un seguimiento de los problemas para averiguar por qué algo no funciona en el proyecto actual. Consulta Corregir errores de JavaScript notificados en la Consola.
• Obtenga información sobre el proyecto web en el explorador como mensajes de registro. Consulte Filtrar mensajes de consola.
• Registre la información en scripts con fines de depuración. Consulte Registrar mensajes en la herramienta Consola.
• Pruebe las expresiones de JavaScript en vivo en un entorno REPL . Consulta Ejecutar JavaScript en la consola.
• Interactúe con el proyecto web en el explorador mediante JavaScript. Consulte Interacción con el DOM mediante la consola.

Puede abrir la herramienta Consola en la parte superior o inferior de DevTools; se muestra aquí en la parte superior, en la Barra de Actividades:

La consola se muestra aquí, en la parte inferior de DevTools (el panel Vista rápida ), con la herramienta Elementos abierta encima de ella:

La forma más rápida de abrir directamente la consola es presionar Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).

Informes de errores y la consola

La Consola es el lugar predeterminado donde se notifican los errores de JavaScript y conectividad. Para obtener más información, consulta Solucionar errores de JavaScript que se notifican en la Consola.

DevTools proporciona información detallada sobre el error en la consola:

Buscar en la web una cadena de mensaje de error de consola

Busca en la web los mensajes de error de tu consola , directamente desde DevTools. En la Consola, muchos mensajes de error tienen un botón Buscar este mensaje en la Web , que se muestra como una lupa:

Al hacer clic en el botón Buscar este mensaje en la Web , se abre una nueva pestaña en el explorador y se muestran los resultados de la búsqueda del mensaje de error:

Inspeccionar y filtrar la información de la página web actual

Al abrir DevTools en una página web, puede haber una cantidad abrumadora de información en la consola. La cantidad de información se convierte en un problema cuando se necesita identificar información importante. Para ver la información importante que necesita acción, use la herramienta Problemas en DevTools.

Los problemas se están trasladando gradualmente de la Consola a la herramienta Problemas . Sin embargo, todavía hay mucha información en la Consola, por lo que es una buena idea conocer el registro automatizado y las opciones de filtro en la Consola. Para obtener más información, consulte Filtrar mensajes de consola.

DevTools con una consola llena de mensajes:

Información de registro para mostrar en la consola

El caso de uso más popular para la consola es el registro de información de los scripts mediante el console.log() método u otros métodos similares.

Código de ejemplo

// prints the text to the console as  a log message
console.log('This is a log message');

// prints the text to the console as an informational message
console.info('This is some information');

// prints the text to the console as an error message
console.error('This is an error');

// prints the text to the console as a warning
console.warn('This is a warning');

// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());

// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());

// shows a list of technologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technologies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd();

Para registrar información que se mostrará en la consola:

1. Abrir la página web de demostración Ejemplos de mensajes de consola: registro, información, error y advertencia en una nueva ventana o pestaña.

2. Para abrir la consola, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).

   La consola muestra los mensajes resultantes causados por el código de demostración:

   

3. Pega el código anterior en la consola y presiona Entrar.

   Si recibe un mensaje: Uncaught SyntaxError: Identifier 'technologies' has already been declared:

4. Abrir una nueva pestaña o ventana.

5. Para abrir la consola, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).

6. Pega el código anterior en la consola y presiona Entrar.

Hay muchos métodos útiles disponibles cuando trabajas con la Consola. Para obtener más información, consulte Mensajes de registro en la herramienta Consola.

Pruebe JavaScript en directo en la Consola

La Consola no es solo un lugar para registrar información. La Consola es un entorno REPL . Cuando escribes JavaScript en la consola, el código se ejecuta inmediatamente. Puede resultarle útil probar algunas características nuevas de JavaScript o hacer algunos cálculos rápidos. Además, obtiene todas las características que espera de un entorno de edición moderno, como la finalización automática, el resaltado de sintaxis y el historial.

Para intentar ejecutar JavaScript en la consola:

1. Abre la consola.

2. Escriba 2+2.

La consola muestra el resultado de 2+2 en directo a medida que lo escribe, mostrando el resultado 4 en la siguiente línea:

Esta característica de evaluación diligente es útil para depurar y comprobar que no está cometiendo errores en el código.

Para ejecutar la expresión JavaScript en la consola y, opcionalmente, mostrar un resultado, presione Entrar. A continuación, puedes escribir el siguiente código JavaScript para que se ejecute en la Consola.

Ejecución de varias líneas de código JavaScript en sucesión:

De forma predeterminada, el código JavaScript se ejecuta en una sola línea. Para ejecutar una línea, escriba el JavaScript y, a continuación, presione Entrar. Para evitar la limitación de una sola línea, presione Mayús+Entrar en lugar de Entrar.

De forma similar a otras experiencias de línea de comandos, para acceder a los comandos anteriores de JavaScript, presione la flecha arriba. La característica de autocompletar de la Consola es una excelente manera de obtener información sobre métodos desconocidos.

Para probar la finalización automática:

1. Abre la consola.
2. Escriba doc.
3. Seleccione una opción document en el menú desplegable.
4. Presiona el tabulador para seleccionar document.
5. Escriba .bo.
6. Presiona el tabulador para seleccionar document.body.
7. Escriba otra . para mostrar la lista completa de propiedades y métodos disponibles en el cuerpo de la página web actual.

Para obtener más información sobre todas las formas de trabajar con la consola, consulta Consola como entorno JavaScript.

Autocompletar expresiones de JavaScript en la Consola:

Interactuar con la página web actual en el explorador

La consola tiene acceso al objeto Window del explorador. Puede escribir scripts que interactúen con la página web actual, leyendo datos del DOM y asignando datos a elementos DOM.

Lectura del árbol DOM en la Consola

Para usar una expresión de JavaScript para leer desde la página actual leyendo un elemento seleccionado del árbol DOM:

1. Abre la consola.

2. Pegue el siguiente código en la consola y, a continuación, presione Entrar:

   document.querySelector('h1').innerHTML
   

   Esta expresión selecciona el primer nivel de título 1 del DOM y, a continuación, selecciona el contenido HTML contenido entre las <h1> etiquetas de inicio y finalización. La consola muestra la salida de la expresión, que es el texto del título:

   

Ha leído desde la representación DOM de la página web, escribiendo una expresión JavaScript en la Consola y mostrando el resultado en la Consola.

Escribir en el árbol del DOM y en la página web desde la Consola

También puedes cambiar la página web representada, cambiando el DOM (o escribiendo en el DOM), desde la Consola.

Para cambiar la página web representada:

1. Abre la consola.

2. Pegue el siguiente código en la consola y, a continuación, presione Entrar:

   document.querySelector('h1').innerHTML = 'Rocking the Console';
   

   La expresión de JavaScript anterior usa el = signo para asignar un valor al elemento DOM seleccionado. El valor evaluado de la expresión es una cadena para un encabezado, en este ejemplo. El valor de la expresión (la cadena de título) se muestra tanto en la consola como en la página web representada:

   

   Has cambiado el título principal de la página web a Rocking the Console.

Uso del método de utilidad de consola $$

Los métodos de utilidad de consola facilitan el acceso y la manipulación de la página web actual.

Por ejemplo, para agregar un borde verde alrededor de todos los vínculos de la página web actual:

1. Abre la consola.

2. Pegue el siguiente código en la consola y, a continuación, presione Entrar:

   $$('a').forEach(a => a.style.border='1px solid lime');
   

   La $$(selector) función de utilidad de consola es "Selector de consultas todo". Esta función selector de consultas DOM devuelve una matriz de todos los elementos que coinciden con el selector CSS especificado, como la función document.querySelectorAll()JavaScript . En este ejemplo, seleccionamos todos los elementos de <a> hipervínculo y, a continuación, aplicamos un cuadro verde alrededor de ellos:

   

Para obtener más información, consulte Selectores y funciones de utilidad de herramienta de consola.

Consulte también

• Interactúe con el DOM mediante la Consola.
• Referencia de características de la consola
• Referencia de API de objeto de consola
• Selectores y funciones de utilidad de herramienta de consola