Natuurlijk! Hier is een stapsgewijze uitleg hoe je de ontwikkelaarstools van je browser kunt gebruiken om JavaScript-fouten te vinden en op te lossen, met toepassing op jouw code: 1. Open de ontwikkelaarstools: - In Chrome, Firefox of Edge: druk op F12 of klik rechts en kies 'Inspecteren' of 'Developer Tools'. 2. Ga naar het tabblad 'Console': - Hier worden fouten en logberichten weergegeven. Bij jouw code zal een foutmelding verschijnen zodra je de functie aanroept met `null`. 3. Voer je code uit: - Als je code niet via een script op een pagina draait, kun je een `<script>`-blok toevoegen in de console of je code in de 'Sources' of 'Debugger'-tab laden. - In jouw voorbeeld wordt de fout veroorzaakt door het aanroepen `greet(null)`. 4. Bekijk de foutmelding: - De console toont waarschijnlijk een TypeError: `Cannot read property 'toUpperCase' of null`. 5. Stel een breakpoint in: - Ga naar het tabblad 'Sources' (Chrome) of 'Debugger' (Firefox). - Zoek je scriptbestand of voer je code in de 'Snippets'- of 'Scripts'-sectie. - Klik op de regel waar de functie `greet` wordt aangeroepen: bijvoorbeeld op `greet(null);`. - Klik op het lijnnummer naast de regel om een breakpoint te plaatsen (een blauwe of rode markering). 6. Herhaal de actie om de code te laten stoppen: - Voer opnieuw de opdracht uit die de functie aanroept. - De uitvoering stopt bij je breakpoint, waardoor je de code kunt inspecteren. 7. Controleer variabelen: - In de ontwikkelaarstools zie je meestal een 'Scope' of 'Locals' paneel. - Daar kun je de waarde van `name` bekijken. In dit geval is `name` gelijk aan `null`. 8. Analyseer de call stack: - De call stack toont de reeks functies die zijn aangeroepen tot het punt waar de code stopt. - Dit helpt je te begrijpen hoe je code bij deze functie is gekomen. 9. Stap door de code: - Gebruik de 'Step over' of 'Step into' knoppen om de code regel voor regel uit te voeren. - Dit geeft inzicht in de stroom en waar de fout zich voordoet. 10. Pas je code aan: - Bijvoorbeeld door een controle toe te voegen dat `name` niet `null` is voordat je `toUpperCase()` aanroept: ```javascript function greet(name) { if (name) { console.log('Hallo, ' + name.toUpperCase()); } else { console.log('Hallo, gast!'); } } ``` 11. Test opnieuw: - Voer de functie opnieuw uit met verschillende waarden om zeker te zijn dat de fout is opgelost. Door deze stappen te volgen, kun je effectief JavaScript-fouten opsporen en oplossen met behulp van de ontwikkelaarstools.

Hoe je browserontwikkelaarstools gebruikt om JavaScript-fouten te vinden en op te lossen: ## Stap 1: Open ontwikkelaarstools - **Windows/Linux**: Druk op `F12` of `Ctrl+Shift+I` - **Mac**: Druk op `Cmd+Opt+I` - Rechtsklik ergens op de pagina → "Inspecteren" ## Stap 2: Ga naar het tabblad "Console" - Hier zie je de foutmelding: "TypeError: Cannot read properties of null (reading 'toUpperCase')" - De fout geeft aan dat `null` de methode `toUpperCase()` niet heeft ## Stap 3: Debuggen met breakpoints 1. Ga naar het tabblad **"Sources"** of **"Debugger"** 2. Zoek je JavaScript-bestand of plak je code in de console 3. Klik op het regelnummer naast `console.log('Hallo, ' + name.toUpperCase());` om een breakpoint te plaatsen (blauw markering) ## Stap 4: Variabelen controleren - Herlaad de pagina of voer `greet(null)` opnieuw uit in console - De uitvoering stopt bij je breakpoint - In het **"Scope"** paneel zie je: - `name: null` (dit is het probleem!) - Lokale variabelen en parameters ## Stap 5: Call stack analyseren - In het **"Call Stack"** paneel zie je: - `greet` (huidige functie) - `(anonymous)` (globale scope waar `greet(null)` werd aangeroepen) ## Stap 6: Oplossing implementeren ```javascript function greet(name) { if (name === null || name === undefined) { console.log('Hallo, gast!'); return; } console.log('Hallo, ' + name.toUpperCase()); } ``` ## Handige shortcuts: - `F8`: Doorgaan met uitvoeren - `F10`: Overstappen (step over) - `F11`: Instappen (step into) - Hover over variabelen om hun waarden te zien De ontwikkelaarstools helpen je zo de exacte locatie en oorzaak van de fout te vinden!