Herramientas del desarrollador

04

Herramientas del desarrollador

DevTools del navegador, VS Code y extensiones que te harán más productivo.

Imagina que eres un mecánico y llegas al taller sin herramientas. No importa cuánto sepas de motores, sin una llave inglesa no vas a hacer mucho. En el desarrollo web pasa exactamente lo mismo: necesitas conocer tus herramientas para ser productivo.

En este capítulo vas a descubrir las tres herramientas que usarás todos los días como desarrollador: las DevTools del navegador, Visual Studio Code y las extensiones que convertirán tu editor en una máquina de productividad.

El navegador como herramienta

Hasta ahora probablemente has usado el navegador solo para ver páginas web, buscar cosas en Google o ver videos. Pero aquí viene la revelación: tu navegador es la herramienta de depuración más poderosa que tienes.

Tanto Chrome como Firefox (y otros navegadores modernos) incluyen un conjunto de herramientas integradas llamadas DevTools (Developer Tools o Herramientas para desarrolladores). Con ellas puedes:

• Ver el código HTML de cualquier página web en tiempo real.
• Modificar estilos CSS y ver los cambios al instante.
• Ejecutar JavaScript directamente en la consola.
• Analizar el rendimiento de una página.
• Depurar errores cuando algo no funciona.

Para abrir las DevTools tienes varias opciones:

• Presiona F12 en tu teclado.
• Usa el atajo Ctrl + Shift + I (en Windows/Linux) o Cmd + Option + I (en macOS).
• Haz clic derecho en cualquier parte de la página y selecciona “Inspeccionar”.

Cuando las abras por primera vez, no te asustes. Hay muchos paneles y opciones, pero no necesitas entenderlo todo ahora. Vamos a centrarnos en lo que realmente importa al empezar.

Inspeccionar elementos

Esta es probablemente la función que más vas a usar. Te permite ver y modificar el HTML y CSS de cualquier elemento en la página.

1. Haz clic derecho en cualquier elemento de una página web y selecciona “Inspeccionar” (o “Inspect” si tu navegador está en inglés). Puede ser un título, un párrafo, una imagen, un botón… lo que quieras.

2. Observa el panel de HTML que aparece. Verás el código fuente del elemento que seleccionaste resaltado en azul. A la izquierda tienes la estructura HTML y a la derecha los estilos CSS que se le aplican. Fíjate cómo al pasar el ratón por diferentes líneas de código, los elementos correspondientes se resaltan en la página.

3. Haz doble clic sobre el texto de un elemento en el panel HTML para editarlo. Por ejemplo, si seleccionaste un título que dice “Bienvenido”, cámbialo por “Soy un hacker” (tranquilo, no estás hackeando nada). Pulsa Enter y verás el cambio reflejado al instante en la página.

4. Modifica los estilos en el panel “Styles”. Busca una propiedad como color y haz clic en su valor. Cámbialo a red o a cualquier otro color. Verás cómo el elemento cambia de color inmediatamente. También puedes añadir nuevas propiedades haciendo clic en el espacio vacío dentro de una regla CSS.

5. Refresca la página (F5 o Ctrl + R). Todos tus cambios han desaparecido. Esto es importante: los cambios que haces en las DevTools son temporales. Solo afectan a tu vista local y se pierden al recargar. No estás modificando la página real ni el servidor.

💡Los cambios en DevTools son temporales

Así es exactamente como los desarrolladores profesionales depuran problemas visuales. Abren el inspector, prueban diferentes valores de CSS en tiempo real y, una vez que encuentran la solución, la aplican en su código fuente.

La consola del navegador

La consola es como una ventana directa al cerebro de la página web. Desde aquí puedes ejecutar código JavaScript, ver mensajes de error y experimentar libremente.

1. Abre las DevTools y haz clic en la pestaña “Console” (Consola). Verás un área en blanco con un cursor parpadeante esperando tu entrada. Si ya hay algunos mensajes o advertencias, no te preocupes, es normal.

2. Escribe tu primer comando. Haz clic junto al cursor y escribe lo siguiente, luego presiona Enter:

   console.log("Hola desde la consola!")

   Verás que aparece el texto Hola desde la consola! justo debajo. Acabas de ejecutar código JavaScript directamente en el navegador. console.log() es la función que los desarrolladores usan para imprimir mensajes y verificar que su código funciona.

3. Usa la consola como calculadora. Escribe lo siguiente y presiona Enter:

   2 + 2

   El navegador te devuelve 4. Puedes hacer cualquier operación matemática: 10 * 5, 100 / 3, 2 ** 10 (esto último es 2 elevado a la 10). La consola evalúa expresiones JavaScript al instante.

4. Accede a información de la página. Escribe:

   document.title

   Verás el título de la página actual. document es un objeto que representa toda la página web, y .title es una de sus propiedades. Acabas de “hablarle” a la página y te respondió.

5. Modifica la página con JavaScript. Ahora escribe esto:

   document.body.style.backgroundColor = "lightblue"

   El fondo de toda la página cambia a azul claro. Acabas de modificar el estilo de la página usando JavaScript. Esto demuestra algo muy importante: con JavaScript puedes controlar absolutamente todo lo que ves en el navegador.

Precaución

Cuidado con lo que pegas en la consola. Nunca copies y pegues código que encuentres en internet directamente en la consola de tu navegador, especialmente si estás en páginas con datos personales (como tu banco o redes sociales). Personas malintencionadas podrían engañarte para que ejecutes código que robe tu información. Esta técnica se conoce como “Self-XSS”. La consola es segura mientras tú escribas tu propio código o uses código de fuentes que confías.

VS Code: tu editor de código

Hasta ahora podrías haber escrito código en el Bloc de notas, pero eso sería como intentar cocinar una cena gourmet con un camping gas. Necesitas una herramienta profesional, y esa herramienta es Visual Studio Code (VS Code para los amigos).

VS Code es un editor de código gratuito creado por Microsoft que se ha convertido en el editor más popular del mundo entre desarrolladores. No es casualidad: es rápido, personalizable, tiene miles de extensiones y funciona en todos los sistemas operativos.

Instalación

Windows

1. Ve a code.visualstudio.com.
2. Haz clic en el botón grande de descarga (detectará que usas Windows automáticamente).
3. Ejecuta el instalador .exe que se descargó.
4. Acepta los términos de licencia y haz clic en “Siguiente” en cada paso.
5. Importante: en la pantalla de tareas adicionales, marca la casilla “Agregar a PATH” y “Registrar Code como editor para tipos de archivo compatibles”. Esto te permitirá abrir VS Code desde la terminal más adelante.
6. Haz clic en “Instalar” y espera a que termine.

macOS

1. Ve a code.visualstudio.com.
2. Haz clic en el botón de descarga para macOS.
3. Se descargará un archivo .zip. Ábrelo y arrastra Visual Studio Code a tu carpeta de Aplicaciones.
4. Abre VS Code desde Aplicaciones.
5. Si macOS te dice que no puede abrirlo porque es de un desarrollador no identificado, ve a Preferencias del Sistema → Seguridad y privacidad y haz clic en “Abrir de todas formas”.
6. Para usar VS Code desde la terminal: abre VS Code, presiona Cmd + Shift + P, escribe shell command y selecciona “Install ‘code’ command in PATH”.

Linux

1. Ve a code.visualstudio.com.
2. Descarga el paquete .deb (para Ubuntu/Debian) o .rpm (para Fedora/openSUSE).
3. Para .deb, abre una terminal y ejecuta:

   sudo dpkg -i nombre-del-archivo.deb

4. Para .rpm, ejecuta:

   sudo rpm -i nombre-del-archivo.rpm

5. También puedes instalarlo desde Snap:

   sudo snap install code --classic

6. Una vez instalado, puedes abrirlo desde el menú de aplicaciones o escribiendo code en la terminal.

Primer vistazo a VS Code

Cuando abras VS Code por primera vez, verás una interfaz que puede parecer intimidante, pero en realidad es bastante sencilla. Vamos a conocer las cuatro zonas principales:

• Barra lateral izquierda (Sidebar): aquí encontrarás el explorador de archivos, la búsqueda, el control de versiones (Git), las extensiones y más. Es tu panel de navegación principal. Puedes abrirla y cerrarla con Ctrl + B (o Cmd + B en macOS).

• Editor central: es la zona más grande, donde escribes tu código. Puedes abrir varios archivos a la vez en pestañas, dividir la vista para ver dos archivos lado a lado y mucho más.

• Terminal integrada: en la parte inferior puedes abrir una terminal sin salir del editor. Usa Ctrl + (la tecla de acento grave, junto al 1) oCmd + en macOS. Esto es increíblemente útil: no necesitas cambiar entre ventanas.

• Barra de estado (Status Bar): la barra de abajo del todo, generalmente en azul. Te muestra información útil como el lenguaje del archivo actual, la codificación, el número de línea donde está el cursor y los errores del proyecto.

Pro tip

VS Code tiene una función llamada Paleta de Comandos que se abre con Ctrl + Shift + P (o Cmd + Shift + P en macOS). Desde ahí puedes buscar y ejecutar cualquier acción. Si no recuerdas un atajo de teclado o no encuentras una opción, la Paleta de Comandos es tu mejor amiga.

Extensiones recomendadas

Una de las cosas que hace a VS Code tan potente es su sistema de extensiones. Las extensiones añaden funcionalidades al editor, desde cambiar los colores del tema hasta conectar con servicios en la nube. Aquí tienes las que te recomiendo instalar desde el principio:

1. Spanish Language Pack for Visual Studio Code — Si prefieres tener la interfaz de VS Code en español, esta extensión traduce todos los menús y opciones. Después de instalarla, VS Code te pedirá reiniciar y todo aparecerá en español. Es completamente opcional; muchos desarrolladores prefieren trabajar en inglés porque la mayoría de los recursos y documentación están en ese idioma.

2. Live Server — Esta extensión es pura magia. Levanta un servidor local que muestra tu página web y se actualiza automáticamente cada vez que guardas un archivo. No más presionar F5 manualmente. Haces un cambio, guardas con Ctrl + S, y el navegador se actualiza solo. Vas a amar esta extensión.

3. Prettier - Code Formatter — Prettier formatea tu código automáticamente para que sea limpio y consistente. Se acabaron las discusiones sobre si usar 2 o 4 espacios de indentación: Prettier se encarga. Para que funcione al guardar, ve a la configuración de VS Code y activa “Format On Save”.

4. Auto Rename Tag — Cuando escribas HTML y cambies el nombre de una etiqueta de apertura (por ejemplo, de <div> a <section>), esta extensión cambia automáticamente la etiqueta de cierre correspondiente. Parece un detalle pequeño, pero te ahorrará muchos dolores de cabeza y errores tontos.

Cómo instalar extensiones

Instalar extensiones es muy sencillo:

1. Haz clic en el icono de extensiones en la barra lateral izquierda (parece un cuadrado con una pieza saliendo, o presiona Ctrl + Shift + X).
2. En el campo de búsqueda que aparece arriba, escribe el nombre de la extensión.
3. Cuando la encuentres en la lista, haz clic en el botón “Install” (o “Instalar” si ya tienes el pack de español).
4. Listo. Algunas extensiones requieren reiniciar VS Code, pero la mayoría funcionan de inmediato.

⌨️Ejercicio práctico

Es hora de poner todo junto. En este ejercicio vas a conectar VS Code con el navegador usando Live Server para crear tu primer entorno de desarrollo en vivo.

1. Abre VS Code. Si lo acabas de instalar, deberías verlo en tu menú de aplicaciones o puedes escribir code en la terminal.

2. Abre la carpeta del proyecto que creaste en el Capítulo 2. Ve a Archivo → Abrir carpeta (o File → Open Folder) y navega hasta la carpeta mi-primera-web que creaste anteriormente. Si no la tienes, crea una carpeta nueva con un archivo index.html dentro.

3. Instala la extensión Live Server si no lo has hecho ya. Ve al panel de extensiones (Ctrl + Shift + X), busca “Live Server” de Ritwick Dey y haz clic en “Install”.

4. Inicia Live Server. En el explorador de archivos de VS Code (la barra lateral izquierda), haz clic derecho sobre tu archivo index.html y selecciona “Open with Live Server”. Tu navegador predeterminado se abrirá mostrando la página. Fíjate en la barra de direcciones: en lugar de una ruta de archivo, ahora verás algo como http://127.0.0.1:5500/index.html. Eso significa que tienes un servidor local corriendo.

5. Edita tu archivo y observa la magia. Con el navegador y VS Code lado a lado, cambia algo en tu archivo index.html. Puede ser el texto de un título, añadir un párrafo nuevo, cambiar un color. Guarda el archivo con Ctrl + S (o Cmd + S en macOS) y mira el navegador: se actualiza automáticamente sin que toques nada.

Consejo

Ahora tienes un entorno de desarrollo en vivo. Cada cambio que hagas en tu código se refleja al instante en el navegador. Este flujo de trabajo (editar → guardar → ver el resultado) es exactamente lo que usan los desarrolladores profesionales todos los días. A partir de ahora, siempre que trabajes en un proyecto, usa Live Server. Te hará mucho más productivo.

Resumen

En este capítulo has conocido las herramientas fundamentales que todo desarrollador web necesita:

• DevTools del navegador: tu aliado para inspeccionar elementos, modificar estilos en tiempo real y ejecutar JavaScript desde la consola. Recuerda que los cambios son temporales y se pierden al refrescar.

• La consola del navegador: una ventana directa para experimentar con JavaScript, ver errores y depurar tu código. Úsala como tu laboratorio de pruebas.

• Visual Studio Code: el editor de código más popular del mundo. Con su terminal integrada, la Paleta de Comandos y su interfaz intuitiva, será tu hogar como desarrollador.

• Extensiones esenciales: Spanish Language Pack, Live Server, Prettier y Auto Rename Tag. Cuatro extensiones que transforman VS Code en una herramienta todavía más poderosa.

• Live Server: la extensión que conecta tu editor con el navegador y actualiza la página automáticamente cada vez que guardas. Tu nuevo superpoder.

Con estas herramientas configuradas, ya tienes todo lo necesario para empezar a escribir código de verdad.

Siguiente capítuloLa terminalPierde el miedo a la línea de comandos y aprende los comandos esenciales.

→