Profiling Tools Reference

Tools and techniques for identifying performance bottlenecks across the stack.

Chrome DevTools

Performance Panel

// Mark performance measurements
performance.mark('start-expensive-operation');
// ... expensive operation ...
performance.mark('end-expensive-operation');
performance.measure(
  'expensive-operation',
  'start-expensive-operation',
  'end-expensive-operation'
);

Use for: FPS analysis, JavaScript profiling, paint events, network waterfall

Memory Panel

Heap Snapshot: Take snapshot, compare for memory leaks
Allocation Timeline: See memory allocation over time
Allocation Sampling: Low-overhead profiling

Use for: Memory leak detection, heap size analysis

Node.js Profiling

Built-in Inspector

# Start with inspector
node --inspect server.js

# Open chrome://inspect in Chrome
# Click "inspect" to open DevTools

clinic.js

# Install
npm install -g clinic

# Doctor: Overall health check
clinic doctor -- node server.js

# Flame: CPU profiling
clinic flame -- node server.js

# Bubbleprof: Async operations
clinic bubbleprof -- node server.js

React DevTools Profiler

import { Profiler } from 'react';

function onRenderCallback(
  id, phase, actualDuration, baseDuration, startTime, commitTime
) {
  console.log(`${id} took ${actualDuration}ms to render`);
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>

Metrics:

Actual Duration: Time to render committed update
Base Duration: Estimated time without memoization
Start Time: When React began rendering
Commit Time: When React committed the update

Database Profiling

PostgreSQL EXPLAIN ANALYZE

EXPLAIN ANALYZE
SELECT * FROM orders
WHERE customer_id = '123'
  AND status = 'pending';

-- Output shows:
-- - Execution time
-- - Rows scanned
-- - Index usage
-- - Cost estimates

pg_stat_statements

-- Enable extension
CREATE EXTENSION pg_stat_statements;

-- View top slow queries
SELECT 
  query,
  mean_exec_time,
  calls,
  total_exec_time
FROM pg_stat_statements
ORDER BY mean_exec_time DESC
LIMIT 10;

APM Tools

DataDog

const tracer = require('dd-trace').init();

tracer.trace('expensive-operation', () => {
  // Your code here
});

Sentry Performance

import * as Sentry from '@sentry/node';

const transaction = Sentry.startTransaction({
  op: 'task',
  name: 'Process Order'
});

// ... do work ...

transaction.finish();

Summary

Tool	Use Case	Best For
Chrome DevTools	Frontend profiling	JavaScript, rendering, network
clinic.js	Node.js profiling	CPU, async, I/O
React Profiler	Component profiling	React performance
EXPLAIN ANALYZE	Query profiling	Database optimization
APM Tools	Production monitoring	Distributed tracing

Previous: Performance Metrics | Next: Optimization Patterns | Index: Reference Index

3.1 KiB Raw Blame History