🛠️ Debugging Tools

🛠️ Debugging Tools

Debugging araçları ve teknikleri.

💻 Console Methods

console.log('Value:', value);
console.table(arrayData);
console.group('Section');
console.trace('Stack trace');
console.time('op'); /​* ... */ console.timeEnd('op');

🔴 Debugger

function process(data) {
  debugger; // Breakpoint
  return transform(data);
}

# Node Inspector
node --inspect src/​index.js
# chrome://inspect

🌐 Network

// Axios interceptor
axios.interceptors.request.use(config => {
  console.log('Request:', config);
  return config;
});

📊 Logging

import pino from 'pino';

const logger = pino({ level: 'info' });
logger.info({ userId }, 'User logged in');
logger.error({ err }, 'Login failed');

🔄 Workflow

Kaynak: OpenTelemetry Documentation & Chrome DevTools Debugging Guide

Aşama 1: Observation & Reproduction

• Logging Audit: Hata anında yeterli bağlam (Context) sağlayan logların (Pino/​Winston) basılıp basılmadığını kontrol et.
• Reproduction: Hatayı lokal ortamda veya staging üzerinde tutarlı bir şekilde tekrarlayabilmek için gerekli input'ları belirle.
• Network Analysis: API çağrılarını ve payload'ları Tarayıcı Network Tab veya Proxyman/​Charles üzerinden izle.

Aşama 2: Strategic Debugging

• Breakpoints: debugger veya IDE breakpoint'leri kullanarak state'in nerede bozulduğunu adım adım (Step-over/​Step-into) takip et.
• Binary Search: Hatalı kod bloğunu bulmak için kodun büyük bölümlerini geçici olarak devre dışı bırak (Divide and Conquer).
• Memory Profiling: Memory leak durumunda Heap Snapshot alarak en çok yer kaplayan objeleri analiz et.

Aşama 3: Fix & Verification

• Root Cause Fix: Sadece semptomu değil, hatanın kök nedenini (Root Cause) düzelt.
• Regression Testing: Düzeltmenin başka yerleri bozmadığından emin olmak için ilgili testleri çalıştır.
• Observability Update: Benzer hataların gelecekte daha hızlı tespiti için yeni bir alert veya metric ekle.

Kontrol Noktaları

Debugging Tools v1.5 - With Workflow