Lernen Grundlagen des Debuggings

Swipe um das Menü anzuzeigen

Debugging ist eine entscheidende Fähigkeit für jeden JavaScript-Entwickler. Beim Schreiben und Ausführen von Code treten verschiedene Fehler auf. Das Verständnis von Fehlermeldungen und das Erkennen der häufigsten Fehler erleichtern die schnelle Behebung von Problemen und sorgen für einen reibungslosen Projektfortschritt.

Die häufigsten JavaScript-Fehler sind:

Syntaxfehler: Diese treten auf, wenn die Code-Struktur fehlerhaft ist, zum Beispiel durch fehlende Klammern oder geschweifte Klammern;
Referenzfehler: Diese entstehen, wenn versucht wird, auf eine Variable zuzugreifen, die nicht deklariert wurde oder sich außerhalb des Gültigkeitsbereichs befindet;
Typfehler: Diese treten auf, wenn ein Wert auf unerwartete Weise verwendet wird, beispielsweise wenn eine Funktion auf etwas aufgerufen wird, das keine Funktion ist.

Wenn ein Fehler auftritt, zeigt die Konsole des Browsers eine Fehlermeldung an. Diese Meldung enthält in der Regel den Fehlertyp, eine kurze Beschreibung und die Zeilennummer, an der das Problem erkannt wurde. Lesen Sie diese Meldungen immer sorgfältig – sie sind der erste Hinweis zur Lösung eines Problems.


              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.

Für effektives Debugging empfiehlt sich ein systematisches Vorgehen:

Den Fehler reproduzierbar machen, um ihn beim Testen von Lösungen beobachten zu können;
Die Fehlermeldung lesen und Dateiname sowie Zeilennummer notieren;
Mit console.log Werte ausgeben und den Ablauf des Codes nachvollziehen;
Breakpoints in den Entwicklertools des Browsers setzen, um die Ausführung zu pausieren und Variablen zu inspizieren;
Immer nur eine Änderung vornehmen und nach jeder Änderung testen, um das Problem einzugrenzen;
Auf typische Stolperfallen wie Tippfehler, Off-by-one-Fehler in Schleifen oder fehlende Eigenschaften in Objekten achten.

Durch das Anwenden dieser Techniken wird das Auffinden und Beheben von Fehlern im JavaScript-Code sicherer und effizienter.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 18

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Abschnitt 1. Kapitel 18