Przepływy debugowania

Przepływy debugowania

Przekształć debugowanie z godzin frustracji w minuty systematycznego rozwiązywania problemów. Naucz się przepływów debugowania wspomaganych przez AI, które pomagają identyfikować, izolować i naprawiać błędy szybciej niż kiedykolwiek wcześniej.

Przewaga debugowania z AI

Tradycyjne debugowanie to często:

• Czasochłonny proces prób i błędów
• Ograniczone przez ludzkie rozpoznawanie wzorców
• Zależne od doświadczenia developera
• Wyczerpujące psychicznie

Debugowanie wspomagane przez AI to:

• Systematyczne i wyczerpujące - AI sprawdza wzorce, które możesz przegapić
• Uczenie się z milionów błędów - Rozpoznaje częste problemy natychmiast
• Niezmordowane - Utrzymuje koncentrację przez złożone sesje debugowania
• Współpracujące - Jak posiadanie eksperta debuggera w programowaniu w parze

Wpływ: Zmniejsz czas debugowania o 40-70% znajdując przyczyny źródłowe bardziej niezawodnie.

Podstawowe wzorce debugowania

Strategiczne logowanie

AI umieszcza optymalne logi debugowania automatycznie

Analiza przyczyn źródłowych

Systematyczne podejście do znajdowania źródeł błędów

Rozpoznawanie wzorców

AI identyfikuje podobne błędy i rozwiązania

Walidacja poprawek

Upewnij się, że poprawki nie wprowadzają nowych błędów

Wzorzec 1: Przepływ strategicznego logowania

Kiedy używać

• Błąd występuje niespójnie
• Złożone problemy z przepływem danych
• Problemy z wydajnością
• Awarie integracji

Implementacja

1. Opisz symptom

   Błąd: Uwierzytelnianie użytkownika czasami nie działa
   Error: "Token validation failed"
   Częstotliwość: ~30% prób logowania
   Nie zidentyfikowano jasnego wzorca

2. Pozwól AI dodać strategiczne logi

   // Prompt do Cursora
   @file auth/login.js
   @file auth/token.js
   
   Dodaj logowanie debugowania do śledzenia przepływu uwierzytelniania.
   Skup się na:
   - Generowaniu i walidacji tokenów
   - Problemach z timing
   - Zmianach stanu
   - Wywołaniach zewnętrznych API

3. AI generuje ukierunkowane logowanie

   // AI dodaje strategiczne console.log
   async function validateToken(token) {
     console.log('[AUTH] Rozpoczynam walidację tokenu', {
       tokenLength: token?.length,
       timestamp: Date.now(),
       tokenPrefix: token?.substring(0, 10)
     });
   
     try {
       console.log('[AUTH] Dekoduję token...');
       const decoded = jwt.verify(token, SECRET);
       console.log('[AUTH] Token zdekodowany pomyślnie', {
         userId: decoded.userId,
         exp: decoded.exp,
         timeUntilExpiry: decoded.exp - Date.now()
       });
   
       // Więcej strategicznych logów...
     } catch (error) {
       console.error('[AUTH] Walidacja tokenu nie powiodła się', {
         error: error.message,
         token: token?.substring(0, 20),
         stack: error.stack
       });
     }
   }

4. Uruchom i zbierz logi

   # Użyj trybu YOLO do automatycznego uruchomienia
   npm test -- --grep "authentication"
   # lub
   npm run dev > debug.log 2>&1

5. Analizuj z AI

   @file debug.log
   
   Przeanalizuj te logi i zidentyfikuj:
   1. Przyczynę źródłową przerywanej pracy
   2. Wszelkie wzorce w błędach
   3. Sugerowane poprawki

Przykład z prawdziwego świata

Wskazówka

Historia sukcesu: Developer spędził 6 godzin próbując debugować przerywane awarie API. Używając tego przepływu, Cursor zidentyfikował sytuację wyścigu w 15 minut, umieszczając logi, które ujawniły odświeżanie tokenu podczas walidacji.

Wzorzec 2: Protokół łowcy błędów

Systematyczne badanie błędów

## Szablon badania błędów

### 1. Dokumentacja symptomów
- **Co się dzieje**: [Dokładne zachowanie]
- **Oczekiwane zachowanie**: [Co powinno się dziać]
- **Komunikaty błędów**: [Skopiuj dokładne błędy]
- **Kroki do reprodukcji**: [Minimalne kroki]

### 2. Zbieranie kontekstu
@file [lokalizacja błędu]
@code [konkretna funkcja]
@recent-changes
@linter-errors

### 3. Prośba o analizę AI
Na podstawie powyższego kontekstu:
1. Jakie są najbardziej prawdopodobne przyczyny?
2. Jakie dodatkowe informacje by pomogły?
3. Zasugeruj kod diagnostyczny do dodania

Przykład: Polowanie na wyciek pamięci

Node.js

// Krok 1: Poproś AI o dodanie profilowania pamięci
/**
 * @cursor Dodaj wykrywanie wycieku pamięci:
 * - Snapshoty heap w odstępach
 * - Śledzenie alokacji obiektów
 * - Liczenie event listenerów
 * - Logowanie użycia pamięci
 */

// AI generuje:
const heapUsed = process.memoryUsage().heapUsed;
console.log(`Pamięć: ${Math.round(heapUsed / 1024 / 1024)}MB`);

// Śledź liczbę obiektów
const objectCounts = {};
setInterval(() => {
  const snapshot = {};
  // AI dodaje zaawansowane śledzenie
}, 5000);

React

// Krok 1: Poproś AI o wykrywanie wycieków specyficznych dla React
/**
 * @cursor Dodaj wykrywanie wycieków pamięci React:
 * - Śledź mount/unmount komponentów
 * - Monitoruj czyszczenie efektów
 * - Sprawdź usuwanie event listenerów
 * - Wykryj wycieki subskrypcji
 */

// AI generuje:
useEffect(() => {
  console.log(`[LEAK-CHECK] ${componentName} zamontowany`);
  const activeSubscriptions = [];

  // Śledź wszystkie subskrypcje
  const originalSubscribe = EventEmitter.prototype.on;
  EventEmitter.prototype.on = function(...args) {
    activeSubscriptions.push({
      event: args[0],
      listener: args[1],
      stack: new Error().stack
    });
    return originalSubscribe.apply(this, args);
  };

  return () => {
    console.log(`[LEAK-CHECK] ${componentName} odmontowywany`, {
      activeSubscriptions: activeSubscriptions.length
    });
  };
}, []);

Wzorzec 3: Detektyw regresji

Znajdowanie kiedy błędy zostały wprowadzone

# Krok 1: Użyj AI do stworzenia skryptu git bisect
@cursor Stwórz skrypt który:
1. Używa git bisect do znalezienia kiedy błąd został wprowadzony
2. Automatycznie uruchamia nasz test
3. Identyfikuje łamiący commit

# AI generuje:
#!/bin/bash
# bisect-bug.sh

echo "Rozpoczynam automatyczny git bisect..."

# Zdefiniuj komendę testową
test_command="npm test -- --grep 'user authentication'"

# Rozpocznij bisect
git bisect start
git bisect bad HEAD
git bisect good v1.2.0  # Ostatnia znana dobra wersja

# Uruchom automatyczny bisect
git bisect run bash -c "$test_command && echo 'good' || echo 'bad'"

# Pobierz wynik
breaking_commit=$(git bisect view --oneline -1)
echo "Błąd wprowadzony w: $breaking_commit"

# Resetuj
git bisect reset

Analiza łamiących zmian

@git commit [breaking_commit_hash]
@file [changed_files_in_commit]

Przeanalizuj ten commit i wyjaśnij:
1. Co zmieniło się, co mogło spowodować [opis błędu]
2. Dlaczego ta zmiana łamie [funkcję]
3. Zasugeruj poprawkę zachowującą intencję

Wzorzec 4: Debugger stanu

Debugowanie złożonych problemów ze stanem

Redux

// Poproś AI o dodanie debugowania Redux
/**
 * @cursor Dodaj kompleksowe debugowanie Redux:
 * - Loguj wszystkie akcje z payload
 * - Śledź zmiany stanu
 * - Identyfikuj który komponent wywołał akcje
 * - Wykryj mutacje stanu
 */

// AI tworzy middleware:
const debugMiddleware = store => next => action => {
  console.group(`[REDUX] ${action.type}`);
  console.log('Payload:', action.payload);
  console.log('Poprzedni stan:', store.getState());
  console.log('Wywołane przez:', new Error().stack.split('\n')[7]);

  const result = next(action);

  console.log('Nowy stan:', store.getState());
  console.groupEnd();

  return result;
};

React Context

// Debuguj problemy z React Context
/**
 * @cursor Stwórz debugger Context który:
 * - Śledzi wszystkie aktualizacje kontekstu
 * - Pokazuje który komponent wywołał aktualizacje
 * - Identyfikuje niepotrzebne re-rendery
 * - Loguje zmiany wartości kontekstu
 */

// AI generuje:
export const DebugProvider = ({ children, name }) => {
  const [value, setValue] = useState(initialValue);
  const updateCount = useRef(0);

  const debugSetValue = useCallback((newValue) => {
    updateCount.current++;
    console.log(`[CONTEXT-${name}] Aktualizacja #${updateCount.current}`, {
      from: value,
      to: newValue,
      triggeredBy: new Error().stack,
      timestamp: Date.now()
    });
    setValue(newValue);
  }, [value, name]);

  return (
    <Context.Provider value={{ value, setValue: debugSetValue }}>
      {children}
    </Context.Provider>
  );
};

Wzorzec 5: Profiler wydajności

Debugowanie wydajności wspomagane przez AI

// Krok 1: Poproś AI o dodanie śledzenia wydajności
/**
 * @cursor Dodaj profilowanie wydajności do identyfikacji wąskich gardeł:
 * - Czas wykonywania funkcji
 * - Czas trwania zapytań do bazy danych
 * - Opóźnienie wywołań API
 * - Wydajność renderowania
 * - Alokacja pamięci
 */

// AI generuje kompleksowe profilowanie:
const performanceTracker = {
  marks: new Map(),

  start(label) {
    this.marks.set(label, {
      start: performance.now(),
      memory: process.memoryUsage().heapUsed
    });
  },

  end(label) {
    const mark = this.marks.get(label);
    if (!mark) return;

    const duration = performance.now() - mark.start;
    const memoryDelta = process.memoryUsage().heapUsed - mark.memory;

    console.log(`[PERF] ${label}`, {
      duration: `${duration.toFixed(2)}ms`,
      memory: `${(memoryDelta / 1024).toFixed(2)}KB`,
      slow: duration > 100
    });

    if (duration > 100) {
      console.warn(`[PERF] Wykryto wolną operację: ${label}`);
    }
  }
};

// Użycie w kodzie
performanceTracker.start('database-query');
const results = await db.query(sql);
performanceTracker.end('database-query');

Zaawansowane techniki debugowania

Technika 1: Debugowanie wyszukiwaniem binarnym

# Przy problemach z przetwarzaniem danych
@cursor Pomóż mi zaimplementować debugowanie wyszukiwaniem binarnym:

1. Błąd występuje przy przetwarzaniu dużych zbiorów danych
2. Działa dobrze z małymi danymi (< 100 elementów)
3. Nie działa z dużymi danymi (> 10000 elementów)

Stwórz podejście wyszukiwania binarnego do znalezienia dokładnego rozmiaru danych
gdzie zaczyna nie działać.

Technika 2: Debugger porównujący

// Porównaj działające vs zepsute scenariusze
/**
 * @cursor Stwórz debugger porównujący:
 *
 * Scenariusz działający: Użytkownik A może się zalogować
 * Scenariusz zepsuty: Użytkownik B nie może się zalogować
 *
 * Dodaj logowanie które przechwytuje i porównuje:
 * - Wszystkie parametry funkcji
 * - Wartości zwracane
 * - Stan w każdym kroku
 * - Różnice w czasie
 *
 * Wyprowadź diff pokazujący gdzie ścieżki się rozchodzą
 */

Technika 3: Debugger podróży w czasie

// Śledzenie historii stanu
/**
 * @cursor Stwórz debugowanie podróży w czasie dla naszej aplikacji:
 * - Przechowuj ostatnie 50 zmian stanu
 * - Pozwól na odtworzenie przejść stanu
 * - Identyfikuj które przejście spowodowało błąd
 * - Eksportuj historię stanu do analizy
 */

const stateHistory = {
  states: [],
  maxHistory: 50,

  record(state, action) {
    this.states.push({
      state: JSON.parse(JSON.stringify(state)),
      action,
      timestamp: Date.now(),
      stack: new Error().stack
    });

    if (this.states.length > this.maxHistory) {
      this.states.shift();
    }
  },

  replay(fromIndex = 0) {
    // Odtwórz przejścia stanu
  },

  export() {
    // Eksportuj do analizy
  }
};

Automatyzacja przepływu debugowania

Skrypt auto-debug

#!/bin/bash
# auto-debug.sh - Automatyzacja debugowania wspomagana przez AI

echo "🔍 Rozpoczynam sesję debugowania wspomaganą przez AI..."

# Krok 1: Zbierz informacje o błędach
echo "📝 Zbieranie logów błędów..."
npm test 2>&1 | tee test-output.log

# Krok 2: Otwórz logi w Cursorze do analizy AI
echo "🤖 Otwieranie w Cursorze do analizy..."
cursor test-output.log

# Krok 3: Użyj AI Cursora do analizy i naprawy
# W Cursorze możesz:
# - Użyć @test-output.log do referencji logu błędów
# - Poprosić AI o analizę błędów i sugestie poprawek
# - Użyć AI do wygenerowania poprawek dla zidentyfikowanych problemów

# Krok 4: Uruchom weryfikację
echo "✅ Weryfikacja poprawek..."
npm test

echo "📊 Sesja debugowania zakończona!"

Metryki debugowania i ROI

Metryka	Tradycyjne	Wspomagane przez AI	Poprawa
Średni czas naprawy błędu	4.5 godziny	1.2 godziny	73% szybciej
Dokładność przyczyny źródłowej	60%	95%	58% lepiej
Wskaźnik regresji	15%	3%	80% mniej
Frustracja developera	Wysoka	Niska	Bezcenne

Częste pułapki debugowania

Uwaga

Antywzorce debugowania do unikania:

1. Przypadkowe zmiany - Wprowadzanie zmian bez zrozumienia błędu
2. Nadmierne logowanie - Dodawanie logów wszędzie zamiast strategicznie
3. Ignorowanie sugestii AI - AI często widzi wzorce przegapiane przez ludzi
4. Brak dokumentacji - Niezapisanie poprawki na przyszłość
5. Pomijanie weryfikacji - Niepotwierdzenie, że poprawka nie psuje innych rzeczy

Listy kontrolne debugowania

Lista przed-debugowaniem

• Czy mogę powtórzyć błąd konsekwentnie?
• Mam dokładne komunikaty błędów/symptomy?
• Sprawdziłem ostatnie zmiany?
• Zweryfikowałem, że to nie jest problem środowiska?
• Mam minimalny przypadek reprodukcji?

Lista procesów debugowania

• Dodane strategiczne logowanie
• Zidentyfikowany wzorzec/kategoria błędu
• Znaleziona przyczyna źródłowa (nie tylko symptom)
• Przetestowana poprawka w izolacji
• Zweryfikowany brak regresji
• Udokumentowana poprawka

Lista po-debugowaniu

• Dodany test zapobiegający regresji
• Zaktualizowana dokumentacja
• Podzielone uczenie się z zespołem
• Dodane do playbooka debugowania
• Rozważone strategie zapobiegania

Następne kroki

Opanuj przepływy debugowania aby:

• Zmniejszyć czas debugowania o 70%+
• Znajdować przyczyny źródłowe bardziej niezawodnie
• Zapobiegać powrotom błędów
• Zachować zdrowie psychiczne developera

Kontynuuj z:

• Wzorce testowania - Zapobiegaj błędom zanim się pojawią
• Strategie refaktoryzacji - Napraw problemy architektoniczne
• Przepływy recenzji - Wyłap błędy w recenzji

Pamiętaj: Najlepszy debugger to ten, który pomaga zrozumieć nie tylko co jest zepsute, ale dlaczego się zepsuło i jak zapobiec powtórnemu zepsuciu.