JavaScript-Formulare mit KI nachvollziehbar debuggen

1. Den Fehler mit einer konkreten Eingabe zeigen

• Beobachtung statt einer allgemeinen Fehlermeldung

  Die Beispielregel lautet: Ein Aufgabenname muss Text enthalten, nachdem Leerzeichen an den Rändern entfernt wurden. „Angebot prüfen“ ist gültig; ein leeres Feld oder drei Leerzeichen sind ungültig. Interne Leerzeichen sollen erhalten bleiben. Eine maximale Länge ist hier nicht vereinbart und wird deshalb nicht erfunden.

• Der ursprüngliche Check

  function acceptsName(value) {
    return Boolean(value);
  }
  
  acceptsName('   '); // true, obwohl die Regel verletzt wird

• Die Ursache eingrenzen

  Ein String mit Leerzeichen ist nicht leer. Ein Wahrheitswert-Check beantwortet daher eine andere Frage als die fachliche Regel. Zeigen Sie der KI die Funktion und die tatsächliche Eingabe. Fragen Sie nach der Ursache und nach weiteren Stellen, die von einer Änderung betroffen wären. Ohne Formular- oder Servercode kann die KI diese Stellen nicht zuverlässig benennen.

2. Einen überprüfbaren KI-Auftrag schreiben

• Auftrag für dieses Beispiel

  Prüfe diesen JavaScript-Check: function acceptsName(value) { return Boolean(value); }
  Reproduktion: Drei Leerzeichen werden akzeptiert. Erwartet: ungültig.
  Regel: Nur Strings mit Inhalt nach dem Kürzen der äußeren Leerzeichen sind gültig. Interne Leerzeichen bleiben erhalten.
  Erkläre die Ursache, schlage eine kleine Korrektur vor und nenne Checks für normale, leere und falsch typisierte Eingaben. Erfinde keine Längenregel. Formular, API und Datenbankcode sind nicht beigefügt. Behaupte nicht, diese Dateien geprüft oder Tests ausgeführt zu haben.

• Für das eigene Projekt ergänzen

  Fügen Sie Programmiersprache, Version, die relevante Datei und den beobachteten Ablauf hinzu. Beispiel: „Nach Speichern erscheint eine leere Zeile; nach Neuladen bleibt sie bestehen.“ Teilen Sie nur Code, den Sie verwenden dürfen. Entfernen Sie Schlüssel und unnötige personenbezogene Daten. Ein verbundenes GitHub-Konto ersetzt die Auswahl des richtigen Repositorys und der richtigen Revision nicht.

3. Die kleine Korrektur nachvollziehen

• Strings prüfen und den bereinigten Namen zurückgeben

  export function taskName(value) {
    if (typeof value !== 'string') return null;
    const name = value.trim();
    return name.length > 0 ? name : null;
  }

• Den Rückgabewert bewusst verwenden

  Die Funktion liefert einen bereinigten Namen oder null. Der aufrufende Code muss bei null das Speichern verhindern und eine verständliche Fehlermeldung zeigen. Speichern Sie den zurückgegebenen Namen statt erneut den ursprünglichen Wert. Die Funktion wirft für Zahlen, null oder undefined keinen Fehler. Sie ändert interne Leerzeichen und die Großschreibung nicht.

• Was die Korrektur nicht abdeckt

  Dieser Helfer beweist keine korrekte Formularanzeige, API-Validierung oder Datenbankregel. Prüfen Sie dieselbe fachliche Regel an den benötigten Grenzen. Falls das Projekt weitere Regeln wie eine Maximallänge, Normalisierung oder verbotene Zeichen besitzt, ergänzen Sie diese ausdrücklich und testen Sie sie getrennt. Die Beispielregel ist kein allgemeiner Sicherheitsfilter für HTML oder Datenbankabfragen.

4. Den Download wirklich ausführen

• Lokal mit Node.js prüfen

  node formular-debugging.mjs
  
  Erwartete Ausgabe:
  8 Eingabe-Checks und die ursprüngliche Regression bestanden.

• Acht Eingaben und eine Regression

  Die Datei prüft leeren Text, Leerzeichen, Tabulator und Zeilenumbruch, einen normalen Namen mit äußeren Leerzeichen, den Text „0“, eine Zahl, null und undefined. Zusätzlich zeigt sie, dass der ursprüngliche Check die Leerzeichen akzeptiert. Die Checks verwenden das integrierte Node.js-Modul assert; es werden keine Pakete heruntergeladen und keine Netzwerkaufrufe gemacht.

• Im tatsächlichen Formular wiederholen

  Geben Sie die gleichen Werte über die Benutzeroberfläche ein. Prüfen Sie Fehlermeldung, Tastaturbedienung und den gespeicherten Namen. Laden Sie anschließend neu. Ein bestandener Helfer-Test ersetzt diese Prüfung nicht. Halten Sie Befehle, Ausgaben und nicht ausgeführte Checks fest, damit eine andere Person die Änderung nachvollziehen kann.

5. Von der Erklärung zur Arbeit im Repository

• Den passenden Brainbaby-Arbeitsbereich wählen

  Für eine Erklärung reicht ein relevanter Ausschnitt in Chat. Für eine Aufgabe im bestehenden Projekt öffnen Sie Baby Code und wählen Repository und Branch. Prüfen Sie die bereitgestellten Dateien, die vorgeschlagene Änderung und ob eine Ausführung tatsächlich verfügbar war. Ein Entwurf oder eine grüne Bildschirmdarstellung ist kein Beleg für einen bestandenen Test.

• Kosten und Freigabe vor dem nächsten Schritt

  Der Download und diese Anleitung sind kostenlos. AI-Anfragen und Projektaktionen verwenden die jeweils verfügbaren Kontingente; sehen Sie den aktuellen Plan im Konto nach. Prüfen Sie einen Patch und das Ziel der Veröffentlichung, bevor Sie einen Pull Request erstellen. Ob die Änderung gemergt und veröffentlicht wird, entscheiden Sie selbst. Einige weiterführende Produktanleitungen sind auf Englisch.

Häufige Fragen

Technische Quellen

• MDN: String.prototype.trim()
• Node.js: Assertions