En esta página, se explica cómo la consola de Herramientas para desarrolladores de Chrome facilita el desarrollo de páginas web. La consola tiene 2 usos principales: ver los mensajes registrados y ejecutar JavaScript.
Cómo ver los mensajes registrados
Los desarrolladores web suelen registrar mensajes en Console para asegurarse de que su JavaScript funcione según lo previsto. Para registrar un mensaje, inserta una expresión como console.log('Hello, Console!') en tu JavaScript. Cuando el navegador ejecuta tu 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 averiguar qué líneas de código hicieron que el navegador registrara los mensajes.
Figura 1: El panel de la consola
Los desarrolladores web registran mensajes por 2 motivos generales:
- Asegurarse de que el código se ejecute en el orden correcto
- Inspecciona los valores de variables en un momento determinado.
Consulta Comienza a usar los mensajes de Logging para adquirir experiencia práctica con 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.
Cómo ejecutar JavaScript
La consola también es una REPL. Puedes ejecutar JavaScript en la consola para interactuar con la página que estás inspeccionando. Por ejemplo, en la Figura 2, se muestra la consola junto a la página principal de Herramientas para desarrolladores, y la Figura 3 muestra esa misma página después de usar la consola 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. Usa la consola para cambiar el título de la página.
Se puede modificar la página desde Console porque esta tiene acceso completo a la window de la página. Las Herramientas para desarrolladores tienen algunas funciones útiles 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 las funciones de utilidad.
Cuando ejecutas JavaScript, no tienes que interactuar con la página. Puedes usar Console para probar código nuevo que no esté relacionado con la página. Por ejemplo, supongamos que acabas de aprender sobre el método integrado del array de JavaScript map() y quieres experimentar con él. La consola es un buen lugar
para probar la función.
Consulta Cómo comenzar a ejecutar JavaScript para obtener experiencia práctica con la ejecución de JavaScript en la consola.