Console & DevTools

// Le classique
console.log("valeur :", user)

// Affichage sous forme de tableau (parfait pour les arrays d'objets)
console.table(users)

// Regrouper des logs ensemble
console.group("Chargement des donnees")
console.log("Fetching users...")
console.log("Fetching articles...")
console.groupEnd()

// Mesurer le temps d'execution
console.time("fetch-users")
const users = await fetchUsers()
console.timeEnd("fetch-users")  // "fetch-users: 234ms"

// Afficher seulement si une condition est fausse
console.assert(user !== null, "L'utilisateur est null !")

// Warning et erreur (avec couleur)
console.warn("Attention : donnees non validees")
console.error("Echec critique : base de donnees inaccessible")

# Chaque ligne = une requete
# Tu peux voir :

Nom              | Status | Type   | Taille | Temps
-------------------------------------------------
users            | 200    | fetch  | 2.4 KB | 156ms   <- tout va bien
articles         | 404    | fetch  | 0 B    | 23ms    <- URL introuvable !
profile-pic.jpg  | 403    | img    | 0 B    | 45ms    <- acces refuse !
main.js          | 200    | script | 145 KB | 89ms    <- charge mais gros

# Clique sur une requete pour voir :
# - Headers (ce que tu envoies)
# - Response (ce que le serveur repond)
# - Preview (pour le JSON)

async function fetchUserData(userId: string) {
  const response = await fetch(`/api/users/${userId}`)

  // Le navigateur ARRETE l'execution ici
  // Tu peux inspecter toutes les variables
  debugger

  const data = await response.json()

  // Tu verras que "data" est accessible dans la console
  // Tape "data" ou "response.status" dans la console
  return data
}

// Alternative : poser un breakpoint dans les DevTools
// 1. Ouvre l'onglet Sources
// 2. Trouve ton fichier
// 3. Clique sur le numero de ligne
// 4. Recharge la page -> le code s'arrete la