Was tun bei Fehlern im Code

Kapitelübersicht

🎯本章学习目标

Debugging-TippsKI-ZusammenarbeitProblemeingrenzungEntwicklertools

In der KI-Ära hat sich die Art und Weise, wie man Fehler behebt, verändert.

Sie müssen nicht alle Fehlertypen auswendig kennen, kein Debugging-Experte sein und nicht einmal verstehen, was der Fehler bedeutet.

Sie müssen nur eines lernen: wie man die KI richtig fragt.

Dieses Kapitel vermittelt Ihnen einen von einfach bis fortgeschritten strukturierten Behebungsprozess:

1. Schritt 1: Direkt fragen: Phänomen beschreiben + Screenshot, mit einem Satz fragen
2. Schritt 2: Informationen ergänzen: Wenn das Problem nicht gelöst werden kann, F12 öffnen und wichtige Informationen nachreichen

Mit diesem Prozess können Sie 90 % der Fehler selbst beheben.

⏱️

预计耗时

Etwa 30 Minuten

📦

预期产出

Ein standardisierter Fehlerbehebungsprozess

90 % der häufigen Fehler selbstständig beheben können

Hinweis

Alle Methoden in diesem Kapitel basieren auf praktischer Erfahrung mit KI-IDEs wie Cursor/Trae/Claude und lassen sich direkt in der täglichen Entwicklung anwenden.

1. Kernprinzip: Screenshot an die KI senden

Warum ist dieses Kapitel so wichtig?

Viele Anfänger reagieren auf Fehlermeldungen wie folgt:

• In Panik geraten und blind Code ändern
• Eine halbe Stunde nach "Wie löse ich den Fehler xxx" suchen
• Versuchen, selbst zu verstehen, was der Fehler bedeutet
• Sich bis nachts um drei allein durchs Debugging quälen

Das ist alles verschwendete Zeit.

In der KI-Ära ist Debugging etwas sehr Einfaches geworden:

Fehlermeldung sehen → Screenshot machen → KI fragen → Den Anweisungen der KI folgen

Sie müssen den Fehler nicht verstehen, nicht debuggen können und nicht einmal wissen, wo das Problem liegt.

Sie müssen nur lernen, wie man fragt.

1.1 Die einfachste Fragestellung

Keine komplizierten Vorlagen nötig -- zwei Methoden zur Auswahl:

Methode 1: Phänomen beschreiben

Format: Was Sie gerade getan haben, was jetzt aufgetreten ist

Ich habe gerade den Code der Login-Seite geändert, jetzt ist die Seite weiß. Was soll ich tun?

Methode 2: Screenshot

Einfach einen Screenshot der aktuellen Seite oder Fehlermeldung machen

[Screenshot]

Wie löse ich diesen Fehler?

Die beste Methode: Beschreibung + Screenshot

Ich habe gerade den Code der Login-Seite geändert, jetzt ist die Seite weiß.

[Screenshot]

Was soll ich tun?

Merken: Beschreiben Sie den Kontext klar und fügen Sie einen Screenshot hinzu -- so kann die KI das Problem schneller lösen.

1.2 Wie man das Problem klar beschreibt

Viele Anfänger wissen, dass sie fragen sollen, aber nicht, wie. Dabei genügt es, drei Dinge klar zu machen:

1. Was Sie gerade getan haben

Ich habe gerade auf Speichern geklickt
Ich habe gerade den Code der Login-Seite geändert
Ich habe gerade die Seite aktualisiert

2. Was Sie jetzt sehen

Die Seite ist jetzt leer
Der Button reagiert nicht auf Klicks
Jetzt wird eine Fehlermeldung angezeigt

3. Welches Ergebnis Sie erzielen möchten

Ich möchte, dass die Daten erfolgreich gespeichert werden
Ich möchte, dass die Seite normal angezeigt wird
Ich möchte, dass nach dem Klick auf den Button eine Meldung erscheint

Vollständiges Beispiel:

Ich habe gerade auf Speichern geklickt, jetzt zeigt die Seite den Fehler "Speichern fehlgeschlagen".

[Screenshot]

Ich möchte, dass die Formulardaten erfolgreich in der Datenbank gespeichert werden. Was soll ich tun?

Wichtige Prinzipien:

• In einfachen Worten beschreiben, keine Fachbegriffe verwenden
• Chronologisch vorgehen: Was zuerst getan wurde, was dann passiert ist
• Die eigenen Erwartungen aussprechen, damit die KI weiß, was Sie wollen

2. Erster Schritt: Direkt das Phänomen beschreiben und fragen

Wenn Sie auf ein Problem stoßen, öffnen Sie noch nicht sofort F12. Beschreiben Sie zuerst das Phänomen, machen Sie einen Screenshot der aktuellen Seite und geben Sie es der KI.

Oft kann die KI anhand des Screenshots direkt eine Lösung vorschlagen.

2.1 Häufige Phänomene beschreiben

Einfach beschreiben

Seite ist weiß

Die Seite öffnet sich und ist leer. Was soll ich tun?

[Screenshot]

Button reagiert nicht auf Klicks

Dieser Button reagiert nicht. Bitte prüfen.

[Screenshot]

Daten lassen sich nicht speichern

Ich habe auf Speichern geklickt, aber die Daten wurden nicht gespeichert. Was soll ich tun?

[Screenshot]

Styling stimmt nicht

Dieser Button ist verschoben. Wie kann ich das anpassen?

[Screenshot]

API-Fehler

Beim Aufruf der Schnittstelle ist ein Fehler aufgetreten. Bitte prüfen.

[Screenshot]

2.2 Wenn die KI das Problem direkt löst

Herzlichen Glückwunsch, das Problem ist gelöst! Folgen Sie einfach den Anweisungen der KI.

2.3 Wenn die KI "weitere Informationen benötigt"

Jetzt müssen Sie F12 öffnen und wichtige Informationen nachreichen. Weiter unten.

3. Zweiter Schritt: Wichtige Informationen ergänzen

Wenn die KI weitere Informationen benötigt, öffnen Sie je nach Problemtyp F12 und ergänzen Sie die entsprechenden Inhalte.

3.1 Wann Informationen ergänzt werden müssen

Die KI könnte wie folgt antworten:

• "Bitte öffnen Sie die Console und prüfen Sie, ob Fehler vorliegen"
• "Machen Sie einen Screenshot des Network-Panels"
• "Ich benötige die genaue Fehlermeldung"

In diesem Fall ergänzen Sie die Screenshots anhand der folgenden Anleitung.

3.2 Console-Informationen ergänzen (weiße Seite / Fehler)

Arbeitsschritte

Schritt 1: F12 drücken, um die Entwicklertools zu öffnen

Auf dem Mac: Cmd+Option+I, oder Rechtsklick auf die Seite und "Untersuchen" wählen.

Schritt 2: Zum Tab Console wechseln

Schritt 3: Screenshot der roten Fehlermeldungen machen

Schritt 4: An die KI senden

Die Console zeigt folgende Fehler:

[Screenshot]

3.3 Network-Informationen ergänzen (Datenprobleme / API-Fehler)

Arbeitsschritte

Schritt 1: F12 drücken, um die Entwicklertools zu öffnen

Schritt 2: Zum Tab Network wechseln

Schritt 3: Die Aktion erneut ausführen (auf Speichern klicken / Seite aktualisieren)

Schritt 4: Die entsprechende Anfrage finden und einen Screenshot machen

• URL und Statuscode prüfen
• Payload (gesendete Parameter) prüfen
• Response (Rückgabeergebnis) prüfen

Schritt 5: An die KI senden

Network-Informationen wie folgt:

Anfrage: [Screenshot 1]
Parameter: [Screenshot 2]
Antwort: [Screenshot 3]

3.4 Elements-Informationen ergänzen (Styling-Probleme)

Arbeitsschritte

Schritt 1: Rechtsklick auf das Element → "Untersuchen"

Die Entwicklertools positionieren sich automatisch auf diesem Element.

Schritt 2: Screenshot des Styles-Panels machen

Schritt 3: An die KI senden

Element-Styling wie folgt:

[Screenshot]

4. Dritter Schritt: Iterativ bis zur Lösung

4.1 Ineffiziente Vorgehensweisen

Diese Vorgehensweisen verschwenden Ihre Zeit:

Bei einer Fehlermeldung in Panik geraten und blind Code ändern Eine halbe Stunde nach Lösungen suchen Versuchen, selbst die Bedeutung jedes Fehlers zu verstehen Sich allein bis nachts um drei durchs Debugging quälen

4.2 Effiziente Vorgehensweise

Gehen Sie nach diesem Prozess vor:

Zunächst das Phänomen beschreiben und mit Screenshot fragen Wenn die KI weitere Informationen benötigt, F12 öffnen und ergänzen Den Empfehlungen entsprechend den Code ändern Nach der Änderung testen; falls das Problem weiterhin besteht, weiter mit Screenshot fragen

5. Zusammenfassung: Vollständiger Prozess

Problem aufgetreten
    ↓
Phänomen direkt beschreiben + Screenshot
    ↓
An die KI senden: "Was soll ich tun?"
    ↓
Hat die KI das Problem direkt gelöst?
    ↓ Ja
Den Anweisungen der KI folgen
    ↓
Testen, ob das Problem gelöst ist
    ↓
    ↓ Nein / KI benötigt weitere Informationen
F12 öffnen, wichtige Informationen ergänzen
    ↓
Erneut an die KI senden
    ↓
Wiederholen, bis das Problem gelöst ist