💡 Debugging

Wie debugge ich meine App?

HTML, CSS & JS sind cool oder? Ja, das denkt wohl jeder Entwickler bis er vor dem ersten wirklichen Problem steht. Hast du ein Fehler in deinem Typescript-Code, wird dich Ionic ziemlich nett darauf hinweisen. Manchmal passieren aber auch komische Dinge, dann heisst es analysieren. Hier einige Tipps von Ralph.

HTML, CSS: Der Entwickler-Bereich deines Browsers

Alle grossen Browser verfügen heute über super Analyse-Tools und Console. Du findest Sie hier:

• Google Chrome: Entwickler Tools über Menu oder "Untersuchen" mit Rechtsklick auf der Seite

• Firefox: Inspector über Menu -> Web-Entwickler oder "Element untersuchen" mit Rechtsklick auf der Seite

• Safari: Via Einstellungen -> Erweitert -> Entwickler-Modus

Du siehst deinen kompletten HTML DOM, also alles was ausgegeben wurde. Z.B. Wichtig um zu sehen ob deine Schleife funktioniert hat. Und auch das effektive Styling eines Elements, ob das richtige CSS zieht und woher die effektiven Werte kommen.

Javascript: Der einfache Weg

Einer deiner besten Freunde wird sicher

 console.log("Hallo ich bin Ralph!");

Du kannst so schon die wichtigsten Werte in deinem Code abfangen. Console.log erwartet einen String, du kannst aber auch eine Kombination machen und ein String + deine Zahl ausgeben. Dazu hier ein kleines Beispiel:

 myNumber: any = 4;

 console.log("Nummer >> "+ myNumber);

 // Gibt auf der Console
 // Nummer >> 4

Javascript: Der erweiterte Pfad

Console.log's sind praktisch, schnell und auch gut - aber sie geben dir nur eine entsprechende Ausgabe und sind meist viel zu schnell durch. Wie bei allen grossen Sprachen und IDE's kann man auch Typescript sauber Schritt für Schritt debuggen. Das Zauberwort, welches du in deinen Code schreiben musst heisst somit... Tadaaaa:

  debugger;

(so schwierig war das jetzt auch nicht, oder?)

Mit dem debugger;-Befehl wird ein Projekt an jener Stelle angehalten und du kannst wiederum im Browser-Entwickler-Modus etwas genauer hinschauen. Probiers einmal aus, es lohnt sich