Developer Tools Guide

Complete guide to developer tools and utilities.

Built-in Tools

DevTools Component

Access: Press Ctrl+Shift+D or enable via feature flag

Features:

• Memory usage monitoring
• Network information
• Performance metrics
• Real-time statistics

Usage:

import DevTools from '@/components/DevTools';

// Automatically included in layout
// Or manually add:
<DevTools />

Performance Profiler

import { profiler } from '@/lib/dev-tools';

// Mark start
profiler.mark('operation-start');

// Do work
await performOperation();

// Measure
const duration = profiler.measure('operation', 'operation-start');
console.log(`Operation took ${duration}ms`);

Debug Logger

import { debug } from '@/lib/dev-tools';

// Log message
debug.log('category', 'Message', { data });

// Group logs
debug.group('category', () => {
  debug.log('category', 'Message 1');
  debug.log('category', 'Message 2');
});

// Time operations
debug.time('operation');
// Do work
debug.timeEnd('operation');

Browser DevTools

Chrome DevTools

Open: F12 or Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows)

Useful Features:

• Console: JavaScript debugging
• Network: Monitor requests
• Performance: Performance profiling
• Memory: Memory profiling
• Lighthouse: Performance auditing

React DevTools

Install: React Developer Tools

Features:

• Component tree inspection
• Props and state viewing
• Performance profiling
• Hook debugging

Next.js DevTools

Built-in Features:

• Fast Refresh
• Error overlay
• Build information
• Route information

VS Code Extensions

Recommended Extensions

1. ESLint: Code linting
2. Prettier: Code formatting
3. TypeScript: TypeScript support
4. Tailwind CSS IntelliSense: Tailwind autocomplete
5. GitLens: Git integration
6. Error Lens: Inline error display

Settings

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Command Line Tools

npm Scripts

# Development
npm run dev          # Start dev server
npm run build        # Build for production
npm start            # Start production server

# Testing
npm test             # Run tests
npm test:watch       # Watch mode
npm test:coverage    # Coverage report

# Code Quality
npm run lint         # Run linter
npm run lint:fix     # Fix linting issues
npm run type-check   # TypeScript check

# Analysis
npm run analyze      # Bundle analysis

Useful Commands

# Clear Next.js cache
rm -rf .next

# Clear node_modules
rm -rf node_modules package-lock.json
npm install

# Check for updates
npm outdated

# Security audit
npm audit
npm audit fix

Debugging

Console Debugging

// Basic logging
console.log('Debug info', data);

// Grouped logs
console.group('Category');
console.log('Item 1');
console.log('Item 2');
console.groupEnd();

// Table view
console.table(data);

// Time measurement
console.time('operation');
// Do work
console.timeEnd('operation');

React Debugging

// Component debugging
useEffect(() => {
  console.log('Component mounted', props);
}, []);

// State debugging
useEffect(() => {
  console.log('State changed', state);
}, [state]);

Network Debugging

// Monitor fetch requests
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log('Fetch:', args);
  const response = await originalFetch(...args);
  console.log('Response:', response);
  return response;
};

Performance Tools

Lighthouse

Access: Chrome DevTools > Lighthouse tab

Metrics:

• Performance
• Accessibility
• Best Practices
• SEO

Run:

# CLI
npx lighthouse http://localhost:3000

Web Vitals

import { usePerformance } from '@/hooks/usePerformance';

const { recordMetric } = usePerformance();

// Record custom metric
recordMetric('custom_metric', 150);

Bundle Analyzer

npm run analyze

Output: Bundle size visualization

Testing Tools

Jest

# Run tests
npm test

# Watch mode
npm test -- --watch

# Coverage
npm test -- --coverage

React Testing Library

import { render, screen, fireEvent } from '@testing-library/react';

test('component test', () => {
  render(<Component />);
  fireEvent.click(screen.getByRole('button'));
  expect(screen.getByText('Result')).toBeInTheDocument();
});

Git Tools

Git Hooks

# Pre-commit hook
# .husky/pre-commit
npm run lint
npm run type-check

Git Aliases

# Add to .gitconfig
[alias]
  co = checkout
  br = branch
  ci = commit
  st = status

Monitoring Tools

Error Tracking

import { errorLogger } from '@/lib/error-logger';

errorLogger.log(error, 'high', {
  context: 'component',
  userId: 'user-123',
});

Performance Monitoring

import { monitoring } from '@/lib/monitoring';

monitoring.recordMetric({
  name: 'api_response_time',
  value: 150,
  unit: 'ms',
});

Useful Resources

Documentation

• Next.js Docs
• React Docs
• TypeScript Docs

Tools

• Chrome DevTools
• React DevTools
• Lighthouse

Tips

1. Use Source Maps

Enable source maps for better debugging:

// next.config.ts
productionBrowserSourceMaps: true

2. Debug Production

Use production source maps for debugging production issues.

3. Monitor Performance

Regularly check performance metrics and Core Web Vitals.

4. Use TypeScript Strict Mode

Enable strict mode for better type safety.

5. Keep Tools Updated

Regularly update development tools and extensions.