TypeScript-Anwendung debuggen mit Chrome Developer Tools

In dieser Anleitung zeige ich dir, wie du eine einfache TypeScript-Anwendung debuggen kannst, die einen Taschenrechner simuliert. Das Ziel ist es, den Fehler zu identifizieren, warum die Addition von zwei Zahlen nicht das erwartete Ergebnis liefert. Bei dieser praktischen Übung kommen die Chrome Developer Tools zum Einsatz, um den Code zu analysieren und den Fehler schnell zu finden. Durch diese Anleitung wirst du verstehen, wie wichtig das Debugging ist und welche Tools dir dabei helfen können.

Wichtigste Erkenntnisse

• Durch die Verwendung von Chrome Developer Tools kannst du den State deiner Anwendung einfach analysieren.
• Die Typüberprüfung in TypeScript hilft, Fehler frühzeitig zu erkennen, bevor der Code ausgeführt wird.
• Die Bedeutung von Typen und die korrekte Handhabung von Werten sind entscheidend, um Fehler zu vermeiden.

Schritt-für-Schritt-Anleitung

Zuerst startest du deinen Chrome-Browser und lädst die Webanwendung mit der TypeScript-Implementierung des Taschenrechners. Das Projekt sollte bereits auf einem Server laufen, sodass du die HTML-Datei in Chrome öffnen kannst.

Nun solltest du sicherstellen, dass sowohl die TypeScript- als auch die JavaScript-Datei (transpilierte Datei) in deinem Projekt vorhanden sind. Die TypeScript-Datei enthält Kommentare und Typinformationen, während die transpilierten JavaScript-Dateien diese Informationen nicht enthalten.

Öffne die Chrome Developer Tools, indem du mit der rechten Maustaste auf die Seite klickst und „Untersuchen“ auswählst oder F12 drückst. Gehe zu dem Tab „Elements“, um den HTML-Code der Seite zu sehen und um sicherzustellen, dass die Eingabefelder sowie der Button korrekt eingerichtet sind.

Der Taschenrechner hat zwei Eingabefelder für die Zahlen und einen Button, um die Addition auszulösen. Du kannst einige Testwerte eingeben und auf den Button klicken. Du wirst feststellen, dass die Summe nicht korrekt berechnet wird; möglicherweise erhältst du 22 statt der erwarteten 4. Um diese Abweichung zu klären, ist das Debugging erforderlich.

Setze nun einen Breakpoint in deinem Code, indem du auf die Funktion des Event Listeners klickst. Dies geschieht in dem Abschnitt, der für die Addition verantwortlich ist. Wenn du die Werte in die Eingabefelder eingibst und auf den Button drückst, müsstest du in den Debugger eintreten.

In der Debugger-Ansicht kannst du die Variablen inspizieren. Insbesondere ist es wichtig, den innert Text und die Werte der Eingabefelder zu überprüfen, um zu sehen, welche Werte übergeben werden. Du wirst feststellen, dass value der Eingabefelder vom Typ String ist, und nicht vom Typ Number, wie du erwartet hattest.

Dieser Typkonflikt führt dazu, dass die Addition nicht korrekt funktioniert. Statt die Zahlen zu addieren, werden sie konkateniert. Ein Beispiel wäre: die Eingabe von „1“ und „6“ ergibt „16“ als Resultat, was nicht das gewünschte Ergebnis ist. Dieser Logische Fehler ist leicht nachvollziehbar, aber wichtig zu identifizieren.

Jetzt solltest du den Fehler beheben. Gehe zurück zu deiner TypeScript-Datei in Visual Studio Code und ändere die Art und Weise, wie die Werte verarbeitet werden. Anstelle von n1.value + n2.value solltest du n1.valueAsNumber + n2.valueAsNumber verwenden, um sicherzustellen, dass es sich um Zahlen handelt und nicht um Strings.

Nachdem du die Änderung vorgenommen hast, speichere die Datei und lade die Seite in Chrome neu. Du solltest dir dann wieder die Werte in den Eingabefeldern anschauen, bevor du sie addierst. Diesmal wird die korrekte Summe von zwei Zahlen angezeigt.

Wenn alles richtig gemacht wurde, wird jetzt beim Drücken des Buttons die Summe als „10“ ausgegeben, wenn du beispielsweise die Werte „2“ und „8“ eingibst. Damit hast du erfolgreich den Fehler behoben und gelernt, wie wichtig Typizität in TypeScript ist.

Zusätzlich kannst du die Vorteile von TypeScript nutzen, indem du die Typen der Variablen klar definierst. Dies reduziert die Möglichkeit von Laufzeitfehlern erheblich. Achte immer darauf, Typen anzugeben, um das Debugging zu erleichtern.

Schließlich hast du auch gesehen, wie wichtig die Chrome Developer Tools sind, um den Code und das Verhalten einer Anwendung in Echtzeit zu analysieren. Debugging mit diesen Tools kann erheblich zur Verbesserung deiner Entwicklungsprozesse beitragen.

Zusammenfassung

In dieser Anleitung hast du gelernt, wie du eine einfache TypeScript-Anwendung debuggen kannst. Besonderes Augenmerk lag auf der Verwendung von Chrome Developer Tools unter Berücksichtigung der Typen in TypeScript. Letztendlich hast du erkannt, wie wichtig es ist, Fehler frühzeitig zu erkennen und wie wichtig die Typüberprüfung in TypeScript sein kann.