Usar la consola

Artículo
11/03/2021
Tiempo de lectura: 5 minutos

La herramienta Consola de DevTools le ayuda con varias tareas. La siguiente lista incluye algunas de las tareas.

Descubra por qué algo no funciona en el proyecto actual y realice un seguimiento de los problemas.
Obtenga información sobre el proyecto web en el explorador como mensajes de registro.
Información de registro en scripts con fines de depuración.
Pruebe las expresiones de JavaScript en un entorno REPL.
Interactúe con el proyecto web en el explorador con JavaScript.

La consola es una excelente herramienta complementaria para usarla con otras herramientas. La consola proporciona una forma eficaz de crear scripts de funcionalidad, inspeccionar y manipular la página web actual mediante JavaScript.

La forma más rápida de abrir directamente la consola es seleccionar Control + Shift + J (Windows, Linux) o Command + Option + J (macOS).

Informes de errores y consola

La consola es el lugar predeterminado donde se notifican los errores de Conectividad y JavaScript. Si se produce **** algún error, el contador Problemas se muestra junto al icono Configuración en DevTools que proporciona el número de errores y advertencias. Seleccione el contador Problemas para abrir la herramienta Problemas y mostrar el problema. Para obtener más información, vaya a Fixing JavaScript errors that are reported in the Console.

Buscar mensajes de error en la web desde la consola

Busque en la web los mensajes de error de la consola desde DevTools. En la Consola, muchos mensajes de error tienen una búsqueda de este mensaje en el botón Web, que se muestra como una lupa. Al seleccionar el botón Buscar este mensaje en el botón Web, se abre una nueva pestaña en el explorador y se muestran los resultados de la búsqueda para el mensaje de error.

Para un error, la nueva pestaña contiene resultados de búsqueda web para el mensaje Failed to load resource "Error al cargar el recurso" (sin comillas).

Esta característica se introdujo en Microsoft Edge versión 94.

Inspeccionar y filtrar información en 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 necesita identificar información importante. Para ver la información importante que necesita acción, use la herramienta Problemas en DevTools.

Los problemas se mueven 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 las opciones automatizadas de registro y filtro en la consola. Para obtener más información, vaya a Filtrar mensajes de consola.

Información de registro que se mostrará en la consola

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

Para abrir la consola, seleccione Control + Shift + J (Windows, Linux) o Command + Option + J (macOS).

Vaya a Ejemplos de mensajes de consola: registro, información, errory advertencia, o copie y ejecute el siguiente fragmento de código en la consola.

console.log('This is a log message');
console.info('This is some information');
console.error('This is an error');
console.warn('This is a warning');
console.log(document.body.getBoundingClientRect());
console.table(document.body.getBoundingClientRect());
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technolgies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd('Technolgies');

La consola muestra los resultados.

Consola llena de mensajes causados por código de demostración

Hay muchos métodos útiles disponibles cuando se trabaja con la consola. Para obtener más información, vaya a Registrar mensajes 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. Al escribir cualquier JavaScript en la consola, el código se ejecuta inmediatamente. Puede resultar útil probar algunas nuevas características de JavaScript o realizar algunos cálculos rápidos. Además, obtiene todas las características que espera de un entorno de edición moderno, como la autocompleción, el resaltado de sintaxis y el historial. Para probarlo, complete las siguientes acciones.

Vaya a la consola.
Escriba 2 + 2.

La consola muestra el resultado 4 en la siguiente línea. Esta característica de evaluación de Eager 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, seleccione Enter . A continuación, puede escribir el siguiente código JavaScript que se ejecutará en la consola.

De forma predeterminada, se ejecuta código JavaScript en una sola línea. Para ejecutar una línea, escriba JavaScript y, a continuación, seleccione Enter . Para evitar la limitación de una sola línea, seleccione Shift + Enter en lugar de Enter . De forma similar a otras experiencias de línea de comandos, para obtener acceso a los comandos de JavaScript anteriores, seleccione Arrow-Up . La característica de autocompletion de la consola es una excelente manera de obtener información sobre métodos desconocidos. Para probarlo, complete las siguientes acciones.

Abra la consola.
Escriba doc.
Seleccione document en el menú desplegable.
Seleccione la tab clave para elegirla.
Escriba .bo.
Seleccione tab para obtener document.body .
Escriba otro . 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 acerca de todas las formas de trabajar con la consola, vaya a Consola como un entorno JavaScript.

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. Para probarlo, complete las siguientes acciones.

Abra la consola.
Copie y pegue el siguiente fragmento de código.
```
document.querySelector('h1').innerHTML
```

En lugar de solo leer desde la página web, también puedes cambiarla. Para intentar cambiar la página web, realice las siguientes acciones.

Abra la consola.

Copie y pegue el siguiente fragmento de código.

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

Ha cambiado el encabezado principal de la página web a Rocking the Console. Los métodos de utilidad de consola facilita el acceso y la manipulación de la página web actual. Para obtener más información, vaya a Console Utilities API reference. Por ejemplo, para agregar un borde verde alrededor de todos los vínculos de la página web actual, complete las siguientes acciones.

Abra la consola.