---

name: debugging_tools router_kit: FullStackKit description: Debugging araçları - console, debugger, network, profiling. metadata: skillport: category: quality tags: [architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, debugging tools, design patterns, development, documentation, efficiency, git, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, utilities, version control, workflow] - debugging-methodology

---

🛠️ 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ı

Aşama	Doğrulama
1	Hata "silinebilir" loglarla mı (console.log) yoksa kalıcı loglarla mı çözüldü?
2	Trace ID üzerinden tüm request flow'u (Distributed Tracing) takip edilebiliyor mu?
3	Hata düzeltmesi için bir test senaryosu eklendi mi?

---

Debugging Tools v1.5 - With Workflow