Ein wichtiger teil des Pprogrammierens ist das sogenannte Debugging. Also das Herausfinden
warum etwas in eurem Code nicht funktioniert. Dafür gibt es ein ganz wichtiges Werkzeug.
Die Developer-Tools. Die sind direkt in euren Browser integriert. Hierzu müsst ihr lediglich
einen Rechts-Klick auf euren Browser machen. Dort gibt es dann im Englischen "Inspect" auf Deutsch
"Untersuchen". Das kann sich je nach Browser auch mal ein bisschen unterschiedlich definiert sein.
In Safari müsst ihr die erst freischalten, diese funktionen. Dazu habe ich euch einen Link unten
unter das Video gepackt. Diese Developer Tools werden automatisch sozusagen in das Browserfenster
integriert. Ihr könnt euch das Ganze aber auch als separates Fenster anzeigen lassen. Was das
Ganze wesentlich besser macht, um das Ganze zu benutzen. Hier oben habt ihr eine Reihe an Tabs,
wo ihr verschiedene Sachen auf eurer Seite untersuchen könnte. Die Elements zeigen euch
einfach die HTML-Struktur eurer Webseite an. Der interessante Teil ist hier die Console dort werden
nämlich Fehlermeldungen ausgegeben. Wenn wir jetzt mal in unseren Code zurückwechseln und ich hier
zum Beispiel mal die "background"-Funktion falsch schreiben. Indem ich hier einfach das "d" lösche
und das jetzt ausführe, dann sehen wir, dass hier in der Webseite, die natürlich leer bleibt und der
Hintergrund nicht gezeichnet wird. Und wenn ich mir denn nun die Developer Tools anzeigen lassen,
sehe ich, dass hier eine Fehlermeldung kommt und indem Fall steht jetzt hier
"uncaught reference error: background is not defined" Also die Funktion "background" ohne
"d" kennt er nicht und gibt uns deshalb eine Fehlermeldung. Darüber hinaus sagt es uns auch,
dass der Fehler in Zeile 10 zu finden ist. Wenn wir also zurück in unsere Sketch Datei gehen,
in Zeile 10 sehen wir hier das "background" sozusagen falsch geschrieben ist. Wenn ich dies
nun korrigieren wird der "background" auch wieder angezeigt und die Fehlermeldung verschwindet.
Wir können die Developer Tools aber auch noch für andere sachen nutzen. Wir können uns zum Beispiel,
wir werden uns im nächsten Abschnitt das Thema variablen anschauen, also wie ihr für eure
parametrischen Designs Parameter in eurem Code speichern könnt und manchmal wenn man
unterwegs wissen möchte was ist eigentlich der aktuelle Wert meiner Variable oder ich möchte
irgendetwas anderes ausgeben, dafür gibt es den Befehl "console.log()" und dann kann ich hier in
den Klammern irgendetwas ausgeben lassen. Ich kann zum Beispiel sagen "draw complete" damit ich weiß,
dass der code auf jeden Fall bis zu dieser Stelle korrekt ausgeführt wurde. Wenn ich dies
nun speicher und in die Developer Tools gehe, sehe ich, dass hier "draw complete" ausgegeben
wird und wir erinnern uns: "draw" wird im loop durchgeführt, deswegen wird natürlich jetzt ganz
häufig dort "complete" ausgegeben. Wenn ich alternativ mal in den Code springe und in der
"setup" Funktion ein zusätzliches "console.log()" eingebe. "console.log" und dann "setup complete"
Dann in die Konsole zurückgehe, sehe ich, dass hier "setup complete" am Anfang einmal
ausgeführt wird und danach wird dann das "draw complete" in den verschiedenen "draw"
Schleifen wieder ausgeführt. So kann ich sozusagen die Developer Tools auch nutzen
um mir Feedback aus meinen Funktionen, aus meinem "draw" Prozess herauszugeben,
um zum Beispiel herauszufinden bis wohin wird der Code eigentlich korrekt ausgeführt und ab wann
wird der Code nicht mehr korrekt ausgeführt. Die Fehlermeldungen können manchmal etwas kryptisch
sein. Was da hilft ist das Ganze einfach zu kopieren. Die Fehlermeldung und bei Google
oder einer anderen Suchmaschine einzufügen und zu schauen, welche Antworten kommen. Denn
wahrscheinlich seid ihr nicht die Ersten, die dieses Problem haben und in der Regel findet
man irgendwo im Internet auch Hilfe und eine Lösung wie man dieses Problem umgehen kann.