212 lines
4.7 KiB
Markdown
212 lines
4.7 KiB
Markdown
# 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
|