Introducción

Las herramientas para desarrolladores de Google Chrome, conocidas como Chrome DevTools, son un conjunto de paneles integrados en el navegador que permiten inspeccionar, depurar y medir una página web mientras se está ejecutando. No son una extensión externa: vienen incluidas en Chrome y están pensadas para ayudar a entender qué está pasando en el navegador.

DevTools sirve tanto en desarrollo web en entorno cliente como en desarrollo web en entorno servidor. En cliente permite revisar HTML, CSS, JavaScript, eventos, almacenamiento, accesibilidad y rendimiento. En servidor ayuda a comprobar peticiones HTTP, respuestas, cabeceras, cookies, códigos de estado, errores de API y comportamiento de formularios.

La idea principal es sencilla: una cosa es el código que escribes en tus archivos y otra cosa es lo que el navegador acaba cargando, interpretando y ejecutando. DevTools permite observar esa segunda parte.

Conocimiento previo

• Introducción a HTML
• Fundamentos de JavaScript
• Conceptos básicos de cliente, servidor, petición y respuesta HTTP.
• Uso básico del navegador Chrome.

Referencias

• Chrome DevTools - Documentation
• Chrome DevTools - Overview
• Chrome DevTools - Elements
• Chrome DevTools - Console
• Chrome DevTools - Sources
• Chrome DevTools - Network
• Chrome DevTools - Performance
• Chrome DevTools - Application
• Chrome DevTools - Security
• Chrome DevTools - Lighthouse

Índice

1. Qué es Chrome DevTools
2. Cómo abrir DevTools
3. La interfaz de DevTools
   3.1. Panel Elements
   3.2. Panel Console
   3.3. Panel Sources
   3.4. Panel Network
   3.5. Panel Performance
   3.6. Panel Memory
   3.7. Panel Application
   3.8. Panel Security
   3.9. Panel Lighthouse
4. Simuladores y condiciones de visualización
   4.1. Device Mode
   4.2. Rendering
5. Otras herramientas y utilidades
6. Usos en el desarrollo Front-End y Back-End
7. Ejercicios

1. Qué es Chrome DevTools

Chrome DevTools es el conjunto de herramientas de desarrollo integrado en Google Chrome. Permite ver cómo interpreta el navegador una página, qué recursos descarga, qué errores aparecen, qué estilos se aplican, qué código JavaScript se ejecuta y cuánto tarda cada parte.

DevTools no modifica por sí mismo los archivos del proyecto que se visualiza por el navegador. Cuando editas HTML o CSS con está herramienta, estás haciendo cambios temporales sobre la página cargada en memoria. Si recargas, esos cambios se pierden salvo que uses herramientas específicas como Workspaces o copies los cambios a tus archivos.

Usos habituales:

• Comprobar si un archivo CSS o JavaScript se ha cargado correctamente.
• Ver por qué un estilo no se aplica.
• Ejecutar instrucciones JavaScript rápidas.
• Leer errores de consola.
• Depurar una función paso a paso.
• Ver peticiones GET, POST, PUT o DELETE.
• Revisar cabeceras, cookies y códigos de estado HTTP.
• Simular pantalla móvil.
• Medir rendimiento.
• Revisar problemas de seguridad o accesibilidad.

2. Cómo abrir DevTools

Hay varias formas de abrir DevTools:

También puedes abrirlo desde el menú de Chrome.

Cuando trabajas, lo más habitual es usar F12 o clic derecho sobre un elemento y elegir Inspect.

3. La interfaz de DevTools

DevTools se organiza en paneles. Cada panel se centra en una parte del desarrollo web: estructura, estilos, consola, código fuente, red, almacenamiento, rendimiento o seguridad.

Las principales zonas que componen la interfaz son:

• Barra de paneles: muestra pestañas como Elements, Console, Sources, Network, Performance, Application o Security.
• Área principal: muestra el contenido del panel seleccionado.
• Paneles laterales: ofrecen información complementaria, como estilos, propiedades, cookies o detalles de una petición.
• Barra superior: incluye herramientas como selector de elementos, modo dispositivo, configuración y menú de comandos.
• Drawer inferior: zona desplegable que puede mostrar Console, Network conditions, Rendering y otras herramientas.

Si no encuentras un panel, puedes abrir el menú de comandos con Ctrl + Shift + P o Cmd + Shift + P y escribir su nombre.

3.1. Panel Elements

El panel Elements muestra la estructura del DOM de la página, es decir, la jerarquía de elementos HTML y los estilos CSS aplicados al elemento seleccionado.

Sirve para:

• Ver la estructura real del DOM.
• Seleccionar elementos visualmente.
• Comprobar clases, atributos y contenido.
• Activar, desactivar o modificar reglas CSS temporalmente.
• Ver qué regla CSS gana cuando hay conflictos.
• Probar cambios de diseño antes de llevarlos al archivo CSS.
• Revisar pseudoestados como :hover, :focus o :active.

Un ejemplo sencillo de HTML para inspeccionar:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <article class="producto destacado">
    <h2>Teclado mecánico</h2>
    <p>49.95 €</p>
    <button>Añadir al carrito</button>
  </article>
</body>
</html>

.producto {
  border: 1px solid #ddd;
  padding: 1rem;
}

.destacado {
  background: #fff7d6;
}

Con este ejemplo podrías comprobar:

• Si el article tiene realmente las clases de estilo producto y destacado.
• Si el botón está dentro del componente correcto.
• Si el precio está usando la clase esperada.
• Qué estilos se heredan y cuáles se sobrescriben.

Además, en la zona Styles puedes modificar reglas temporalmente para ver como afectan al diseño. Por ejemplo, cambiar el color de fondo de .destacado o añadir un borde al button. Estos cambios no se guardan en tus archivos, pero te permiten probar rápidamente ideas de diseño.

Es importante tener en cuenta que si una propiedad css aparece tachada, significa que otra regla con más prioridad la está sobrescribiendo o que no se aplica en ese contexto. Se puede pulsar sobre la propiedad tachada para ver qué regla la está anulando.

3.2. Panel Console

El panel Console es una de las herramientas más utilizadas de las DevTools. Permite visualizar mensajes generados por JavaScript y ejecutar instrucciones directamente sobre la página que se encuentra abierta en el navegador.

La consola resulta especialmente útil durante el desarrollo, ya que facilita la detección de errores y la comprobación del funcionamiento del código sin necesidad de modificar los archivos del proyecto.

Desde el panel podemos:

• Visualizar errores y advertencias de JavaScript.
• Mostrar mensajes de las instrucciones console.log(), console.warn() y console.error().
• Ejecutar instrucciones JavaScript de formar interactiva.
• Inspeccionar variables y objectos del código.
• Acceder y modificar temporalmente el DOM.
• Comprobar el contenido de localStorage, sessionStorage y cookies.
• Detectar errores relacionados con recursos que no se han podido cargar.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Document</title>
  <script src="app.js" defer></script>
</head>
<body>
  <button id="guardar">Guardar</button>
</body>
</html>

const boton = document.querySelector('#guardar');

boton.addEventListener('click', () => {
  console.log('Formulario enviado');
  console.warn('Advertencia: acción pendiente');
  console.error('Error: acción no completada');
});

Al pulsar el botón aparecerá en la consola apareceran varios mensajes. Si el selector #guardar no existe o no coincide con ningún elemento, aparecerá un error porque boton será null. Console te ayuda a localizar el archivo y la línea aproximada del problema.

Además del mensaje de error, la consola indica el archivo y la línea donde se ha producido, lo que facilita la depuración.

Una de las ventajas de Consola es que permite ejecutar código JavaScript directamente sobre la página cargada.

Algunos comandos disponibles:

document.title // Obtiene el título de la página
document.querySelector('h1') // Selecciona el primer elemento h1
document.querySelectorAll('button').length // Cuenta el número de botones
localStorage // Permite consultar la información almacenada en el navegador para esa página
location.href // Obtiene la URL actual

3.3. Panel Sources

El panel Sources permite visualizar los archivos que ha cargado el navegador y depurar el código JavaScript paso a paso.

Mientras que Console ayuda a detectar errores mediante mensajes, Sources permite detener la ejecución del programa en un punto concreto y analizar qué está ocurriendo en ese momento.

Es una herramienta muy útil cuando el programa no produce el resultado esperado y queremos averiguar por qué.

Con este panel podemos:

• Examinar los archivos JavaScript cargados por la página.
• Colocar puntos de interrupción (breakpoints).
• Pausar la ejecución del programa.
• Ver valores de variables en un momento concreto.
• Ejecutar el código línea a línea.
• Analizar el recorrido que sigue el programa.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Document</title>
  <script src="carrito.js" defer></script>
</head>
<body>
  <button id="calcular">Calcular total</button>
</body>
</html>

const boton = document.querySelector('#calcular');

boton.addEventListener('click', () => {
  calcularTotal([
    { nombre: 'Teclado', precio: 49.95, cantidad: 1 },
    { nombre: 'Ratón', precio: 19.95, cantidad: 2 },
    { nombre: 'Monitor', precio: 199.95, cantidad: 1 }
  ]);
});

function calcularTotal(productos) {
  let total = 0;

  for (const producto of productos) {
    total += producto.precio * producto.cantidad;
  }

  return total;
}

Si el resultado obtenido no es el esperado, podemos colocar un breakpoint dentro del bucle for.

Cuando el programa llegue a esa línea, la ejecución se detendrá y podremos comprobar, por ejemplo:

• El valor de producto.precio.
• El valor de producto.cantidad.
• El valor acumulado de total.

De esta forma es posible averiguar en qué momento aparece el error y qué datos lo están provocando.

Controles básicos de depuración

Una vez que el programa está detenido, Chrome ofrece varios controles para avanzar por el código.

3.4. Panel Network

El panel Network muestra todas las peticiones que realiza una página web mientras se carga o mientras el usuario interactúa con ella.

Cada vez que el navegador necesita un recurso, como un documento HTML, un archivo CSS, un programa JavaScript, una imagen o una llamada a una API, aparece registrado en este panel.

Gracias a Network podemos comprobar qué recursos se han solicitado, cuánto han tardado en descargarse y si el servidor ha respondido correctamente.

Desde este panel podemos:

• Ver todos los recursos cargados por la página.
• Comprobar si un archivo se ha descargado correctamente o ha producido un error.
• Consultar el método HTTP utilizado (GET, POST, etc.).
• Ver el código de estado devuelto por el servidor (200, 404, 500, etc.).
• Examinar la información enviada y recibida en cada petición.
• Visualizar respuestas en formato JSON.
• Analizar los tiempos de carga de cada recurso.
• Desactivar la caché durante el desarrollo para forzar la descarga de los archivos actualizados.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Document</title>
  <script src="productos.js" defer></script>
</head>
<body>
  <h1>Productos</h1>
  <ul id="lista-productos"></ul>
</body>
</html>

async function cargarProductos() {
  const lista = document.querySelector('#lista-productos');

  const respuesta = await fetch('https://dummyjson.com/products');
  const datos = await respuesta.json();

  datos.products.forEach(producto => {
    const li = document.createElement('li');
    li.textContent = `nombre: ${producto.title} - precio: ${producto.price}`;
    lista.appendChild(li);
  });
}

cargarProductos();

Al ejecutar este código aparecerá una nueva entrada en el panel Network correspondiente a la petición realizada a: https://dummyjson.com/products.

Al seleccionar esa petición podremos consultar diferente información.

• Headers: Dirección solicitada, método HTTP, cabeceras y código de estado de la respuesta.
• Preview: Vista organizada de la respuesta recibida.
• Response: Contenido completo devuelto por el servidor.
• Timing: Tiempo empleado en cada fase de la petición.

Durante cualquier desarrollo, este panel permite responder a preguntas como:

• ¿Se ha cargado correctamente un archivo CSS o JavaScript?
• ¿La petición se ha enviado al servidor?
• ¿El servidor ha respondido correctamente?
• ¿Se han recibido los datos esperados?
• ¿La respuesta contiene información en formato JSON?
• ¿Qué recurso está haciendo que la página tarde más en cargar?

3.5. Panel Performance

El panel Performance permite analizar el rendimiento de una página web. Mediante una grabación, registra todo lo que ocurre mientras la página se carga o mientras el usuario interactúa con ella.

Gracias a esta información es posible identificar qué operaciones consumen más tiempo y descubrir por qué una página responde lentamente.

Desde este apartado es posible:

• Analizar el tiempo de carga de una página.
• Detectar funciones JavaScript que tardan demasiado en ejecutarse.
• Comprobar cuándo se renderiza el contenido en pantalla.
• Identificar operaciones que bloquean la interfaz de usuario.
• Analizar el comportamiento de la página durante una interacción.
• Obtener recomendaciones para mejorar el rendimiento.

¿Cómo funciona?

1. Abre las DevTools y selecciona la pestaña Performance.
2. Pulsa el botón Record.
3. Recarga la página o realiza la acción que deseas analizar.
4. Pulsa Stop para finalizar la grabación.
5. Examina la línea de tiempo para identificar las operaciones que más tiempo han consumido.

¿Cuándo utilizar Performance?

• La página tarda demasiado en cargarse
• Responde lentamente a las acciones del usuario
• Presenta bloqueos o pequeños “parones” durante la navegación
• Realiza animaciones poco fluidas

3.6. Panel Memory

El panel Memory permite analizar cómo utiliza la memoria una aplicación web mientras se está ejecutando.

Su principal objetivo es detectar situaciones en las que el navegador mantiene en memoria objetos que ya no son necesarios. Este tipo de problemas se conocen como fugas de memoria (memory leaks) y pueden provocar que la aplicación consuma cada vez más memoria y funcione más lentamente con el paso del tiempo.

En proyectos iniciales no será el panel más usado, pero conviene saber para qué sirve.

Casos habituales:

• Una aplicación consume cada vez más memoria cuanto más tiempo permanece abierta.
• La página comienza a responder lentamente después de utilizarla durante un largo periodo.
• Se crean muchos objetos que nunca llegan a eliminarse.
• Existen temporizadores o escuchadores de eventos (event listeners) que continúan activos cuando ya no deberían.
• Una aplicación de una sola página (SPA) mantiene componentes o datos antiguos que ya no se utilizan.

Un ejemplo de cómo detectar fuga de memoria

Supon una aplicación web que permite navegar entre distintas secciones.

1. Al iniciar la aplicación, el navegador utiliza aproximadamente 50 MB de memoria.
2. El usuario navega por varias secciones y la aplicación crea nuevos objetos para mostrar información. Como consecuencia, el consumo de memoria aumenta a 80 MB.
3. El usuario vuelve a la página principal. En ese momento, los objetos utilizados en las secciones anteriores ya no deberían ser necesarios y, por tanto, deberían liberarse de la memoria.
4. Sin embargo, al volver a abrir esas mismas secciones, los objetos anteriores siguen ocupando memoria y se crean otros nuevos. El consumo aumenta nuevamente (por ejemplo, hasta 110 MB) y continúa creciendo cada vez que el usuario repite la operación.

Cuando se detecte un aumento de memoria no siempre significa que exista una fuga. Es normal que una aplicación necesite más memoria mientras trabaja. El problema aparece cuando esa memoria sigue ocupada aunque los objetos ya no sean necesarios.

3.7. Panel Application

El panel Application permite consultar la información que una página web almacena en el navegador del usuario.

Muchas aplicaciones necesitan guardar datos para recordar preferencias, mantener una sesión iniciada o almacenar información temporal. Este panel facilita visualizar y modificar esos datos durante el desarrollo.

Desde este apartado podemos consultar, entre otros:

• Local Storage, para almacenar información que permanece incluso después de cerrar el navegador.
• Session Storage, para guardar datos mientras la pestaña permanece abierta.
• Cookies, utilizadas habitualmente para identificar sesiones o almacenar pequeñas cantidades de información.
• Otros recursos, utilizados por aplicaciones web más avanzadas, como IndexedDB, Cache Storage o Service Workers.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Document</title>
  <script src="preferencias.js" defer></script>
</head>
<body>
  <h1>Preferencias de usuario</h1>
</body>
</html>

localStorage.setItem('tema', 'oscuro');
const tema = localStorage.getItem('tema');

En Application puedes comprobar si la clave tema existe, qué valor tiene y eliminarla para probar el comportamiento inicial de la aplicación.

Application puede ser muy útil para revisar cookies de sesión, flags como HttpOnly, Secure o SameSite, y comprobar si la sesión se conserva entre peticiones.

3.8. Panel Security

El panel Security permite comprobar si la comunicación entre el navegador y el servidor se realiza de forma segura.

Actualmente, la mayoría de los sitios web utilizan el protocolo HTTPS, que cifra la información intercambiada entre el navegador y el servidor para protegerla frente a accesos no autorizados.

Gracias a este panel podemos verificar que la conexión es segura y detectar posibles problemas relacionados con la configuración de seguridad del sitio web.

Este panel sirve para:

• Comprobar si la página utiliza HTTPS.
• Consultar la información del certificado digital del sitio web.
• Detectar problemas relacionados con la conexión segura.
• Identificar recursos que no se han cargado de forma segura.

Contenido mixto

Un problema habitual es el llamado contenido mixto.

Se produce cuando una página cargada mediante HTTPS intenta descargar algún recurso utilizando HTTP, por ejemplo una imagen, un archivo JavaScript o una hoja de estilos.

Página → https://www.ejemplo.com ✔
Imagen → http://www.ejemplo.com/logo.png ✖

Los navegadores consideran esta situación insegura y pueden bloquear ese recurso o mostrar una advertencia al usuario.

3.9. Panel Lighthouse

El panel Lighthouse permite analizar automáticamente una página web y generar un informe con recomendaciones para mejorar distintos aspectos de la aplicación.

A diferencia de otros paneles de las DevTools, Lighthouse no muestra información en tiempo real, sino que realiza una auditoría de la página y evalúa diferentes criterios de calidad.

Entre los aspectos que puede analizar se encuentran:

• Rendimiento, detectando recursos que ralentizan la carga de la página.
• Accesibilidad, comprobando si la página resulta más fácil de utilizar para personas con distintas capacidades.
• Buenas prácticas, revisando el uso correcto de determinadas tecnologías web.
• SEO (posicionamiento en buscadores), identificando algunos problemas básicos que pueden afectar a la visibilidad de la página.
• PWA (Progressive Web App), evaluando si la aplicación cumple determinados requisitos para comportarse como una aplicación instalable.

¿Qué tipo de problemas puede detectar?

• Imágenes demasiado grandes o poco optimizadas.
• Recursos que retrasan la carga de la página.
• Elementos sin texto alternativo (alt) para las imágenes.
• Problemas de contraste entre el texto y el fondo.
• Uso incorrecto o incompleto de HTTPS.
• Algunas recomendaciones básicas relacionadas con el SEO.

Interpreta Lighthouse con cuidado. Una puntuación no explica por sí sola todo el estado de una web. Lee cada recomendación y comprueba si aplica al contexto del proyecto.

4. Simuladores y condiciones de visualización

Además de los paneles principales, las herramientas de desarrollo de Chrome incluyen funciones que permiten comprobar cómo se comporta una página en distintos dispositivos y condiciones de visualización.

Estas herramientas resultan muy útiles para verificar que una aplicación ofrece una buena experiencia de usuario antes de publicarla.

4.1. Device Mode

Device Mode permite simular el funcionamiento de una página web en diferentes dispositivos móviles sin necesidad de disponer físicamente de ellos.

Desde este modo es posible comprobar cómo se adapta la interfaz a distintos tamaños de pantalla y verificar que el diseño responsive funciona correctamente.

Con este modo podemos:

• Simular teléfonos móviles y tabletas.
• Probar distintos tamaños de pantalla.
• Cambiar la orientación entre vertical y horizontal.
• Modificar el nivel de zoom y la densidad de píxeles.
• Introducir dimensiones personalizadas para probar resoluciones concretas.

4.2. Rendering

La herramienta Rendering permite activar diferentes opciones de visualización para analizar cómo se representa una página y facilitar la detección de determinados problemas.

Aunque no es una herramienta de uso diario, resulta útil cuando se desea comprobar el comportamiento de la aplicación en condiciones especiales.

Entre sus opciones más utilizadas se encuentran:

• Emular el modo claro o oscuro.
• Simular la preferencia de reducir animaciones (prefers-reduced-motion).
• Mostrar las zonas de la página que se vuelven a dibujar (Paint Flashing).
• Comprobar problemas relacionados con el renderizado de la interfaz.

Esta herramienta no tiene un panel propio, sino que se encuentra dentro del Drawer inferior de DevTools. Para acceder a ella, existen dos métodos:

1. Abrir el Drawer inferior con Esc y pulsa en los tres botones para seleccionar Rendering.
2. Abrir el menú de comandos con Ctrl + Shift + P o Cmd + Shift + P, escribir “Rendering” y seleccionar la opción correspondiente.

5. Otras herramientas y utilidades

Además de los paneles principales, existen numerosas herramientas especializadas que ayudan a analizar, depurar y optimizar aplicaciones web.

Aunque no se utilizan con tanta frecuencia como los paneles explicados anteriormente, conviene conocer su existencia, ya que pueden resultar muy útiles en determinadas situaciones.

6. Usos en el desarrollo Front-End y Back-End

Las DevTools son una herramienta fundamental durante el desarrollo de aplicaciones web. Aunque suelen asociarse al desarrollo del lado cliente, también resultan de gran utilidad para quienes trabajan en el servidor.

Dependiendo del tipo de tarea que se esté realizando, algunos paneles tendrán mayor protagonismo que otros.

En el desarrollo Front-End, las DevTools permiten inspeccionar y depurar el código que se ejecuta en el navegador.

Los paneles más utilizados son:

• Elements: Inspeccionar y modificar temporalmente el HTML y el CSS de la página.
• Console: Detectar errores JavaScript y ejecutar instrucciones de prueba.
• Sources: Depurar el código JavaScript mediante puntos de interrupción (breakpoints).
• Network: Comprobar que los recursos (HTML, CSS, JavaScript, imágenes, etc.) se cargan correctamente.
• Device Mode: Verificar el comportamiento de la página en distintos tamaños de pantalla.
• Performance: Analizar el rendimiento y localizar tareas que ralentizan la aplicación.

Aunque el código del servidor se ejecuta fuera del navegador, las DevTools también son una ayuda importante para comprobar la comunicación entre el cliente y el servidor.

Los paneles más utilizados son:

• Network: Analizar las peticiones HTTP, las respuestas del servidor y los códigos de estado.
• Application: Consultar cookies y otros datos almacenados por el navegador.
• Security: Comprobar que la comunicación utiliza HTTPS y detectar problemas relacionados con la seguridad de la conexión.
• Console: Visualizar errores generados por el navegador durante la comunicación con el servidor.

7. Ejercicios

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Operadores matemáticos</title>
</head>
<body>
  <h1>Ejemplos de operaciones</h1>
  <p>5 + 3 = 8</p>
  <p>5 - 3 = 2</p>
  <p>5 × 3 = 15</p>
  <p>6 ÷ 2 = 3</p>
  <p>7 % 2 = 1</p>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
 <title>Cálculo de descuento</title>
 <script src="descuento.js" defer></script>
</head>
<body>
 <h1>Cálculo de descuento</h1>
 <p>Abre la consola para ver el resultado.</p>
</body>
</html>

const precio = 80;
const descuento = 20;

function calcularPrecioFinal(precio, descuento {
  const cantidadDescontada = precio * descuento / 100;
  const precioFinal precio - cantidadDescontada;
  return precioFinal;
}

const resultado = calcularPrecioFinal(precio, descuento);
console.log("Precio final: " resultado);

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Operaciones</title>
  <script src="operaciones.js" defer></script>
</head>
<body>
  <h1>Suma de números</h1>
  <p>Abre la consola para ver el resultado.</p>
</body>
</html>

const numeros = [5, 8, 3, 4];
let total = 20;

for (const numero of numeros) {
    total = numero;
}

console.log("Resultado:", "20");

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Peticiones HTTP</title>
  <script src="peticiones.js" defer></script>
</head>
<body>
  <h1>Peticiones</h1>
</body>
</html>

async function cargarDatos() {
  await fetch("https://dummyjson.com/products");
  await fetch("https://dummyjson.com/usuarios");
}
cargarDatos();

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Preferencias de usuario</title>
  <script src="preferencias.js" defer></script>
</head>
<body>
  <h1>Preferencias de usuario</h1>
</body>
</html>

localStorage.setItem("usuario", "María");
localStorage.setItem("tema", "oscuro");
localStorage.setItem("idioma", "es");
document.cookie = "ultimaVisita=2026-07-11; path=/";