Debugging Techniques: From Console.log Hell to Debugging Zen
It's 3 AM in my Capitol Hill apartment, and I'm staring at a bug that's been haunting me for six hours. My code is littered with console.log() statements like Christmas ornaments, and I'm no closer to finding the issue than when I started. This was me two years ago - a debugging amateur who thought adding more print statements was the solution to everything.
Then I joined Microsoft, where my mentor took one look at my console.log-infested code and said, "Maya, debugging is like being a detective. You need proper tools, systematic methods, and the patience to follow the evidence." That conversation transformed how I approach debugging forever.
Table Of Contents
- The Great Console.log Purge of 2023
- Browser DevTools Mastery
- VS Code Debugging Setup
- Node.js/JavaScript Debugging
- Production Debugging Strategies
- Debugging Complex Async Code
- Final Thoughts: Debugging as Problem-Solving Art
The Great Console.log Purge of 2023
Here's what my debugging process used to look like:
// My old debugging approach - the console.log graveyard
function calculateOrderTotal(items) {
console.log('calculateOrderTotal called');
console.log('items:', items);
let total = 0;
console.log('initial total:', total);
for (let item of items) {
console.log('processing item:', item);
console.log('item.price:', item.price);
console.log('item.quantity:', item.quantity);
let itemTotal = item.price * item.quantity;
console.log('itemTotal:', itemTotal);
total += itemTotal;
console.log('running total:', total);
}
console.log('final total before tax:', total);
let tax = total * 0.1;
console.log('tax:', tax);
total += tax;
console.log('final total with tax:', total);
return total;
}
My console output looked like a debug novel, and I still couldn't figure out why some orders were calculating wrong totals. The problem? I was debugging symptoms, not understanding the actual flow of my program.
Here's how I debug the same issue now:
// Modern debugging approach with proper tools and techniques
function calculateOrderTotal(items) {
// Input validation with meaningful assertions
if (!Array.isArray(items)) {
throw new Error(`Expected items to be an array, got ${typeof items}`);
}
if (items.length === 0) {
return 0;
}
let total = 0;
for (let item of items) {
// Validate each item structure
if (!item || typeof item !== 'object') {
throw new Error(`Invalid item: ${JSON.stringify(item)}`);
}
if (typeof item.price !== 'number' || item.price < 0) {
throw new Error(`Invalid price for item: ${item.price}`);
}
if (typeof item.quantity !== 'number' || item.quantity < 0) {
throw new Error(`Invalid quantity for item: ${item.quantity}`);
}
// The actual bug was here - some items had string prices!
let itemTotal = parseFloat(item.price) * parseInt(item.quantity);
total += itemTotal;
}
let tax = total * 0.1;
return Math.round((total + tax) * 100) / 100; // Proper decimal handling
}
The real issue? Some items from the API had string prices instead of numbers. Instead of debugging with console.log, I learned to use proper validation and debugging tools.
Browser DevTools Mastery
Chrome DevTools: Your JavaScript Detective Kit
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop Debug Demo</title>
</head>
<body>
<div id="app">
<h1>Maya's Coffee Shop</h1>
<div id="cart"></div>
<button id="add-item">Add Random Item</button>
<button id="checkout">Checkout</button>
</div>
<script>
class CoffeeShop {
constructor() {
this.cart = [];
this.menuItems = [
{ id: 1, name: 'Flat White', price: 4.50 },
{ id: 2, name: 'Taro Bubble Tea', price: 5.50 },
{ id: 3, name: 'Cortado', price: 4.00 }
];
this.setupEventListeners();
this.render();
}
setupEventListeners() {
document.getElementById('add-item').addEventListener('click', () => {
this.addRandomItem();
});
document.getElementById('checkout').addEventListener('click', () => {
this.checkout();
});
}
addRandomItem() {
// DEBUGGING TIP: Set breakpoint here to inspect state
debugger; // This will pause execution in DevTools
const randomItem = this.menuItems[
Math.floor(Math.random() * this.menuItems.length)
];
// DEBUGGING TIP: Use console.table for better object visualization
console.table(this.cart);
const existingItem = this.cart.find(item => item.id === randomItem.id);
if (existingItem) {
existingItem.quantity += 1;
} else {
this.cart.push({
...randomItem,
quantity: 1
});
}
// DEBUGGING TIP: Log important state changes
console.group('Item Added');
console.log('Added item:', randomItem);
console.log('Current cart:', this.cart);
console.log('Cart total:', this.calculateTotal());
console.groupEnd();
this.render();
}
calculateTotal() {
return this.cart.reduce((total, item) => {
return total + (item.price * item.quantity);
}, 0);
}
checkout() {
// DEBUGGING TIP: Performance measuring
console.time('checkout-process');
try {
const total = this.calculateTotal();
// DEBUGGING TIP: Conditional breakpoints
if (total > 20) {
debugger; // Only breaks if total > 20
}
alert(`Total: $${total.toFixed(2)}`);
this.cart = [];
this.render();
} catch (error) {
// DEBUGGING TIP: Error object inspection
console.error('Checkout failed:', error);
console.trace(); // Shows call stack
} finally {
console.timeEnd('checkout-process');
}
}
render() {
const cartElement = document.getElementById('cart');
if (this.cart.length === 0) {
cartElement.innerHTML = '<p>Cart is empty</p>';
return;
}
const cartHTML = this.cart.map(item => `
<div class="cart-item">
<span>${item.name}</span>
<span>$${item.price} x ${item.quantity}</span>
<span>$${(item.price * item.quantity).toFixed(2)}</span>
</div>
`).join('');
cartElement.innerHTML = `
<h3>Cart Items:</h3>
${cartHTML}
<div class="total">
<strong>Total: $${this.calculateTotal().toFixed(2)}</strong>
</div>
`;
}
}
// DEBUGGING TIP: Make objects globally accessible for console debugging
let coffeeShop;
document.addEventListener('DOMContentLoaded', () => {
coffeeShop = new CoffeeShop();
// DEBUGGING TIP: Global debugging utilities
window.debugUtils = {
inspectCart: () => console.table(coffeeShop.cart),
clearCart: () => {
coffeeShop.cart = [];
coffeeShop.render();
},
addItem: (id) => {
const item = coffeeShop.menuItems.find(i => i.id === id);
if (item) {
coffeeShop.cart.push({...item, quantity: 1});
coffeeShop.render();
}
}
};
});
</script>
</body>
</html>
Advanced DevTools Techniques
// Network debugging for API calls
class OrderService {
async createOrder(orderData) {
// DEBUGGING TIP: Label your network requests
const startTime = performance.now();
try {
const response = await fetch('/api/orders', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Debug-Request': 'create-order', // Easy to find in Network tab
},
body: JSON.stringify(orderData)
});
// DEBUGGING TIP: Log response details
console.group('API Response Debug');
console.log('Status:', response.status);
console.log('Headers:', Object.fromEntries(response.headers.entries()));
console.log('Response time:', `${performance.now() - startTime}ms`);
const data = await response.json();
console.log('Response data:', data);
console.groupEnd();
if (!response.ok) {
throw new Error(`API Error: ${response.status} - ${data.message}`);
}
return data;
} catch (error) {
// DEBUGGING TIP: Enhanced error logging
console.error('Order creation failed:', {
error: error.message,
orderData,
timestamp: new Date().toISOString(),
userAgent: navigator.userAgent,
url: window.location.href
});
throw error;
}
}
}
// Memory leak debugging
class ComponentManager {
constructor() {
this.components = new Set();
this.eventListeners = [];
// DEBUGGING TIP: Track memory usage
this.memoryCheckInterval = setInterval(() => {
if (performance.memory) {
console.log('Memory usage:', {
used: Math.round(performance.memory.usedJSHeapSize / 1048576),
total: Math.round(performance.memory.totalJSHeapSize / 1048576),
limit: Math.round(performance.memory.jsHeapSizeLimit / 1048576),
components: this.components.size,
listeners: this.eventListeners.length
});
}
}, 5000);
}
addComponent(component) {
this.components.add(component);
// DEBUGGING TIP: Track component lifecycle
console.log(`Component added. Total: ${this.components.size}`);
}
removeComponent(component) {
this.components.delete(component);
// Clean up associated event listeners
this.eventListeners = this.eventListeners.filter(listener =>
listener.component !== component
);
console.log(`Component removed. Total: ${this.components.size}`);
}
destroy() {
// DEBUGGING TIP: Proper cleanup tracking
console.log('Destroying ComponentManager');
clearInterval(this.memoryCheckInterval);
this.components.clear();
this.eventListeners.forEach(listener => {
listener.element.removeEventListener(listener.event, listener.handler);
});
this.eventListeners = [];
}
}
VS Code Debugging Setup
Python Debugging Configuration
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"justMyCode": false,
"env": {
"PYTHONPATH": "${workspaceFolder}",
"DEBUG": "true"
}
},
{
"name": "Python: Flask App",
"type": "python",
"request": "launch",
"program": "${workspaceFolder}/app.py",
"env": {
"FLASK_ENV": "development",
"FLASK_DEBUG": "1"
},
"args": [],
"jinja": true,
"justMyCode": false
},
{
"name": "Python: Remote Debugging",
"type": "python",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
},
"pathMappings": [
{
"localRoot": "${workspaceFolder}",
"remoteRoot": "/app"
}
]
}
]
}
Advanced Python Debugging
# debug_utils.py - Custom debugging utilities
import functools
import time
import traceback
from typing import Any, Callable
import sys
import logging
# Set up debugging logger
debug_logger = logging.getLogger('debug')
debug_logger.setLevel(logging.DEBUG)
handler = logging.StreamHandler(sys.stdout)
formatter = logging.Formatter(
'%(asctime)s - %(name)s - %(levelname)s - %(message)s'
)
handler.setFormatter(formatter)
debug_logger.addHandler(handler)
def debug_function(func: Callable) -> Callable:
"""Decorator to debug function calls with detailed information"""
@functools.wraps(func)
def wrapper(*args, **kwargs):
func_name = f"{func.__module__}.{func.__name__}"
# Log function entry
debug_logger.debug(f"ENTER {func_name}")
debug_logger.debug(f"Args: {args}")
debug_logger.debug(f"Kwargs: {kwargs}")
start_time = time.time()
try:
result = func(*args, **kwargs)
execution_time = time.time() - start_time
debug_logger.debug(f"EXIT {func_name} (took {execution_time:.4f}s)")
debug_logger.debug(f"Result: {result}")
return result
except Exception as e:
execution_time = time.time() - start_time
debug_logger.error(f"ERROR in {func_name} (after {execution_time:.4f}s)")
debug_logger.error(f"Exception: {type(e).__name__}: {str(e)}")
debug_logger.error(f"Traceback:\n{traceback.format_exc()}")
raise
return wrapper
def debug_class(cls):
"""Class decorator to debug all methods"""
for attr_name in dir(cls):
attr = getattr(cls, attr_name)
if callable(attr) and not attr_name.startswith('_'):
setattr(cls, attr_name, debug_function(attr))
return cls
class DebugContext:
"""Context manager for debugging specific code blocks"""
def __init__(self, name: str, log_vars: dict = None):
self.name = name
self.log_vars = log_vars or {}
self.start_time = None
def __enter__(self):
self.start_time = time.time()
debug_logger.debug(f"DEBUG BLOCK START: {self.name}")
if self.log_vars:
for var_name, var_value in self.log_vars.items():
debug_logger.debug(f" {var_name}: {var_value}")
return self
def __exit__(self, exc_type, exc_val, exc_tb):
execution_time = time.time() - self.start_time
if exc_type:
debug_logger.error(f"DEBUG BLOCK ERROR: {self.name} (after {execution_time:.4f}s)")
debug_logger.error(f"Exception: {exc_type.__name__}: {exc_val}")
else:
debug_logger.debug(f"DEBUG BLOCK END: {self.name} (took {execution_time:.4f}s)")
# Usage examples
@debug_class
class CoffeeShop:
def __init__(self):
self.inventory = {}
self.orders = []
def add_inventory(self, item_name: str, quantity: int):
if item_name in self.inventory:
self.inventory[item_name] += quantity
else:
self.inventory[item_name] = quantity
@debug_function
def create_order(self, items: list) -> dict:
with DebugContext("order_validation", {"items": items}):
# Validate items
for item in items:
if item['name'] not in self.inventory:
raise ValueError(f"Item not available: {item['name']}")
if self.inventory[item['name']] < item['quantity']:
raise ValueError(f"Insufficient inventory for {item['name']}")
with DebugContext("order_creation"):
order = {
'id': len(self.orders) + 1,
'items': items,
'total': sum(item['price'] * item['quantity'] for item in items),
'timestamp': time.time()
}
# Update inventory
for item in items:
self.inventory[item['name']] -= item['quantity']
self.orders.append(order)
return order
# Conditional debugging
def debug_if(condition: bool):
"""Only debug if condition is True"""
def decorator(func):
if condition:
return debug_function(func)
return func
return decorator
# Usage
DEBUG_ORDERS = True
@debug_if(DEBUG_ORDERS)
def process_large_order(items):
# This will only be debugged if DEBUG_ORDERS is True
return sum(item['price'] * item['quantity'] for item in items)
Remote Debugging with pdb
# For production debugging (use carefully!)
import pdb
import sys
def remote_debugger_hook():
"""Allows remote debugging in production"""
import signal
def debug_signal_handler(sig, frame):
# Start pdb when receiving SIGUSR1
pdb.set_trace()
signal.signal(signal.SIGUSR1, debug_signal_handler)
# In your application
if __name__ == "__main__":
if sys.argv and '--debug' in sys.argv:
remote_debugger_hook()
# Your application code
app.run()
# To trigger debugging in production:
# kill -USR1 <process_id>
Node.js/JavaScript Debugging
Advanced Node.js Debugging
// debug_utils.js
const util = require('util');
const fs = require('fs');
const path = require('path');
class AdvancedDebugger {
constructor(options = {}) {
this.enabled = process.env.DEBUG === 'true' || options.enabled;
this.logFile = options.logFile || null;
this.maxLogSize = options.maxLogSize || 10 * 1024 * 1024; // 10MB
}
log(level, message, data = {}) {
if (!this.enabled) return;
const timestamp = new Date().toISOString();
const stack = new Error().stack.split('\n').slice(2, 4).map(line => line.trim());
const logEntry = {
timestamp,
level,
message,
data,
caller: stack[0],
pid: process.pid,
memoryUsage: process.memoryUsage()
};
console.log(util.inspect(logEntry, {
colors: true,
depth: null,
compact: false
}));
if (this.logFile) {
this.writeToFile(logEntry);
}
}
writeToFile(logEntry) {
const logLine = JSON.stringify(logEntry) + '\n';
try {
const stats = fs.statSync(this.logFile);
if (stats.size > this.maxLogSize) {
// Rotate log file
const rotatedFile = `${this.logFile}.${Date.now()}`;
fs.renameSync(this.logFile, rotatedFile);
}
} catch (error) {
// File doesn't exist, which is fine
}
fs.appendFileSync(this.logFile, logLine);
}
debug(message, data) { this.log('DEBUG', message, data); }
info(message, data) { this.log('INFO', message, data); }
warn(message, data) { this.log('WARN', message, data); }
error(message, data) { this.log('ERROR', message, data); }
trace(func) {
return (...args) => {
const funcName = func.name || 'anonymous';
this.debug(`ENTER ${funcName}`, { args });
const start = process.hrtime();
try {
const result = func.apply(this, args);
if (result && typeof result.then === 'function') {
// Handle promises
return result
.then(res => {
const [seconds, nanoseconds] = process.hrtime(start);
const duration = seconds * 1000 + nanoseconds / 1000000;
this.debug(`EXIT ${funcName}`, { result: res, duration: `${duration}ms` });
return res;
})
.catch(err => {
const [seconds, nanoseconds] = process.hrtime(start);
const duration = seconds * 1000 + nanoseconds / 1000000;
this.error(`ERROR in ${funcName}`, { error: err.message, duration: `${duration}ms` });
throw err;
});
} else {
const [seconds, nanoseconds] = process.hrtime(start);
const duration = seconds * 1000 + nanoseconds / 1000000;
this.debug(`EXIT ${funcName}`, { result, duration: `${duration}ms` });
return result;
}
} catch (error) {
const [seconds, nanoseconds] = process.hrtime(start);
const duration = seconds * 1000 + nanoseconds / 1000000;
this.error(`ERROR in ${funcName}`, { error: error.message, duration: `${duration}ms` });
throw error;
}
};
}
}
// Global debugger instance
const debugger = new AdvancedDebugger({
enabled: process.env.NODE_ENV !== 'production',
logFile: process.env.DEBUG_LOG_FILE
});
// Express.js debugging middleware
function debuggingMiddleware(req, res, next) {
const requestId = Math.random().toString(36).substr(2, 9);
req.debugId = requestId;
debugger.info('HTTP Request', {
requestId,
method: req.method,
url: req.url,
headers: req.headers,
body: req.body,
ip: req.ip
});
const originalSend = res.send;
res.send = function(body) {
debugger.info('HTTP Response', {
requestId,
statusCode: res.statusCode,
headers: res.getHeaders(),
body: typeof body === 'string' ? body.substring(0, 1000) : body
});
return originalSend.call(this, body);
};
next();
}
// Performance monitoring
class PerformanceMonitor {
constructor() {
this.metrics = {
requests: 0,
responseTime: [],
errors: 0,
memoryUsage: []
};
// Collect metrics every 10 seconds
setInterval(() => {
this.collectSystemMetrics();
}, 10000);
}
collectSystemMetrics() {
const memUsage = process.memoryUsage();
this.metrics.memoryUsage.push({
timestamp: Date.now(),
...memUsage
});
// Keep only last 100 measurements
if (this.metrics.memoryUsage.length > 100) {
this.metrics.memoryUsage = this.metrics.memoryUsage.slice(-100);
}
debugger.debug('System Metrics', {
memory: memUsage,
uptime: process.uptime(),
loadAverage: require('os').loadavg(),
cpuUsage: process.cpuUsage()
});
}
trackRequest(req, res) {
const start = process.hrtime();
res.on('finish', () => {
const [seconds, nanoseconds] = process.hrtime(start);
const duration = seconds * 1000 + nanoseconds / 1000000;
this.metrics.requests++;
this.metrics.responseTime.push(duration);
if (res.statusCode >= 400) {
this.metrics.errors++;
}
// Keep only last 1000 response times
if (this.metrics.responseTime.length > 1000) {
this.metrics.responseTime = this.metrics.responseTime.slice(-1000);
}
});
}
getStats() {
const responseTimes = this.metrics.responseTime;
const avgResponseTime = responseTimes.length > 0
? responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length
: 0;
return {
requests: this.metrics.requests,
errors: this.metrics.errors,
errorRate: this.metrics.requests > 0 ? (this.metrics.errors / this.metrics.requests) * 100 : 0,
avgResponseTime: avgResponseTime.toFixed(2),
uptime: process.uptime(),
memoryUsage: process.memoryUsage()
};
}
}
module.exports = {
AdvancedDebugger,
debuggingMiddleware,
PerformanceMonitor,
debugger
};
Production Debugging Strategies
Structured Logging for Production
# production_logging.py
import logging
import json
import sys
from datetime import datetime
import traceback
import os
class ProductionLogger:
def __init__(self, service_name: str):
self.service_name = service_name
self.logger = self._setup_logger()
def _setup_logger(self):
logger = logging.getLogger(self.service_name)
logger.setLevel(logging.INFO)
# JSON formatter for structured logging
class JSONFormatter(logging.Formatter):
def format(self, record):
log_data = {
'timestamp': datetime.utcnow().isoformat(),
'service': self.service_name,
'level': record.levelname,
'message': record.getMessage(),
'module': record.module,
'function': record.funcName,
'line': record.lineno
}
# Add exception info if present
if record.exc_info:
log_data['exception'] = {
'type': record.exc_info[0].__name__,
'message': str(record.exc_info[1]),
'traceback': traceback.format_exception(*record.exc_info)
}
# Add extra fields from the log record
for key, value in record.__dict__.items():
if key not in ['name', 'msg', 'args', 'levelname', 'levelno',
'pathname', 'filename', 'module', 'lineno',
'funcName', 'created', 'msecs', 'relativeCreated',
'thread', 'threadName', 'processName', 'process',
'getMessage', 'exc_info', 'exc_text', 'stack_info']:
log_data[key] = value
return json.dumps(log_data)
handler = logging.StreamHandler(sys.stdout)
handler.setFormatter(JSONFormatter())
logger.addHandler(handler)
return logger
def info(self, message, **kwargs):
self.logger.info(message, extra=kwargs)
def warning(self, message, **kwargs):
self.logger.warning(message, extra=kwargs)
def error(self, message, **kwargs):
self.logger.error(message, extra=kwargs, exc_info=True)
def debug(self, message, **kwargs):
self.logger.debug(message, extra=kwargs)
# Usage in Flask application
from flask import Flask, request, g
import uuid
app = Flask(__name__)
logger = ProductionLogger('coffee-shop-api')
@app.before_request
def before_request():
g.request_id = str(uuid.uuid4())
g.start_time = time.time()
logger.info("Request started",
request_id=g.request_id,
method=request.method,
path=request.path,
remote_addr=request.remote_addr,
user_agent=request.headers.get('User-Agent'))
@app.after_request
def after_request(response):
duration = time.time() - g.start_time
logger.info("Request completed",
request_id=g.request_id,
status_code=response.status_code,
duration_ms=round(duration * 1000, 2))
return response
@app.errorhandler(Exception)
def handle_exception(e):
logger.error("Unhandled exception",
request_id=g.request_id,
exception_type=type(e).__name__,
exception_message=str(e))
return {'error': 'Internal server error'}, 500
Debugging Complex Async Code
// async_debugging.js
class AsyncDebugger {
constructor() {
this.activeOperations = new Map();
this.completedOperations = [];
}
wrapAsync(name, asyncFunc) {
return async (...args) => {
const operationId = Math.random().toString(36).substr(2, 9);
const startTime = Date.now();
this.activeOperations.set(operationId, {
name,
startTime,
args
});
console.log(`🚀 ASYNC START [${operationId}] ${name}`, args);
try {
const result = await asyncFunc(...args);
const duration = Date.now() - startTime;
this.activeOperations.delete(operationId);
this.completedOperations.push({
operationId,
name,
duration,
success: true,
timestamp: new Date().toISOString()
});
console.log(`✅ ASYNC SUCCESS [${operationId}] ${name} (${duration}ms)`, result);
return result;
} catch (error) {
const duration = Date.now() - startTime;
this.activeOperations.delete(operationId);
this.completedOperations.push({
operationId,
name,
duration,
success: false,
error: error.message,
timestamp: new Date().toISOString()
});
console.error(`❌ ASYNC ERROR [${operationId}] ${name} (${duration}ms)`, error);
throw error;
}
};
}
getActiveOperations() {
return Array.from(this.activeOperations.entries()).map(([id, op]) => ({
id,
...op,
runningTime: Date.now() - op.startTime
}));
}
getStats() {
const completed = this.completedOperations;
const active = this.getActiveOperations();
return {
active: active.length,
completed: completed.length,
successRate: completed.length > 0
? (completed.filter(op => op.success).length / completed.length) * 100
: 0,
averageDuration: completed.length > 0
? completed.reduce((sum, op) => sum + op.duration, 0) / completed.length
: 0,
activeOperations: active,
recentCompleted: completed.slice(-10)
};
}
}
// Usage example
const asyncDebugger = new AsyncDebugger();
class OrderService {
constructor() {
// Wrap all async methods
this.getUser = asyncDebugger.wrapAsync('getUser', this._getUser.bind(this));
this.getProduct = asyncDebugger.wrapAsync('getProduct', this._getProduct.bind(this));
this.processPayment = asyncDebugger.wrapAsync('processPayment', this._processPayment.bind(this));
this.createOrder = asyncDebugger.wrapAsync('createOrder', this._createOrder.bind(this));
}
async _getUser(userId) {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}
async _getProduct(productId) {
const response = await fetch(`/api/products/${productId}`);
return response.json();
}
async _processPayment(amount, paymentMethod) {
const response = await fetch('/api/payments', {
method: 'POST',
body: JSON.stringify({ amount, paymentMethod })
});
return response.json();
}
async _createOrder(orderData) {
const response = await fetch('/api/orders', {
method: 'POST',
body: JSON.stringify(orderData)
});
return response.json();
}
async processCompleteOrder(orderRequest) {
const wrappedProcess = asyncDebugger.wrapAsync('processCompleteOrder', async () => {
// This will show nested async operations
const [user, product] = await Promise.all([
this.getUser(orderRequest.userId),
this.getProduct(orderRequest.productId)
]);
const payment = await this.processPayment(
product.price * orderRequest.quantity,
user.paymentMethod
);
const order = await this.createOrder({
userId: user.id,
productId: product.id,
quantity: orderRequest.quantity,
paymentId: payment.id
});
return order;
});
return wrappedProcess();
}
}
// Monitor async operations
setInterval(() => {
const stats = asyncDebugger.getStats();
if (stats.active > 0 || stats.completed > 0) {
console.log('📊 Async Operations Stats:', stats);
}
}, 5000);
Final Thoughts: Debugging as Problem-Solving Art
That 3 AM debugging session from two years ago taught me that debugging isn't about adding more print statements - it's about systematic problem-solving. The best debuggers I know don't just find bugs; they understand systems so deeply that they can predict where bugs will occur.
Good debugging is like being a detective in a crime scene. You preserve evidence (logs), follow clues systematically (debugging tools), test hypotheses (breakpoints and step-through), and document your findings (comments and documentation).
Whether you're chasing a memory leak in production or trying to understand why your unit tests are flaky, the fundamentals remain the same: understand your tools, be systematic in your approach, and always reproduce the issue before trying to fix it.
Start with the basics: learn your browser DevTools, set up proper logging, and master your IDE's debugging features. As you grow, add advanced techniques like performance profiling, remote debugging, and async flow tracing.
Remember: the goal isn't to avoid bugs (they're inevitable), but to find and fix them quickly when they occur. Master your debugging tools, and you'll spend less time frustrated and more time building amazing software.
Currently writing this from Bauhaus Coffee on Capitol Hill, where I'm debugging a race condition while enjoying my usual flat white. Share your debugging war stories @maya_codes_pnw - we've all been there! 🐛☕
Share this article
Add Comment
No comments yet. Be the first to comment!