Fehleranalyse

1. Standardüberprüfungen

Vorüberlegungen

  • Ist die angezeigte Datei wirklich die, an der Sie zuletzt gearbeitet haben?
  • Lautet die Dateiendung .html?
  • Benutzen Sie einen guten Editor mit eingeschaltetem Syntaxschema Javascript?
  • Wurden die Programmierrichtlinien eingehalten (Einrückungen etc.)?

Prüfen der Syntax

Die Syntax ist sozusagen die Rechtschreibung im Computerprogramm. Während die Rechtschreibung in einem Aufsatz zu Punktabzügen führt, führt eine fehlerhafte Syntax in einem Computerprogramm zur völligen Fehlfunktion und oft dann leider auch zur kompletten De-Motivation von Programmieranfängern!
Ein paar Übungen zum Finden Ihrer Fehler stehen hier bereit, was Ihre "Computerprogramm-Rechtschreibung" angeht. Nach Durcharbeiten der Übungen sollte Ihnen das fehlerfreie Schreiben von Quelltexten leichter fallen. Die gewonnene Zeit, welche in Zukunft nicht mehr in die Fehlersuche gesteckt werden muss, ist für Sie von großem Vorteil. Sie können sich fortan mit den wichtigen und relevanten Teilen Ihres Programms beschäftigen!
Eine weitere Hilfe stellt die Online-Prüfung Ihres Quelltextes dar, z.B. hier:

2. Schrittweise Suche

Eine schrittweise Suche eines Fehlers funktioniert wie folgt:
  1. Kommentieren Sie Ihren Quelltext komplett aus, z.B. so /* <Mein Quelltext> */ .
    <script ...>
    alert("Hallo Welt!)"
    anweisung1;
    /*
    anweisung2;
    anweisung3;
    */
    </script>
  2. Schreiben Sie eine Ausgabeanweisung in den Scriptteil (z.B. mit document.write() oder alert()),
    um zu prüfen, ob Ihre Entwicklungsumgebung funktioniert und das Script überhaupt lauffähig ist.
  3. Sichtprüfung des Quelltextes:
    • Wurden Programmierrichtlinien eingehalten? Kann man den Quelltext wirklich gut lesen?
    • Prüfen Sie Ihren Textanteil im Quelltext! Z.B. werden alle Texte in einer Farbe entsprechend des Syntaxschemas des Editors angezeigt
  4. Nehmen Sie schrittweise jeweils eine Anweisung aus dem Kommentar heraus und testen Sie Ihr Programm ob es noch läuft. Sobald es nicht mehr funktioniert haben Sie die fehlerhafte Zeile gefunden. Wenn Sie wissen, wo Sie suchen müssen sehen Sie den Fehler meistens sofort.

3. Browserunterstützung bei der Fehlersuche / Konsole und console.log()

Firefox

Firefox zeigt fehlerhaften Quelltext bei Bedarf in einem Extrafenster an. Das Fenster läßt sich einblenden über die Menüpunkte Extras->Web-Entwickler->Web-Konsole. Die fehlerhafte Zeilennummer können Sie am Ende der Zeile ablesen. In der Regel ist es sinnvoll, jeweils den ersten Fehler zu korrigieren und die Seite erneut aufzurufen; jede andere Vorgehenseise ist für Anfänger schwieriger, da diese die möglicherweise angezeigten Folgefehler nicht als solche erkennen können. Der folgende Screenshot zeigt von diesem Firefox-Browser (Version 24.1.1) nicht erkannte CSS-Elemente auf der Webseite www.google.de an.

FirefoxKonsole.PNG

Mit dem folgendem Befehl können Sie auch selbst Ausgaben in die Konsole schreiben:
window.console.log("halli hallo");
 

Firebug

Schrittweises Prüfen durch Setzen von Breakpoints

siehe z.B. ...

Weitere Ideen für die Fehlersuche - auch für Javascript (by Cool):


Syntax-Prüfung

  1. Beautifier für HTML, CSS, Javascript verwenden, damit eine bessere Übersicht (Klammerungen) entsteht.
  2. Notepad++ : Blöcke kontrollieren, Schreibweise des Variablennamen, Klammersetzung prüfen.
  3. HTML im Validator checken: http://validator.w3.org/
  4. CSS-Validator benutzen: http://jigsaw.w3.org/css-validator/#validate_by_input
  5. Javascript-Code bei LINT-ONLINE testen: http://www.javascriptlint.com/online_lint.php

Funktionsprüfung

  1. Alle JS-Dateien korrekt eingebunden, im Quelltext des Browsers die Verlinkung prüfen,
    Window.onload verwenden und ein alert(), um zu sehen, ob JS angesprochen wird,
    weiteren JS-Code ggf. auskommentieren
  2. Event-Handler kontrollieren, z.B. mit alert(), ggf. folgende Befehle auch auskommentieren
  3. Fehlerkonsole checken auf Fehlermeldungen
  4. Logisches Abarbeiten der programmierten Funktion: Ein alert (x+y+z) am Anfang des Skriptes mit Variablen x,y,z vrersehen und diese ausgeben. Weiteren JS-Code auskommentieren.
  5. Überprüfen, ob Falscheingaben korrekt verhindert werden.
  6. Bedienerführung:
    1. Funktioniert das Programm beim Programmierer? => + (ausreichend)
    2. Kann der Kollege das Programm ohne Anleitung problemlos bedienen? => ++ (befriedigend)
    3. Ist das Programm auch von Nicht-Programmierern (Bruder, Schwester, etc.) zu bedienen? => +++ (gut)
    4. Funktioniert das Programm sogar noch ohne Anleitung bei Oma? => ++++ (sehr gut)