Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Programmierung: Basiswissen

Debugger unterstützen bei der Fehlersuche

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Moderne Programmiersprachen verfügen über Debugger, welche einen Programmierer bei der Fehlersuche unterstützen. Diese stehen ebenfalls als Add-ons für sämtliche Browser zur Verfügung.

Transkript

Für alle modernen Programmiersprachen gibt es Werkzeuge, die einem beim Aufspüren von Fehlern helfen, sogenannte "Debugger". Weil Javascript eine Programmiersprache ist, die innerhalb einer Webseite, innerhalb des Browsers läuft, müssen diese "Debugger" natürlich auch innerhalb des Browsers laufen. Für Firefox gibt es ein Tool namens "Firebug". Ich suche das einfach mal und dann sehen Sie hier "getfirebug.com". Das ist ein "Add-on" für den Firefox, den gibt es aber auch für Google Chrome, "install firebug", das kostet nichts. Ich installiere mir das hier: "Zu Firefox hinzufügen". Das dauert ein bisschen. Alles heruntergeladen. Nachdem ich auf "Installieren" geklickt habe, habe ich hier den "Firebug" erfolgreich installiert. Ich starte jetzt also meinen Firefox neu. Ich bin hier auf meiner Projektdatei. Was ich hier neu habe, das ist ein Bottom mit einem Firebug und wenn ich da drauf klicke, sehen Sie, habe ich hier unten meinen Firebug, meinen "Debugger" in meinem Browserfenster. Was mich interessiert, ist dieser Scriptbereich hier und Sie sehen, das Script-Panel war inaktiv während des Ladens der Seite, also ich muss die Seite noch mal neuladen und dann habe ich hier meinen Javascript-Code, wie ich ihn hier für diese Seite eingegeben habe. Ich mache ihn mal ein bisschen größer, indem ich hier drauf gehe und dann "Schriftgröße etwas vergrößern". Dann sehen wir das hier besser im Video, wenn ich hier noch ein bisschen mehr Platz schaffe. Es ist nichts Besonderes. Hier sehe ich meinen normalen Quelltext, sowie man sich das Ganze auch vorstellt, aber das Besondere hier ist: Wenn ein Quelltext eine Javascript-Datei lädt, dann wird der Code hier in rasender Geschwindigkeit ausgeführt, also innerhalb von wenigen Millisekunden ist der ganze Code durchgerauscht. Mit einem "Debugger" kann ich hier sogenannte "Breakpoints" setzen, also quasi Pausen machen. Ich kann z.B. sagen, wenn ich hier mit der Maus neben dieser "36" drauf klicke und wenn ich jetzt diesen Code ausführte, dann soll der Code an dieser Stelle hier anhalten. Dieser Code wird nur dann ausgeführt, wenn ich auf die Headline hier klicke. Das sieht man hier. Also ich tue es mal: Ich klicke hier oben drauf und dann sehen Sie, hier hat sich ein kleiner gelber Pfeil ins Bild geschoben und das Programm hat gesagt, hier an dieser Stelle, bevor diese Zeile überhaupt ausgeführt wird, da stoppe ich das Programm und ich durchlaufe diese ganzen folgenden Funktionen gar nicht. Jetzt kann ich Schritt für Schritt, Zeile für Zeile quasi oder streng genommen ist es "statement für statement", durch mein Script durchgehen. Ich habe hier rechts oben mehrere Buttons. Wenn ich da mit der Maus ein bisschen drüberfahre, dann sehen Sie diese gelbe oder ockernfarbene Pfeile nach unten hineinspringen. Wenn ich da jetzt drauf klicke, dann sind wir in diese Zeile, wo wir gerade waren, direkt hineingesprungen und das bedeutet, wir sind jetzt hier oben in der ersten Funktion. Hier gibt es die Variable "A", die ist noch "undefined", weil dieser Breakpoint, wo wir hier sind, am Anfang der Zeile steht. D.h. dieses "var A=5", das ist gar nicht ausgeführt worden. Wenn Sie mit der Maus hier über das "A" drüber fahren, dann sehen Sie, welchen Wert diese Variable momentan hat. Gehen wir einen Schritt weiter, springen weiter hinein, dann sehen Sie: Die Variable "A" hat jetzt den Wert 5, die Variable "B", ist noch nicht definiert. Jetzt kann ich Schritt für Schritt durch mein Script durchgehen. Jetzt, wenn ich auf "Second function" bin und dann auf "hineinspringen" gehe, dann gehe ich nicht auf die Zeile 8, wo die Funktion "Second function" definiert wird, sondern ich gehe direkt in die Funktion hinein. Hier wird eine Variable "Message" erzeugt, die wird eine Zeile später jetzt hier auch mit einem Wert belegt. Sie sehen hier, "Message" hat jetzt den Wert "hallo". Jetzt gehe ich in die dritte Zeile hinein und so kann ich dann der Reihe nach durchgehen. Ich bin in einer while-Schleife, die einhundertmal durchlaufen wird. Jetzt kann ich natürlich hier Schritt für Schritt durchgehen. Und Sie sehen auch jedes Mal, wie hier rechts der Index mit der Variable "I" hochgezählt wird und auch meine Totalvariable hochgezählt wird. Jetzt möchte ich das nicht einhundertmal hintereinander machen. Was ich tue, ich setze einen neuen Breakpoint, indem ich hier neben die Zeile klicke und dann sage ich: Führe das ganze Script aus bis zum nächsten Breakpoint. Also ich gehe hier auf dieses blaue Dreieck und dann bin ich hier am Anfang der "Fourth function". Wir haben jetzt hier also einen totalen Wert von 10 000 und unser Index ist auf 100 hochgezählt worden und jetzt möchte ich in diese "Fourth function" hineinspringen und lande ich bei "Third function", obwohl ich eigentlich zu "Fourth function" gehen wollte. Irgendetwas scheint hier gerade falsch gelaufen zu sein. Ich schaue mir das Ganze mal auf der Konsole an. Ich gehe hier rauf, dann sehe ich hier die Fehlermeldung: "Reference error: Fourth function is not defined". Diese "Fourth function", die gibt es gar nicht und wenn wir genau hinschauen, sehen Sie, dass diese "Fourth function" mit einem großen "F" geschrieben wird, aufgerufen wird sie aber mit einem kleinen "F". Das heißt, das sind zwei verschiedene Funktionen und deswegen kann Javascript kann diese Funktion nicht aufrufen. Das heißt, Javascript macht ganz normal weiter. Die Funktion ist hier beendet, D.h. es geht jetzt zurück zur aufrufenden Funktion, das war diese "Second function". Wenn ich Schritt für Schritt weitergehe, dann lande ich immer genau da, von wo ich gerade aufgerufen worden bin, bis ich hier wieder in meinen ursprünglichen Event-Handler lande. Mit diesem "Debugger" können Sie also "statement für statement" durch Ihr Script hindurch navigieren. Sie können eben auch nachschauen, welche Werte Variablen zu welchem Zeitpunkt Ihres Scripts annehmen. Sie können überprüfen, ob Sie an einer Stelle rauskommen, wo Sie tatsächlich rauskommen wollen wie z.B. wir wollen irgendwann in diese "Fourth function" hineinkommen. Wir haben das nicht geschafft, aber wissen jetzt auch, woran es liegt und das dank dieser Konsolenmeldung. Solche "Debugger" gibt es für alle Programmiersprachen, und je nachdem, was diese Programmiersprachen für Besonderheiten haben, haben diese "Debugger" unterschiedliche Besonderheiten, aber diese grundsätzliche Idee, dass ich durch mein Code Schritt für Schritt durchgehen kann und dass ich Breakpoints setzen kann, die haben alle "Debugger" gemeinsam.

Grundlagen der Programmierung: Basiswissen

Steigen Sie ein in die Welt der Computerprogrammierung und verschaffen Sie sich das Grundwissen, um schon bald eigene Lösungen und Anwendungen zu schreiben.

5 Std. 38 min (64 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!