# Les 14: Debugging & Code Review met AI

> 📋 **Lesmateriaal nog niet uitgewerkt**
>
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
> - Les14-Slide-Overzicht.md
> - Les14-Lesplan.md
> - Les14-Bijlage-A-Lesopdracht.md
> - Les14-Bijlage-B-Huiswerkopdracht.md

---

## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 10-18)

## Beschrijving
Leer hoe je AI effectief inzet voor debugging en code review. Begrijp foutmeldingen, los problemen op, en verbeter je code kwaliteit.

---

## Te Behandelen

### Waarom AI voor Debugging?
- AI begrijpt error messages vaak beter dan Google
- Kan context van jouw code meenemen
- Suggereert oplossingen specifiek voor jouw situatie
- Leert je patterns herkennen

### Error Messages Begrijpen

**Typische JavaScript/React errors:**
- `TypeError: Cannot read properties of undefined`
- `ReferenceError: x is not defined`
- `SyntaxError: Unexpected token`
- `Hydration error` (Next.js specifiek)

**Hoe AI vragen:**
```
Ik krijg deze error:
[plak error message]

In deze code:
[plak relevante code]

Wat gaat er mis en hoe los ik het op?
```

### Debugging Workflow met AI

**Stap 1: Isoleer het probleem**
- Waar treedt de error op?
- Wat was de laatste wijziging?
- Kan je het reproduceren?

**Stap 2: Verzamel context**
- Error message (volledig!)
- Relevante code
- Wat je verwacht vs wat er gebeurt

**Stap 3: Vraag AI**
- Wees specifiek
- Geef context
- Vraag om uitleg, niet alleen fix

**Stap 4: Begrijp de oplossing**
- Vraag door als je het niet snapt
- Leer het pattern voor volgende keer

### Console.log Debugging
- Strategisch plaatsen
- Variabele waarden checken
- Flow van code volgen
- AI kan helpen met waar te loggen

### Browser DevTools Basics
- Console tab: errors en logs
- Network tab: API calls checken
- Elements tab: HTML/CSS inspecteren
- React DevTools: component state bekijken

### Code Review met AI

**Wat kan AI reviewen:**
- Code kwaliteit en leesbaarheid
- Potentiële bugs
- Performance issues
- Security problemen
- Best practices

**Goede review prompt:**
```
Review deze code op:
1. Bugs of edge cases die ik mis
2. Performance verbeteringen
3. Leesbaarheid
4. Best practices voor React/Next.js

[plak code]
```

### Veelvoorkomende Issues die AI Vindt
- Missing error handling
- Memory leaks (useEffect cleanup)
- Onnodig re-renders
- Hardcoded values
- Missing loading/error states
- Accessibility issues

### Refactoring met AI
- "Hoe kan ik deze code simplificeren?"
- "Extract dit naar een custom hook"
- "Maak dit component meer herbruikbaar"

### Wanneer NIET AI Vertrouwen
- Als je de oplossing niet begrijpt
- Bij security-gerelateerde code (dubbel check!)
- Bij verouderde info (check versie docs)

---

## Tools
- Cursor
- Browser DevTools
- React DevTools
- Console/Terminal

---

## Lesopdracht (2 uur)

### Debugging Challenge

Je krijgt een project met opzettelijke bugs. Los ze op met AI hulp.

**Deel 1: Setup (10 min)**
- Clone het buggy project (wordt gedeeld)
- Run `npm install` en `npm run dev`
- Zie alle errors!

**Deel 2: Bug Hunting (1 uur 20 min)**

Los de volgende bugs op (met AI hulp):

| Bug | Symptoom |
|-----|----------|
| 1 | App crashed bij opstarten |
| 2 | Data wordt niet geladen |
| 3 | Form submit werkt niet |
| 4 | Styling is broken op mobile |
| 5 | Infinite loop bij useEffect |
| 6 | Button click doet niets |

**Per bug:**
- Identificeer de error message
- Vraag AI om hulp met context
- Implementeer de fix
- Documenteer wat je geleerd hebt

**Deel 3: Documentatie (30 min)**
- Voeg toe aan je `PROMPT-LOG.md`:
  - De prompts die je gebruikte
  - Wat werkte wel/niet

### Deliverable
- Alle 6 bugs gefixed
- PROMPT-LOG.md bijgewerkt
- Korte notities per bug: wat was het probleem, hoe opgelost

---

## Huiswerk (2 uur)

### Code Review Je Eigen Project

**Deel 1: Self-Review met AI (1 uur)**
- Kies 3 belangrijke files uit je eindproject
- Laat AI ze reviewen met een goede prompt
- Documenteer bevindingen in `AI-DECISIONS.md`

**Per file noteer:**
- Welke issues AI vond
- Welke je hebt gefixed
- Welke je bewust negeert (en waarom)

**Deel 2: Refactoring (45 min)**
- Kies 1 component dat te complex is
- Vraag AI om refactoring suggesties
- Implementeer de verbeteringen
- Vergelijk before/after

**Deel 3: Debugging Checklist (15 min)**
- Maak persoonlijke debugging checklist
- Wat check je eerst bij errors?
- Welke prompts werken goed voor jou?

### Deliverable
- AI-DECISIONS.md met review bevindingen
- 1 gerefactored component
- Persoonlijke debugging checklist

---

## Leerdoelen
Na deze les kan de student:
- Error messages lezen en begrijpen
- Effectieve debugging prompts schrijven voor AI
- Browser DevTools gebruiken voor debugging
- Code laten reviewen door AI
- Feedback van AI kritisch evalueren
- Refactoring uitvoeren met AI suggesties
- Documenteren wat geleerd is van debugging sessies