# 🔍 Guide de Debug - AI Code Assistant

## 🛠️ Outils de debug intégrés

### 1. Console du navigateur (F12)

**Ouvrir la console :**
- Windows/Linux : `F12` ou `Ctrl+Shift+I`
- Mac : `Cmd+Option+I`

**Dans l'onglet Console, tu verras :**

#### Messages normaux ✅
```
🚀 Initialisation de l'application...
📡 Réponse /models: 200
✅ Modèles chargés: 2
🔌 Tentative de connexion WebSocket à: ws://localhost:9001/ws/chat
✅ WebSocket connecté
📨 Message WebSocket: stream
✅ Réponse complète reçue
```

#### Messages d'erreur ❌
```
❌ Erreur chargement modèles: TypeError...
❌ Erreur WebSocket: ...
🔴 Erreur React: ...
❌ Erreur rendu message: ...
```

### 2. Bandeau d'erreur dans l'UI

Si une erreur se produit, un bandeau rouge apparaît en haut avec :
- Le message d'erreur
- Un bouton ✕ pour fermer

### 3. Message backend non accessible

Si le backend ne répond pas, un message s'affiche au centre :
- Instructions pour démarrer le backend
- Lien vers les logs (F12)

## 🐛 Problèmes courants et solutions

### Problème 1 : UI plante quand l'IA génère du code

**Symptômes :**
- Page devient blanche/bleue
- Erreur dans la console : `Cannot read properties of undefined`

**Causes possibles :**
1. Caractère spécial non échappé dans le code
2. Balise HTML mal fermée
3. Erreur Prism.js

**Solution :**
✅ **Corrigé dans cette version !**
- Échappement HTML complet
- Try/catch autour du rendu
- Message d'erreur au lieu de crash

**Si ça arrive quand même :**
1. Ouvrir F12 → Console
2. Copier l'erreur exacte
3. Rafraîchir la page (Ctrl+F5)
4. Relancer

### Problème 2 : WebSocket ne connecte pas

**Dans la console :**
```
❌ Erreur WebSocket: ...
🔌 WebSocket déconnecté, reconnexion dans 3s...
```

**Vérifications :**

```bash
# 1. Le backend tourne-t-il ?
curl http://localhost:9001/health

# 2. Voir les logs backend
cat /tmp/fastapi.log

# 3. Processus Python actif ?
ps aux | grep "python main.py"
```

**Solution :**
```bash
cd backend
. venv/bin/activate
python main.py
```

Tu dois voir :
```
INFO:     Uvicorn running on http://0.0.0.0:9001
```

### Problème 3 : Code ne s'affiche pas correctement

**Symptômes :**
- Blocs de code sans couleur
- Caractères bizarres (< >)

**Dans la console, chercher :**
```
❌ Erreur Prism.js: ...
```

**Solution :**
1. Rafraîchir la page (Ctrl+F5)
2. Vider le cache navigateur
3. Vérifier connexion internet (Prism.js vient du CDN)

### Problème 4 : Boutons Copier/Tester ne marchent pas

**Dans la console :**
```
❌ Erreur copyCode: ...
Élément code introuvable: code-X-Y
```

**Solution :**
✅ **Corrigé !** Les boutons ont maintenant :
- Vérification que l'élément existe
- Try/catch pour éviter les crashes
- Logs détaillés

**Test manuel :**
```javascript
// Dans la console (F12)
window.copyCode('code-0-0')
// Doit afficher une erreur claire si l'ID n'existe pas
```

### Problème 5 : Messages ne s'affichent pas

**Dans la console :**
```
❌ Erreur rendu message: ...
```

**Ce que tu verras dans l'UI :**
- Avatar ⚠️
- "Erreur d'affichage du message"
- Début du message brut

**Solution :**
1. Noter l'erreur exacte dans la console
2. Copier le message qui cause problème
3. Relancer le chat

## 📊 Workflow de debug complet

### Étape 1 : Ouvrir la console (F12)

Avant même de tester, ouvre la console pour voir les logs en temps réel.

### Étape 2 : Envoyer un message test simple

```
Écris une fonction Python qui dit bonjour
```

**Dans la console, tu devrais voir :**
```
📨 Message WebSocket: stream
📨 Message WebSocket: stream
...
✅ Réponse complète reçue
```

### Étape 3 : Si erreur, identifier le type

#### Type 1 : Backend (réseau)
```
❌ Erreur WebSocket: ...
ou
Failed to load resource: net::ERR_CONNECTION_REFUSED
```
→ Le backend n'est pas démarré

#### Type 2 : Rendu (React)
```
🔴 Erreur React: ...
ou
❌ Erreur rendu message: ...
```
→ Problème d'affichage du contenu

#### Type 3 : Fonctions (boutons)
```
❌ Erreur copyCode: ...
```
→ Problème avec les boutons d'action

### Étape 4 : Copier les logs

```bash
# Dans la console (F12), clic droit → Save as...
# Ou copier manuellement les erreurs
```

## 🔬 Tests avancés

### Test 1 : Vérifier que tout est chargé

Dans la console :
```javascript
// Vérifier React
console.log('React:', typeof React);  // doit afficher "object"

// Vérifier Prism
console.log('Prism:', typeof Prism);  // doit afficher "object"

// Vérifier l'API
fetch('http://localhost:9001/health')
  .then(r => r.json())
  .then(d => console.log('Backend:', d));
```

### Test 2 : Vérifier WebSocket manuellement

```javascript
const ws = new WebSocket('ws://localhost:9001/ws/chat');
ws.onopen = () => console.log('WS OK');
ws.onerror = (e) => console.error('WS Error:', e);
```

### Test 3 : Tester le rendu d'un message

```javascript
// Dans la console
const testMsg = {
  role: 'assistant',
  content: 'Test ```python\nprint("hello")\n```'
};

// Voir si ça plante
console.log('Test:', testMsg);
```

## 📝 Logs à envoyer si besoin d'aide

Si tu as un problème, copie et envoie :

### 1. Logs console navigateur
```
[Tous les messages rouges ❌ et 🔴]
```

### 2. Logs backend
```bash
cat /tmp/fastapi.log
```

### 3. État du système
```bash
# Processus actifs
ps aux | grep -E "python|ollama"

# Ports utilisés
netstat -tlnp | grep -E "9000|9001"

# Version Python
python3 --version
```

## 🎯 Checklist avant de demander de l'aide

- [ ] Console ouverte (F12) pour voir les logs
- [ ] Backend lancé et accessible (curl http://localhost:9001/health)
- [ ] WebSocket connecté (point vert en bas à droite)
- [ ] Copié les erreurs exactes de la console
- [ ] Testé avec un message simple d'abord
- [ ] Rafraîchi la page (Ctrl+F5)
- [ ] Vidé le cache si nécessaire

## 💡 Astuces

1. **Logs en temps réel** : Laisse toujours F12 ouvert quand tu utilises l'app
2. **Preserve log** : Dans F12, coche "Preserve log" pour garder les logs même après refresh
3. **Filtre console** : Tu peux filtrer par "Error" ou "Warning" dans la console
4. **Network tab** : Onglet Network dans F12 pour voir les requêtes HTTP/WebSocket
5. **React DevTools** : Installe React DevTools pour debug React spécifiquement

---

**La nouvelle version a :**
✅ Échappement HTML complet
✅ Try/catch partout
✅ Logs détaillés avec émojis
✅ Messages d'erreur clairs
✅ Bandeau d'erreur visible
✅ Pas de crash, juste des erreurs visibles

**Plus d'écran bleu ! 🎉**