Introducció

Les eines per a desenvolupadors de Google Chrome, conegudes com a Chrome DevTools, són un conjunt de panells integrats al navegador que permeten inspeccionar, depurar i mesurar una pàgina web mentre s’està executant. No són una extensió externa: venen incloses a Chrome i estan pensades per ajudar a entendre què està passant al navegador.

DevTools serveix tant en desenvolupament web en entorn client com en desenvolupament web en entorn servidor. En client permet revisar HTML, CSS, JavaScript, esdeveniments, emmagatzematge, accessibilitat i rendiment. En servidor ajuda a comprovar peticions HTTP, respostes, capçaleres, galetes, codis d’estat, errors d’API i comportament de formularis.

La idea principal és senzilla: una cosa és el codi que escrius als teus fitxers i una altra cosa és el que el navegador acaba carregant, interpretant i executant. DevTools permet observar aquesta segona part.

Coneixement previ

• Introducció a HTML
• Fonaments de JavaScript
• Conceptes bàsics de client, servidor, petició i resposta HTTP.
• Ús bàsic del navegador Chrome.

Referències

• 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

Índex

1. Què és Chrome DevTools
2. Com obrir DevTools
3. La interfície de DevTools 3.1. Panell Elements 3.2. Panell Console 3.3. Panell Sources 3.4. Panell Network 3.5. Panell Performance 3.6. Panell Memory 3.7. Panell Application 3.8. Panell Security 3.9. Panell Lighthouse
4. Simuladors i condicions de visualització 4.1. Device Mode 4.2. Rendering
5. Altres eines i utilitats
6. Usos en el desenvolupament Front-End i Back-End
7. Exercicis

1. Què és Chrome DevTools

Chrome DevTools és el conjunt d’eines de desenvolupament integrat a Google Chrome. Permet veure com interpreta el navegador una pàgina, quins recursos descarrega, quins errors apareixen, quins estils s’apliquen, quin codi JavaScript s’executa i quant triga cada part.

DevTools no modifica per si mateix els fitxers del projecte que es visualitza al navegador. Quan edites HTML o CSS amb aquesta eina, estàs fent canvis temporals sobre la pàgina carregada a memòria. Si la recarregues, aquests canvis es perden excepte que utilitzis eines específiques com Workspaces o copiïs els canvis als teus fitxers.

Usos habituals:

• Comprovar si un fitxer CSS o JavaScript s’ha carregat correctament.
• Veure per què un estil no s’aplica.
• Executar instruccions JavaScript ràpides.
• Llegir errors de consola.
• Depurar una funció pas a pas.
• Veure peticions GET, POST, PUT o DELETE.
• Revisar capçaleres, galetes i codis d’estat HTTP.
• Simular pantalla mòbil.
• Mesurar rendiment.
• Revisar problemes de seguretat o accessibilitat.

2. Com obrir DevTools

Hi ha diverses formes d’obrir DevTools:

També pots obrir-lo des del menú de Chrome.

Quan treballes, el més habitual és usar F12 o clic dret sobre un element i triar Inspect.

3. La interfície de DevTools

DevTools s’organitza en panells. Cada panell se centra en una part del desenvolupament web: estructura, estils, consola, codi font, xarxa, emmagatzematge, rendiment o seguretat.

Les principals zones que componen la interfície són:

• Barra de panells: mostra pestanyes com Elements, Console, Sources, Network, Performance, Application o Security.
• Àrea principal: mostra el contingut del panell seleccionat.
• Panells laterals: ofereixen informació complementària, com estils, propietats, galetes o detalls d’una petició.
• Barra superior: inclou eines com el selector d’elements, mode dispositiu, configuració i menú de comandaments.
• Drawer inferior: zona desplegable que pot mostrar Console, Network conditions, Rendering i altres eines.

Si no trobes un panell, pots obrir el menú de comandaments amb Ctrl + Shift + P o Cmd + Shift + P i escriure el seu nom.

3.1. Panell Elements

El panell Elements mostra l’estructura del DOM de la pàgina, és a dir, la jerarquia d’elements HTML i els estils CSS aplicats a l’element seleccionat.

Serveix per:

• Veure l’estructura real del DOM.
• Seleccionar elements visualment.
• Comprovar classes, atributs i contingut.
• Activar, desactivar o modificar regles CSS temporalment.
• Veure quina regla CSS guanya quan hi ha conflictes.
• Provar canvis de disseny abans de portar-los al fitxer CSS.
• Revisar pseudoestats com :hover, :focus o :active.

Un exemple senzill d’HTML per inspeccionar:

<!DOCTYPE html>
<html lang="ca">
<head>
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <article class="producte destacat">
    <h2>Teclat mecànic</h2>
    <p>49.95 €</p>
    <button>Afegir al carret</button>
  </article>
</body>
</html>

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

.destacado {
  background: #fff7d6;
}

Amb aquest exemple podries comprovar:

• Si l’article té realment les classes d’estil producto i destacado.
• Si el botó està dins del component correcte.
• Si el preu està utilitzant la classe esperada.
• Quins estils s’hereden i quins se sobreescriuen.

A més, a la zona Styles pots modificar regles temporalment per veure com afecten al disseny. Per exemple, canviar el color de fons de .destacado o afegir una vora al button. Aquests canvis no es guarden als teus fitxers, però et permeten provar ràpidament idees de disseny.

És important tenir en compte que si una propietat CSS apareix ratllada, significa que una altra regla amb més prioritat l’està sobreescrivint o que no s’aplica en aquell context. Es pot fer clic sobre la propietat ratllada per veure quina regla l’està anul·lant.

3.2. Panell Console

El panell Console és una de les eines més utilitzades de les DevTools. Permet visualitzar missatges generats per JavaScript i executar instruccions directament sobre la pàgina que es troba oberta al navegador.

La consola resulta especialment útil durant el desenvolupament, ja que facilita la detecció d’errors i la comprovació del funcionament del codi sense necessitat de modificar els fitxers del projecte.

Des del panell podem:

• Visualitzar errors i advertències de JavaScript.
• Mostrar missatges de les instruccions console.log(), console.warn() i console.error().
• Executar instruccions JavaScript de forma interactiva.
• Inspeccionar variables i objectes del codi.
• Accedir i modificar temporalment el DOM.
• Comprovar el contingut de localStorage, sessionStorage i galetes.
• Detectar errors relacionats amb recursos que no s’han pogut carregar.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<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('Formulari enviat');
  console.warn('Advertència: acció pendent');
  console.error('Error: acció no completada');
});

En pulsar el botó apareixeran a la consola diversos missatges. Si el selector #guardar no existeix o no coincideix amb cap element, apareixerà un error perquè boton serà null. Console t’ajuda a localitzar el fitxer i la línia aproximada del problema.

A més del missatge d’error, la consola indica el fitxer i la línia on s’ha produït, cosa que facilita la depuració.

Un dels avantatges de la Consola és que permet executar codi JavaScript directament sobre la pàgina carregada.

Alguns comandaments disponibles:

document.title // Obté el títol de la pàgina
document.querySelector('h1') // Selecciona el primer element h1
document.querySelectorAll('button').length // Compta el nombre de botons
localStorage // Permet consultar la informació emmagatzemada al navegador per a aquesta pàgina
location.href // Obté la URL actual

3.3. Panell Sources

El panell Sources permet visualitzar els fitxers que ha carregat el navegador i depurar el codi JavaScript pas a pas.

Mentre que Console ajuda a detectar errors mitjançant missatges, Sources permet aturar l’execució del programa en un punt concret i analitzar què està passant en aquell moment.

És una eina molt útil quan el programa no produeix el resultat esperat i volem esbrinar per què.

Amb aquest panell podem:

• Examinar els fitxers JavaScript carregats per la pàgina.
• Col·locar punts d’interrupció (breakpoints).
• Pausar l’execució del programa.
• Veure valors de variables en un moment concret.
• Executar el codi línia a línia.
• Analitzar el recorregut que segueix el programa.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<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: 'Teclat', precio: 49.95, cantidad: 1 },
    { nombre: 'Ratolí', 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 resultat obtingut no és l’esperat, podem col·locar un breakpoint dins del bucle for.

Quan el programa arribi a aquesta línia, l’execució s’aturarà i podrem comprovar, per exemple:

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

D’aquesta manera és possible esbrinar en quin moment apareix l’error i quines dades l’estan provocant.

Controls bàsics de depuració

Un cop el programa està aturat, Chrome ofereix diversos controls per avançar pel codi.

3.4. Panell Network

El panell Network mostra totes les peticions que realitza una pàgina web mentre es carrega o mentre l’usuari interactua amb ella.

Cada vegada que el navegador necessita un recurs, com un document HTML, un fitxer CSS, un programa JavaScript, una imatge o una crida a una API, queda registrat en aquest panell.

Gràcies a Network podem comprovar quins recursos s’han sol·licitat, quant han trigat a descarregar-se i si el servidor ha respost correctament.

Des d’aquest panell podem:

• Veure tots els recursos carregats per la pàgina.
• Comprovar si un fitxer s’ha descarregat correctament o ha produït un error.
• Consultar el mètode HTTP utilitzat (GET, POST, etc.).
• Veure el codi d’estat retornat pel servidor (200, 404, 500, etc.).
• Examinar la informació enviada i rebuda en cada petició.
• Visualitzar respostes en format JSON.
• Analitzar els temps de càrrega de cada recurs.
• Desactivar la memòria cau durant el desenvolupament per forçar la descàrrega dels fitxers actualitzats.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
  <title>Document</title>
  <script src="productos.js" defer></script>
</head>
<body>
  <h1>Productes</h1>
  <ul id="llista-productes"></ul>
</body>
</html>

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

  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();

En executar aquest codi apareixerà una nova entrada al panell Network corresponent a la petició realitzada a: https://dummyjson.com/products.

En seleccionar aquesta petició podrem consultar diferent informació.

• Headers: Adreça sol·licitada, mètode HTTP, capçaleres i codi d’estat de la resposta.
• Preview: Vista organitzada de la resposta rebuda.
• Response: Contingut complet retornat pel servidor.
• Timing: Temps emprat en cada fase de la petició.

Durant qualsevol desenvolupament, aquest panell permet respondre a preguntes com:

• S’ha carregat correctament un fitxer CSS o JavaScript?
• La petició s’ha enviat al servidor?
• El servidor ha respost correctament?
• S’han rebut les dades esperades?
• La resposta conté informació en format JSON?
• Quin recurs està fent que la pàgina trigui més a carregar?

3.5. Panell Performance

El panell Performance permet analitzar el rendiment d’una pàgina web. Mitjançant una gravació, registra tot el que passa mentre la pàgina es carrega o mentre l’usuari interactua amb ella.

Gràcies a aquesta informació és possible identificar quines operacions consumeixen més temps i descobrir per què una pàgina respon lentament.

Des d’aquest apartat és possible:

• Analitzar el temps de càrrega d’una pàgina.
• Detectar funcions JavaScript que triguen massa a executar-se.
• Comprovar quan es renderitza el contingut a la pantalla.
• Identificar operacions que bloquegen la interfície d’usuari.
• Analitzar el comportament de la pàgina durant una interacció.
• Obtenir recomanacions per millorar el rendiment.

Com funciona?

1. Obre les DevTools i selecciona la pestanya Performance.
2. Prem el botó Record.
3. Recarrega la pàgina o realitza l’acció que vols analitzar.
4. Prem Stop per finalitzar la gravació.
5. Examina la línia de temps per identificar les operacions que més temps han consumit.

Quan utilitzar Performance?

• La pàgina triga massa a carregar-se
• Respon lentament a les accions de l’usuari
• Presenta bloquejos o petits “parons” durant la navegació
• Realitza animacions poc fluides

3.6. Panell Memory

El panell Memory permet analitzar com utilitza la memòria una aplicació web mentre s’està executant.

El seu principal objectiu és detectar situacions en les quals el navegador manté a memòria objectes que ja no són necessaris. Aquest tipus de problemes es coneixen com a fuites de memòria (memory leaks) i poden provocar que l’aplicació consumeixi cada vegada més memòria i funcioni més lentament amb el pas del temps.

En projectes inicials no serà el panell més utilitzat, però convé saber per a què serveix.

Casos habituals:

• Una aplicació consumeix cada vegada més memòria com més temps roman oberta.
• La pàgina comença a respondre lentament després d’utilitzar-la durant un llarg període.
• Es creen molts objectes que mai arriben a eliminar-se.
• Existeixen temporitzadors o escoltadors d’esdeveniments (event listeners) que continuen actius quan ja no haurien de ser-ho.
• Una aplicació d’una sola pàgina (SPA) manté components o dades antigues que ja no s’utilitzen.

Un exemple de com detectar fuita de memòria

Suposa una aplicació web que permet navegar entre diferents seccions.

1. En iniciar l’aplicació, el navegador utilitza aproximadament 50 MB de memòria.
2. L’usuari navega per diverses seccions i l’aplicació crea nous objectes per mostrar informació. Com a conseqüència, el consum de memòria augmenta a 80 MB.
3. L’usuari torna a la pàgina principal. En aquell moment, els objectes utilitzats a les seccions anteriors ja no haurien de ser necessaris i, per tant, haurien d’alliberar-se de la memòria.
4. No obstant això, en tornar a obrir aquestes mateixes seccions, els objectes anteriors continuen ocupant memòria i se’n creen de nous. El consum augmenta novament (per exemple, fins a 110 MB) i continua creixent cada vegada que l’usuari repeteix l’operació.

Quan es detecti un augment de memòria no sempre significa que existeixi una fuita. És normal que una aplicació necessiti més memòria mentre treballa. El problema apareix quan aquesta memòria continua ocupada tot i que els objectes ja no siguin necessaris.

3.7. Panell Application

El panell Application permet consultar la informació que una pàgina web emmagatzema al navegador de l’usuari.

Moltes aplicacions necessiten guardar dades per recordar preferències, mantenir una sessió iniciada o emmagatzemar informació temporal. Aquest panell facilita visualitzar i modificar aquestes dades durant el desenvolupament.

Des d’aquest apartat podem consultar, entre d’altres:

• Local Storage, per emmagatzemar informació que roman fins i tot després de tancar el navegador.
• Session Storage, per guardar dades mentre la pestanya roman oberta.
• Cookies, utilitzades habitualment per identificar sessions o emmagatzemar petites quantitats d’informació.
• Altres recursos, utilitzats per aplicacions web més avançades, com IndexedDB, Cache Storage o Service Workers.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
  <title>Document</title>
  <script src="preferencies.js" defer></script>
</head>
<body>
  <h1>Preferències d'usuari</h1>
</body>
</html>

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

A Application pots comprovar si la clau tema existeix, quin valor té i eliminar-la per provar el comportament inicial de l’aplicació.

Application pot ser molt útil per revisar galetes de sessió, flags com HttpOnly, Secure o SameSite, i comprovar si la sessió es conserva entre peticions.

3.8. Panell Security

El panell Security permet comprovar si la comunicació entre el navegador i el servidor es realitza de forma segura.

Actualment, la majoria de llocs web utilitzen el protocol HTTPS, que xifra la informació intercanviada entre el navegador i el servidor per protegir-la davant d’accessos no autoritzats.

Gràcies a aquest panell podem verificar que la connexió és segura i detectar possibles problemes relacionats amb la configuració de seguretat del lloc web.

Aquest panell serveix per:

• Comprovar si la pàgina utilitza HTTPS.
• Consultar la informació del certificat digital del lloc web.
• Detectar problemes relacionats amb la connexió segura.
• Identificar recursos que no s’han carregat de forma segura.

Contingut mixt

Un problema habitual és l’anomenat contingut mixt.

Es produeix quan una pàgina carregada mitjançant HTTPS intenta descarregar algun recurs utilitzant HTTP, per exemple una imatge, un fitxer JavaScript o un full d’estils.

Pàgina → https://www.exemple.com ✔ Imatge → http://www.exemple.com/logo.png ✖

Els navegadors consideren aquesta situació insegura i poden bloquejar aquest recurs o mostrar una advertència a l’usuari.

3.9. Panell Lighthouse

El panell Lighthouse permet analitzar automàticament una pàgina web i generar un informe amb recomanacions per millorar diferents aspectes de l’aplicació.

A diferència d’altres panells de les DevTools, Lighthouse no mostra informació en temps real, sinó que realitza una auditoria de la pàgina i avalua diferents criteris de qualitat.

Entre els aspectes que pot analitzar es troben:

• Rendiment, detectant recursos que alenteixen la càrrega de la pàgina.
• Accessibilitat, comprovant si la pàgina resulta més fàcil d’utilitzar per a persones amb diferents capacitats.
• Bones pràctiques, revisant l’ús correcte de determinades tecnologies web.
• SEO (posicionament en cercadors), identificant alguns problemes bàsics que poden afectar la visibilitat de la pàgina.
• PWA (Progressive Web App), avaluant si l’aplicació compleix determinats requisits per comportar-se com una aplicació instal·lable.

Quin tipus de problemes pot detectar?

• Imatges massa grans o poc optimitzades.
• Recursos que retarden la càrrega de la pàgina.
• Elements sense text alternatiu (alt) per a les imatges.
• Problemes de contrast entre el text i el fons.
• Ús incorrecte o incomplet de HTTPS.
• Algunes recomanacions bàsiques relacionades amb el SEO.

Interpreta Lighthouse amb cura. Una puntuació no explica per si sola tot l’estat d’una web. Llegeix cada recomanació i comprova si aplica al context del projecte.

4. Simuladors i condicions de visualització

A més dels panells principals, les eines de desenvolupament de Chrome inclouen funcions que permeten comprovar com es comporta una pàgina en diferents dispositius i condicions de visualització.

Aquestes eines resulten molt útils per verificar que una aplicació ofereix una bona experiència d’usuari abans de publicar-la.

4.1. Device Mode

Device Mode permet simular el funcionament d’una pàgina web en diferents dispositius mòbils sense necessitat de disposar físicament d’ells.

Des d’aquest mode és possible comprovar com s’adapta la interfície a diferents mides de pantalla i verificar que el disseny responsive funciona correctament.

Amb aquest mode podem:

• Simular telèfons mòbils i tauletes.
• Provar diferents mides de pantalla.
• Canviar l’orientació entre vertical i horitzontal.
• Modificar el nivell de zoom i la densitat de píxels.
• Introduir dimensions personalitzades per provar resolucions concretes.

4.2. Rendering

L’eina Rendering permet activar diferents opcions de visualització per analitzar com es representa una pàgina i facilitar la detecció de determinats problemes.

Tot i que no és una eina d’ús diari, resulta útil quan es vol comprovar el comportament de l’aplicació en condicions especials.

Entre les seves opcions més utilitzades es troben:

• Emular el mode clar o fosc.
• Simular la preferència de reduir animacions (prefers-reduced-motion).
• Mostrar les zones de la pàgina que es tornen a dibuixar (Paint Flashing).
• Comprovar problemes relacionats amb el renderitzat de la interfície.

Aquesta eina no té un panell propi, sinó que es troba dins del Drawer inferior de DevTools. Per accedir-hi, hi ha dos mètodes:

1. Obrir el Drawer inferior amb Esc i prem els tres botons per seleccionar Rendering.
2. Obrir el menú de comandaments amb Ctrl + Shift + P o Cmd + Shift + P, escriure “Rendering” i seleccionar l’opció corresponent.

5. Altres eines i utilitats

A més dels panells principals, existeixen nombroses eines especialitzades que ajuden a analitzar, depurar i optimitzar aplicacions web.

Tot i que no s’utilitzen amb tanta freqüència com els panells explicats anteriorment, convé conèixer la seva existència, ja que poden resultar molt útils en determinades situacions.

6. Usos en el desenvolupament Front-End i Back-End

Les DevTools són una eina fonamental durant el desenvolupament d’aplicacions web. Tot i que se solen associar al desenvolupament del costat client, també resulten de gran utilitat per a qui treballa al servidor.

Depenent del tipus de tasca que s’estigui realitzant, alguns panells tindran més protagonisme que d’altres.

En el desenvolupament Front-End, les DevTools permeten inspeccionar i depurar el codi que s’executa al navegador.

Els panells més utilitzats són:

• Elements: Inspeccionar i modificar temporalment l’HTML i el CSS de la pàgina.
• Console: Detectar errors JavaScript i executar instruccions de prova.
• Sources: Depurar el codi JavaScript mitjançant punts d’interrupció (breakpoints).
• Network: Comprovar que els recursos (HTML, CSS, JavaScript, imatges, etc.) es carreguen correctament.
• Device Mode: Verificar el comportament de la pàgina en diferents mides de pantalla.
• Performance: Analitzar el rendiment i localitzar tasques que alenteixen l’aplicació.

Tot i que el codi del servidor s’executa fora del navegador, les DevTools també són una ajuda important per comprovar la comunicació entre el client i el servidor.

Els panells més utilitzats són:

• Network: Analitzar les peticions HTTP, les respostes del servidor i els codis d’estat.
• Application: Consultar galetes i altres dades emmagatzemades pel navegador.
• Security: Comprovar que la comunicació utilitza HTTPS i detectar problemes relacionats amb la seguretat de la connexió.
• Console: Visualitzar errors generats pel navegador durant la comunicació amb el servidor.

7. Exercicis

<!DOCTYPE html>
<html lang="ca">
<head>
  <title>Operadors matemàtics</title>
</head>
<body>
  <h1>Exemples d'operacions</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="ca">
<head>
 <title>Càlcul de descompte</title>
 <script src="descuento.js" defer></script>
</head>
<body>
 <h1>Càlcul de descompte</h1>
 <p>Obre la consola per veure el resultat.</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="ca">
<head>
  <title>Operacions</title>
  <script src="operacions.js" defer></script>
</head>
<body>
  <h1>Suma de números</h1>
  <p>Obre la consola per veure el resultat.</p>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="ca">
<head>
  <title>Peticions HTTP</title>
  <script src="peticions.js" defer></script>
</head>
<body>
  <h1>Peticions</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ca">
<head>
  <title>Preferències d'usuari</title>
  <script src="preferencies.js" defer></script>
</head>
<body>
  <h1>Preferències d'usuari</h1>
</body>
</html>

localStorage.setItem("usuari", "Maria");
localStorage.setItem("tema", "fosc");
localStorage.setItem("idioma", "ca");
document.cookie = "ultimaVisita=2026-07-11; path=/";