Inspeccionar HTML con DevTools

¡Bienvenido a una de las lecciones más emocionantes de tu camino en desarrollo web! Hoy vas a aprender un truco secreto que los desarrolladores usan todos los días para entender cómo están construidos los sitios web.

Gafas de rayos X para la web

Todos los navegadores modernos incluyen una función potente integrada llamada Developer Tools, o DevTools.

Piensa en DevTools como unas gafas de rayos X para internet. Te permite mirar detrás del telón de cualquier sitio y ver el "esqueleto" HTML oculto que lo mantiene todo unido.

Cómo abrirlo

Acceder a esta herramienta es muy fácil. No necesitas instalar nada especial. Solo sigue estos pasos:

1. Abre tu navegador y entra a cualquier página web.
2. Haz clic derecho sobre cualquier elemento en pantalla, como una imagen o un bloque de texto.
3. Selecciona "Inspeccionar" o "Inspeccionar elemento" en el menú.
4. Se abrirá un panel nuevo. En la parte superior de ese panel, asegúrate de tener seleccionada la pestaña "Elements".

Navegar por el árbol del DOM

Dentro de la pestaña Elements verás un bloque grande de código. Esa es la estructura HTML de la página, organizada en una jerarquía llamada DOM (Document Object Model).

Puedes imaginar el DOM como un gran árbol familiar plegable. Notarás pequeñas flechas o triángulos junto a algunas etiquetas HTML:

• Haz clic en una flecha hacia la derecha para expandir una etiqueta y ver qué hay dentro.
• Haz clic en una flecha hacia abajo para ocultar o contraer esas etiquetas internas.

Este árbol plegable facilita explorar grandes cantidades de código sin sentirte abrumado.

El superpoder (edición en vivo)

¡Ahora viene la mejor parte! DevTools te da el superpoder de editar en vivo. Puedes cambiar el código del sitio directamente en tu pantalla.

• Encuentra un texto o etiqueta HTML en el panel Elements.
• Haz doble clic sobre él para seleccionarlo.
• Escribe algo totalmente nuevo.
• Pulsa Enter en tu teclado.

¡La página se actualizará al instante con tus cambios!

Ejercicio práctico

Probemos tu nuevo superpoder con una misión rápida y divertida.

1. Ve a un sitio web real y activo, como un portal de noticias popular o readlax.com.
2. Encuentra el título principal de la página (normalmente es una etiqueta <h1>).
3. Haz clic derecho en ese título y elige "Inspeccionar".
4. En el panel Elements, haz doble clic en el texto del titular.
5. Borra el texto, escribe tu nombre y pulsa Enter.

¡Felicidades! Ahora eres la estrella de la portada.

Aviso importante

Ver tu nombre en un sitio famoso puede hacerte pensar: "Un momento, ¿acabo de hackear esta web?"

La respuesta es un rotundo no.

Cuando visitas una página, tu navegador solo descarga una copia local y temporal del código desde internet. Cuando usas DevTools, solo cambias ese archivo temporal en tu propio ordenador.

En cuanto pulses "Actualizar", todos tus cambios desaparecerán. El sitio real se recargará desde el servidor, exactamente como estaba antes. Así que experimenta sin miedo: no puedes romper nada de forma permanente.

Resumen

• DevTools es una función integrada del navegador que te permite ver el código de un sitio web.
• Puedes abrirlo en cualquier momento con clic derecho y "Inspeccionar".
• El DOM está estructurado como un árbol plegable para expandir u ocultar etiquetas HTML anidadas.
• Puedes hacer doble clic en etiquetas o texto del panel Elements para editarlos en vivo.
• Tus cambios son temporales y seguros. Al actualizar la página, se borra todo y vuelve el sitio original.