Leer Basisprincipes van Debuggen

Veeg om het menu te tonen

Debuggen is een essentiële vaardigheid voor elke JavaScript-ontwikkelaar. Tijdens het schrijven en uitvoeren van code kom je verschillende fouten tegen. Begrijpen hoe je foutmeldingen leest en de meest voorkomende fouten kent, helpt om problemen snel op te lossen en je projecten voortgang te laten boeken.

De meest voorkomende JavaScript-fouten zijn:

Syntaxisfouten: deze ontstaan wanneer de structuur van de code onjuist is, zoals ontbrekende haakjes of accolades;
Referentiefouten: deze treden op wanneer je een variabele probeert te gebruiken die niet is gedeclareerd of buiten het bereik valt;
Typefouten: deze ontstaan wanneer een waarde op een onverwachte manier wordt gebruikt, bijvoorbeeld door een functie aan te roepen op iets dat geen functie is.

Wanneer er een fout optreedt, toont de console van de browser een foutmelding. Dit bericht bevat meestal het type fout, een korte beschrijving en het regelnummer waar het probleem is vastgesteld. Lees deze berichten altijd zorgvuldig—ze zijn je eerste aanwijzing bij het oplossen van elk probleem.


              1234567891011121314151617181920212223
            
// Example: Debugging with console.log and breakpoints

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    // Add a console.log to inspect each item
    console.log("Item at index", i, ":", JSON.stringify(items[i]));
    total += items[i].price; // Potential error if items[i] is missing 'price'
  }
  return total;
}

const cart = [
  { name: "Book", price: 12 },
  { name: "Pen", price: 2 },
  { name: "Notebook" } // Missing price property
];

const total = calculateTotal(cart);
console.log("Total:", total);

// To debug further, set a breakpoint on the line inside the loop in your browser's developer tools.
// Step through the code to watch how 'total' and 'items[i]' change with each iteration.

Voor effectief debuggen, volg een systematische aanpak:

Reproduceer de fout consequent zodat je deze kunt observeren tijdens het testen van oplossingen;
Lees de foutmelding en noteer de bestandsnaam en het regelnummer;
Gebruik console.log om waarden af te drukken en de stroom van je code te volgen;
Zet breakpoints in de ontwikkelaarstools van je browser om de uitvoering te pauzeren en variabelen te inspecteren;
Pas telkens slechts één ding aan en test na elke wijziging om het probleem te isoleren;
Let op veelvoorkomende valkuilen zoals typefouten, off-by-one fouten in lussen of ontbrekende eigenschappen in objecten.

Door deze technieken te oefenen, word je zelfverzekerder en efficiënter in het vinden en oplossen van bugs in je JavaScript-code.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 18

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Sectie 1. Hoofdstuk 18