novi-lessons/Samenvattingen/Les14-Samenvatting.md

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