En esta página, se explica cómo la consola de Herramientas para desarrolladores de Chrome facilita el desarrollo de páginas web. Console tiene 2 usos principales: ver mensajes registrados y ejecutar JavaScript.
Cómo ver los mensajes registrados
Los desarrolladores web a menudo registran mensajes en Console para asegurarse de que su JavaScript funcione según lo esperado. Para registrar un mensaje, inserta una expresión como console.log('Hello, Console!') en tu 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 escribiendo 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 la consola después de cargar la página y esperar 3 segundos. Intenta descubrir qué líneas de código hicieron que el navegador registrara los mensajes.
Figura 1: El panel Console.
Los desarrolladores web registran los mensajes por 2 razones 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 el registro de mensajes para obtener experiencia práctica en el registro. Consulta la referencia de la API de Console para explorar la lista completa de métodos console. La principal diferencia entre los métodos es la forma en que muestran los datos que registras.
Ejecutar JavaScript
La consola también es un REPL. Puedes ejecutar JavaScript en Console para interactuar con la página que inspeccionas. Por ejemplo, en la Figura 2, se muestra la consola junto a la página principal de Herramientas para desarrolladores, y en la Figura 3, se 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 Herramientas para desarrolladores.
Figura 3. Cómo usar la consola para cambiar el título de la página.
Es posible modificar la página desde Console porque esta tiene acceso completo a la window de la página. Herramientas para desarrolladores tiene algunas funciones convenientes que facilitan la inspección de una página. Por ejemplo, supongamos que tu JavaScript contiene una función llamada hideModal. Ejecutar debug(hideModal) pausa tu código en la primera línea de hideModal la próxima vez que se lo llame.
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 de arreglo integrado de JavaScript map() y deseas 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 la consola.