Usa Console para probar y depurar aplicaciones web de JavaScript.
Descripción general
En esta página, se explica cómo la Consola de Chrome DevTools facilita el desarrollo de páginas web. Console tiene 2 usos principales: ver los mensajes registrados y ejecutar JavaScript.
Abre la consola
Puedes abrir Console como un panel o una pestaña en el panel lateral. Para obtener información, consulta Cómo abrir la consola en nuestra referencia de funciones.
Cómo ver los mensajes registrados
Los desarrolladores web suelen registrar mensajes en la Consola para asegurarse de que su código JavaScript funcione según lo previsto. Para registrar un mensaje, debes insertar una expresión como console.log('Hello, Console!') en tu código JavaScript. Cuando el navegador ejecuta tu código JavaScript y ve una expresión como esa, sabe que debe registrar el mensaje en la Consola. Por ejemplo, supongamos que estás en el proceso de escribir el código HTML y JavaScript de una página:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
En la Figura 1, se muestra cómo se ve Console después de cargar la página y esperar 3 segundos. Intenta averiguar qué líneas de código hicieron que el navegador registrara los mensajes.
Figura 1. El panel Console.
Los desarrolladores web registran mensajes por 2 motivos generales:
- Asegurarse de que el código se ejecute en el orden correcto
- Inspeccionar los valores de las variables en un momento determinado
Consulta Comienza a usar los mensajes de registro para obtener experiencia práctica con el registro. Consulta la referencia de la API de Console para explorar la lista completa de métodos de console. La principal diferencia entre los métodos es la forma en que muestran los datos que registras.
Cómo ejecutar JavaScript
La consola también es una REPL. Puedes ejecutar JavaScript en la consola para interactuar con la página que inspeccionas. Por ejemplo, en la Figura 2, se muestra Console junto a la página principal de Herramientas para desarrolladores, y la Figura 3 muestra esa misma página después de usar Console para cambiar el título de la página.
Figura 2. El panel Console junto a la página principal de DevTools
Figura 3. Usa la consola para cambiar el título de la página.
Se puede modificar la página desde Console porque la consola tiene acceso completo a window de la página. DevTools tiene algunas funciones prácticas que facilitan la inspección de una página. Por ejemplo, supongamos que tu JavaScript contiene una función llamada hideModal. La ejecución de debug(hideModal) detiene tu código en la primera línea de hideModal la próxima vez que se lo llama.
Consulta la Referencia de la API de Console Utilities para ver la lista completa de funciones de utilidad.
Cuando ejecutas JavaScript, no tienes que interactuar con la página. Puedes usar Console para probar un código nuevo que no esté relacionado con la página. Por ejemplo, supongamos que acabas de aprender sobre el método map() del array integrado de JavaScript y quieres experimentar con él. Console es un buen lugar para probar la función.
Consulta Comienza a ejecutar JavaScript para obtener experiencia práctica en la ejecución de JavaScript en Console.