Cómo usar la consola de desarrollador de JavaScript

Introducción

Los navegadores modernos tienen herramientas de desarrollo incorporadas para trabajar con JavaScript y otras tecnologías web. Estas herramientas incluyen la Consola, que es similar a una interfaz de shell, junto con herramientas para inspeccionar el DOM, depurar y analizar la actividad de red.

La Consola se puede utilizar para registrar información como parte del proceso de desarrollo de JavaScript, así como para permitirte interactuar con una página web realizando expresiones de JavaScript dentro del contexto de la página. Básicamente, la Consola te proporciona la capacidad de escribir, gestionar y supervisar JavaScript según demanda.

Este tutorial explicará cómo trabajar con la Consola y JavaScript dentro del contexto de un navegador, y proporcionará una visión general de otras herramientas de desarrollo integradas que puedes usar como parte de tu proceso de desarrollo web.

Trabajando con la Consola en un Navegador

La mayoría de los navegadores web modernos que admiten HTML y XHTML basados en estándares te proporcionarán acceso a una Consola de Desarrollador donde puedes trabajar con JavaScript en una interfaz similar a una terminal. Esta sección describe cómo acceder a la Consola en Firefox y Chrome.

Firefox

Para abrir la Consola Web en FireFox, navega hasta el menú ☰ en la esquina superior derecha junto a la barra de direcciones.

Selecciona Más herramientas. Con eso abierto, haz clic en el elemento Herramientas de Desarrollo Web.

Una vez hecho esto, se abrirá una bandeja en la parte inferior de la ventana del navegador:

También puedes ingresar a la Consola Web con el atajo de teclado CTRL + SHIFT + K en Linux y Windows, o COMMAND + OPTION + K en macOS.

Ahora que has accedido a la Consola, puedes comenzar a trabajar dentro de ella en JavaScript.

Chrome

Para abrir la Consola de JavaScript en Chrome, puedes ir al menú en la esquina superior derecha de la ventana del navegador, que se representa con tres puntos verticales. Desde allí, puedes seleccionar Más herramientas y luego Herramientas de desarrollo.

Esto abrirá un panel donde puedes hacer clic en Consola en la barra de menú superior para abrir la Consola de JavaScript si aún no está resaltada:

También puedes acceder a la Consola de JavaScript usando el atajo de teclado CTRL + SHIFT + J en Linux o Windows, o COMMAND + OPTION + J en macOS, lo que llevará el enfoque inmediatamente a la Consola.

Ahora que has accedido a la Consola, puedes empezar a trabajar en ella con JavaScript.

Trabajando en la Consola

Dentro de la Consola, puedes escribir y ejecutar código JavaScript.

Comienza con una alerta que imprime la cadena Hola, Mundo!:

alert("Hello, World!");

Una vez que presiones la tecla ENTER después de tu línea de JavaScript, aparecerá una alerta emergente en tu navegador:

Ten en cuenta que la Consola también imprimirá el resultado de evaluar una expresión, que se mostrará como undefined cuando la expresión no devuelva explícitamente algo.

En lugar de tener alertas emergentes de las que necesitas hacer clic para cerrar, puedes trabajar con JavaScript registrándolas en la Consola con console.log.

Para imprimir la cadena Hola, Mundo!, escribe lo siguiente en la Consola:

console.log("Hello, World!");

Dentro de la consola, recibirás la siguiente salida:

Output
Hello, World!

También puedes realizar operaciones matemáticas en la Consola:

console.log(2 + 6);

Output
8

También puedes probar matemáticas más complicadas:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

Además, puedes trabajar en múltiples líneas con variables:

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Si necesitas modificar un comando que pasaste por la Consola, puedes escribir la tecla de flecha hacia arriba (↑) en tu teclado para recuperar el comando anterior. Esto te permitirá editar el comando y enviarlo nuevamente.

La Consola de JavaScript te proporciona un espacio para probar código JavaScript en tiempo real, permitiéndote utilizar un entorno similar a una interfaz de shell de terminal.

Trabajando con un Archivo HTML

Puedes trabajar dentro del contexto de un archivo HTML o una página renderizada dinámicamente en la Consola. Esto te brinda la oportunidad de experimentar con código JavaScript dentro del contexto de HTML, CSS y JavaScript existentes.

Ten en cuenta que tan pronto como recargues una página después de modificarla dentro de la Consola, volverá a su estado anterior a tu modificación del documento. Asegúrate de guardar cualquier cambio que desees conservar en otro lugar.

Toma un documento HTML, como el siguiente archivo index.html, para entender cómo usar la Consola para modificarlo. En tu editor de texto favorito, crea un archivo index.html y agrega las siguientes líneas de HTML:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

Si guardas el archivo HTML anterior y lo cargas en el navegador de tu elección, se renderizará una página en blanco con el título de La Fecha de Hoy en el navegador.

Abre la Consola y comienza a trabajar con JavaScript para modificar la página. Empieza usando JavaScript para insertar un encabezado en el HTML.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

Recibirás la siguiente salida en la Consola:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

Tu página debería ser similar a la siguiente:

Puedes modificar el estilo de la página, como el color de fondo:

document.body.style.backgroundColor = "lightblue";

Output
"lightblue"

Así como el color del texto en la página:

document.body.style.color = "white";

Output
"white"

Ahora tu página debería revelar algo similar a esto:

A partir de aquí, puedes crear un elemento de párrafo <p>:

let p = document.createElement("P");

Con este elemento creado, puedes luego crear un nodo de texto que puede ser añadido al párrafo:

let t = document.createTextNode("Paragraph text.");

Agrega el nodo de texto apendizándolo a la variable p:

p.appendChild(t);

Y finalmente, apéndale p con su elemento de párrafo <p> y el nodo de texto apendizado al documento:

document.body.appendChild(p);

Una vez que hayas completado estos pasos, tu página HTML index.html incluirá los siguientes elementos:

La Consola te proporciona un espacio para experimentar con la modificación de páginas HTML, pero es importante tener en cuenta que no estás cambiando el documento HTML en sí cuando realizas acciones en la Consola. Una vez que recargas la página, volverá a ser un documento en blanco.

Comprensión de otras herramientas de desarrollo

Dependiendo de qué herramientas de desarrollo del navegador utilices, podrás emplear otras herramientas para ayudarte con tu flujo de trabajo de desarrollo web.

DOM — Modelo de Objetos del Documento

Cada vez que se carga una página web, el navegador crea un Modelo de Objetos de Documento, o DOM, de la página.

El DOM es un árbol de objetos y muestra los elementos HTML en una vista jerárquica. El Árbol DOM está disponible para ver en el panel Inspector en Firefox o en el panel Elementos en Chrome.

Estas herramientas te permiten inspeccionar y editar elementos del DOM y también te permiten identificar el HTML relacionado con un aspecto particular de una página en particular. El DOM puede indicarte si un fragmento de texto o una imagen tiene un atributo de ID y puede ayudarte a determinar cuál es el valor de ese atributo.

La página que modificaste anteriormente tendría una vista del DOM similar a esta antes de volver a cargar la página:

Además, verás los estilos CSS en un panel lateral o debajo del panel del DOM, lo que te permite ver qué estilos se están empleando dentro del documento HTML o mediante una hoja de estilos CSS. Por ejemplo, observa qué incluye el estilo del cuerpo de tu página de ejemplo en el Inspector de Firefox:

Para editar en vivo un nodo del DOM, haz doble clic en un elemento seleccionado y realiza los cambios. Por ejemplo, puedes modificar una etiqueta <h1> y convertirla en una etiqueta <h2>.

Al igual que con la Consola, si vuelves a cargar la página, volverás al estado original guardado del documento HTML.

Red

La pestaña Red de las herramientas de desarrollo integradas en el navegador puede monitorear y registrar solicitudes de red. Esta pestaña revela las solicitudes de red que realiza el navegador, incluido cuándo carga una página, cuánto tiempo tarda cada solicitud y proporciona los detalles de cada una de estas solicitudes. Esto puede usarse para optimizar el rendimiento de carga de la página y solucionar problemas de solicitudes.

Puedes utilizar la pestaña de Red junto con la Consola de JavaScript. Es decir, puedes comenzar a depurar una página con la Consola y luego cambiar a la pestaña de Red para ver la actividad de la red sin recargar la página.

Para obtener más información sobre cómo utilizar la pestaña de Red, puedes leer sobre cómo trabajar con el Monitor de Red de Firefox o empezar a analizar el rendimiento de la red con las herramientas de desarrollo de Chrome.

Diseño Responsivo

Cuando los sitios web son responsivos, están diseñados y desarrollados para verse y funcionar correctamente en una variedad de dispositivos diferentes: teléfonos móviles, tabletas, computadoras de escritorio y portátiles. El tamaño de pantalla, la densidad de píxeles y el soporte táctil son factores a tener en cuenta al desarrollar para diferentes dispositivos. Como desarrollador web, es importante tener en cuenta los principios de diseño responsivo para que tus sitios web estén totalmente disponibles para las personas, independientemente del dispositivo que tengan acceso.

Tanto Firefox como Chrome te proporcionan modos para garantizar que se preste atención a los principios de diseño responsivo mientras creas y desarrollas sitios y aplicaciones web. Estos modos emularán diferentes dispositivos que puedes investigar y analizar como parte de tu proceso de desarrollo.

Lee más sobre el Modo de Diseño Responsivo de Firefox o el Modo de Dispositivo de Chrome para aprender cómo aprovechar estas herramientas y garantizar un acceso más equitativo a las tecnologías web.

Conclusión

Este tutorial proporcionó una visión general de cómo trabajar con una Consola de JavaScript dentro de los navegadores web modernos, así como información sobre otras herramientas de desarrollo que puedes utilizar en tu flujo de trabajo.

Para aprender más sobre JavaScript, puedes leer acerca de los tipos de datos, o las bibliotecas jQuery o D3.