Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Fehlermeldungen deuten

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Fehlermeldungen deuten

“

Die meisten Programmiersprachen zeigen Fehlermeldungen automatisch an. JavaScript macht das nicht, da sie auf Webseiten arbeitet. Und schließlich möchte niemand, dass ein fremder Webseitenbesucher automatisch die Fehlermeldung der eigenen Seite zu sehen bekommt. Sie können jedoch über Ihren Browser die sogenannten Entwicklertools einschalten. Diese helfen Ihnen bei der Fehlersuche. Wie das konkret aussieht, variiert von Browser zu Browser. Ich nutze hier Google Chrome. Es gibt aber auch Entwicklertools für andere Browser, wie z.B. Firefox, Edge oder Safari. Ich öffne also als Erstes meine Webseite in meinem Browser. Hier sollte sich eigentlich die Überschrift ändern, wenn ich darauf klicke. Das passiert aber nichts. Es liegt also irgendwo ein Fehler vor. Um diesen zu finden, klicke ich auf die drei Pünktchen auf der rechten Seite. Unter "Weitere Tools" finde ich die Entwicklertools. Hier öffnet sich so ein großes Fenster. Wenn ich hier auf Elemente gehe, sehe ich den HTML-Code meiner Webseite. Klicke ich z.B. auf h1, dann wird die Überschrift markiert. Das kann ich auch mit dem Text oder allen anderen Zeilen meines HTML-Codes machen. Unter Konsole finde ich eine Fehlermeldung: "ReferenceError: fourthfunction ist not defined". Ich möchte eine Funktion aufrufen, die anscheinend nicht definiert ist. Hier ist doch angegeben, wie tief der Fehler im Quellcode steckt. Erst wurde headline.onclick ausgeführt, anschließend firstFunction. firstFunction wiederum ruft secondFunction auf. secondFunction ruft thirdFunction auf. Ja, und thirdFunction versucht, fourthfunction aufzurufen, aber das funktioniert an der Stelle nicht. Unter Quellcode finde ich dann entsprechend die HTML- und die Skript- bzw. JavaScript-Datei. Wenn ich auf JavaScript-Datei klicke, dann öffnet sich die Datei in diesem mittleren Fenster. Und hier sehe ich auch schon gleich einen Fehler in Zeile 9. Hier ist irgendwas mit der fourthFunction kaputt. Und wenn ich jetzt genau hinsehe, sehe ich, okay, die thirdFunction versucht, fourthFunction aufzurufen, die aber hier mit einem kleinen f in der Mitte geschrieben wurde. Tatsächlich wird aber weiter unten die fourthFunction mit einem großen F definiert. Das ist also der Fehler, hier liegt der Hund begraben. Ich ändere einfach mal fix diesen kleinen Fehler ab. Leider kann ich die Datei jetzt nicht so speichern aus Sicherheitsgründen. Was ich machen kann, ist, entweder einfach mit Strg+S das mal temporär abzulegen, dann kann ich zumindest ausprobieren, ob diese Änderung was gebracht hat. Ich klicke also mal auf die Überschrift und wir sehen, es hat funktioniert. "Sie haben auf die Headline geklickt" erscheint. D.h., hier lag tatsächlich der Fehler. Möchte ich jetzt die geänderte JavaScript-Datei speichern, dann gehe ich auf die JavaScript-Datei und auf "Speichern unter". Ich muss jetzt entweder meine alte Skriptdatei überschreiben oder lege eine zusätzliche Skriptdatei unter anderem Namen ab. Wenn ich aber eine neue Datei mit neuem Namen anlege, darf ich aber auch nicht vergessen, in der HTML-Datei auf den neuen Dateinamen zuzugreifen. Also, wie Sie sehen, dass dieses Entwicklertool sehr mächtig. Ich kann mir anschauen, ob ich im CSS, HTML oder eben in JavaScript Fehler habe. Ich kann aber hier unter Quellcode in der JavaScript-Datei JavaScript-Befehle eingeben und diese dann entsprechend ausführen. Ich kann mir aber auch Informationen über Netzwerke, über die Leistung, über den Speicherverbrauch anzeigen lassen, oder z.B. schauen, wie es um die Sicherheit der Seite bestellt ist. Dieses Entwicklertool ist ein einfacher kleiner Debugger, also ein Werkzeug, das Ihnen beim Aufspüren von Fehlern hilft. Auf dem Begriff Debuggen gehe ich im nächsten Video noch genauer ein. Es kann Sie beim Entwickeln wunderbar unterstützen, auch wenn Sie nur ein kleines JavaScript-Projekt haben. Sie können so Tippfehler aber auch logische Fehler viel schneller finden. Kurz gesagt: Das Entwicklertool hilft Ihnen dabei, Ihren Code zu debuggen.

Inhalt