Chrome DevTools Mastery: Advanced Debugging & Performance Profiling

// Platform-specific shortcuts
// Windows/Linux: Ctrl + Shift + I
// Mac: Cmd + Option + I

// Quick panel access
Ctrl/Cmd + Shift + P  // Command Menu
Ctrl/Cmd + P          // Quick Open File
Ctrl/Cmd + Shift + C  // Inspect Element
Ctrl/Cmd + \`         // Focus Console

// Enable experimental features
Settings > Experiments
✓ Enable Console Keyboard History
✓ Enable Layout Shift Tracker
✓ Enable Network Request Blocking

// Preferences
Settings > Preferences
✓ Enable CSS source maps
✓ Enable JavaScript source maps
✓ Auto-open DevTools for popups
✓ Enable CSS grid overlay
✓ Show UI in source maps

// console.table - Perfect for arrays/objects
const users = [
  { id: 1, name: 'Alice', role: 'admin', active: true },
  { id: 2, name: 'Bob', role: 'user', active: false },
  { id: 3, name: 'Charlie', role: 'user', active: true }
];

console.table(users);
// Specify columns to display
console.table(users, ['name', 'active']);

// console.group - Organize nested logs
console.group('User Authentication Flow');
console.log('Step 1: Validate credentials');
console.log('Step 2: Generate token');
console.group('Token Generation Details');
console.log('Algorithm: HS256');
console.log('Expires in: 24h');
console.groupEnd();
console.log('Step 3: Set session');
console.groupEnd();

// console.time/timeLog - Performance tracking
console.time('Data Fetching');
fetchData()
  .then(data => {
    console.timeLog('Data Fetching', 'After fetch');
    return processData(data);
  })
  .then(() => {
    console.timeEnd('Data Fetching');
  });

// console.count/countReset - Call counting
function handleClick(event) {
  console.count('Button Click');
  console.log('Event type:', event.type);
  // Reset after threshold
  if (console.count('Button Click') > 10) {
    console.countReset('Button Click');
  }
}

// console.assert - Conditional logging
function validateUser(user) {
  console.assert(user.email, 'User email is missing');
  console.assert(user.age >= 18, 'User must be 18+');
  console.assert(user.role === 'admin', 'Access denied');
}

// Live Expressions - Monitor values in real-time
// Click "eye" icon in Console panel
// Expression: document.activeElement.tagName
// Expression: performance.memory.usedJSHeapSize

// Console API with formatting
console.log(
  '%c User Data ',
  'background: #4CAF50; color: white; padding: 4px; border-radius: 4px;',
  user.name,
  user.email
);

// Nested styling
console.log(
  '%c Success %c User created successfully ',
  'background: #4CAF50; color: white; padding: 2px 6px; border-radius: 2px;',
  'background: #E8F5E9; color: #2E7D32; padding: 2px 6px; border-radius: 2px;'
);

// Object inspection with custom formatters
console.dir(document.body, { depth: null });
console.dirxml(document.documentElement);

// Stack trace logging
console.trace('Function execution path');

// Memory info (Chrome-specific)
console.log('Memory:', performance.memory);
// { usedJSHeapSize: 45000000, totalJSHeapSize: 50000000, jsHeapSizeLimit: 2172649472 }

// Conditional Breakpoints
// Right-click line number > Add conditional breakpoint
// Condition: user.id === currentUserId

// Logpoint - Non-breaking logs
// Right-click > Add logpoint
// Expression: 'User state:', { id: user.id, status: user.status }

// DOM Breakpoints
// Elements panel > Right-click element > Break on
// ✓ Subtree modifications
// ✓ Attribute modifications
// ✓ Node removal

// XHR/Fetch Breakpoints
// Sources > XHR/fetch breakpoints > Add pattern
// Pattern: /api/users

// Blackbox framework code (ignore while debugging)
Settings > Blackboxing > Add pattern
Patterns:
- react-dom.development.js
- chunk-vendors.js
- jquery.min.js
- lodash.min.js

// Pretty-print minified code
// Sources panel > Click {} button
// Makes minified code readable

// Source Maps Configuration
// webpack.config.js
devtool: 'eval-source-map', // Development
devtool: 'source-map',       // Production

// Enable inline source maps
// In your HTML
<script>
  //# sourceMappingURL=data:application/json;base64,...
</script>

// Map local files to network files
Sources > Filesystem > Add folder
Select your project directory
Map network resources to workspace

// Local Overrides (2025 feature)
Sources > Overrides > Enable local overrides
Select override folder

// Edit and persist changes locally
// Changes persist across page reloads
// Perfect for quick prototyping

// Example: Override third-party library
// 1. Find library in Sources
// 2. Right-click > Save for overrides
// 3. Edit the file
// 4. Changes apply immediately

// Record performance profile
// 1. Open Performance panel
// 2. Click Record
// 3. Interact with your app
// 4. Stop recording
// 5. Analyze flame chart

// Programmatic performance marking
performance.mark('app-start');

async function loadApp() {
  performance.mark('data-fetch-start');
  const data = await fetchData();
  performance.mark('data-fetch-end');

  performance.mark('render-start');
  renderApp(data);
  performance.mark('render-end');

  performance.measure('data-fetch', 'data-fetch-start', 'data-fetch-end');
  performance.measure('render', 'render-start', 'render-end');
  performance.measure('total-load', 'app-start', 'render-end');
}

// Analyze measures
const measures = performance.getEntriesByType('measure');
measures.forEach(measure => {
  console.log(`${measure.name}: ${measure.duration.toFixed(2)}ms`);
});

// Heap Snapshot
// Memory panel > Take snapshot
// Analyze memory distribution
// Find memory leaks

// Comparison snapshots
// 1. Take snapshot 1
// 2. Perform actions
// 3. Take snapshot 2
// 4. Compare snapshots
// 5. Identify retained objects

// Allocation Sampling
// Memory panel > Allocation sampling
// Track memory allocation over time
// Identify allocation hotspots

// Force garbage collection
// DevTools Memory panel > Trash icon
// Or programmatically:
if (window.gc) {
  window.gc(); // Chrome with --js-flags flag
}

// Memory leak detection pattern
class Component {
  constructor() {
    this.handlers = [];
  }

  addHandler(handler) {
    this.handlers.push(handler);
  }

  // Missing cleanup method = memory leak
  // Should have:
  destroy() {
    this.handlers = [];
    this.element?.remove();
  }
}

// Core Web Vitals monitoring
function measureWebVitals() {
  // Largest Contentful Paint (LCP)
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    console.log('LCP:', lastEntry.startTime);

    // Good: < 2.5s
    // Needs improvement: 2.5s - 4s
    // Poor: > 4s
  }).observe({ entryTypes: ['largest-contentful-paint'] });

  // First Input Delay (FID)
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach(entry => {
      console.log('FID:', entry.processingStart - entry.startTime);

      // Good: < 100ms
      // Needs improvement: 100ms - 300ms
      // Poor: > 300ms
    });
  }).observe({ entryTypes: ['first-input'] });

  // Cumulative Layout Shift (CLS)
  let clsScore = 0;
  new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
      if (!entry.hadRecentInput) {
        clsScore += entry.value;
        console.log('CLS:', clsScore);

        // Good: < 0.1
        // Needs improvement: 0.1 - 0.25
        // Poor: > 0.25
      }
    });
  }).observe({ entryTypes: ['layout-shift'] });

  // Time to First Byte (TTFB)
  const navigation = performance.getEntriesByType('navigation')[0];
  const ttfb = navigation.responseStart - navigation.requestStart;
  console.log('TTFB:', ttfb);

  // First Contentful Paint (FCP)
  const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0];
  console.log('FCP:', fcpEntry?.startTime);
}

// Custom throttling profiles
Network > Throttling > Custom > Add
Profile Name: 4G Slow
Download: 1.6 Mbps
Upload: 750 Kbps
Latency: 150 ms

// Offline testing
Network > No throttling > Offline
// Test service workers, PWA features

// Request blocking patterns
Network > Request blocking > Add pattern
Patterns:
- */analytics/*
- */tracking/*
- *.jpg
- */api/ads/*

// Block specific domains
Network > Request blocking > Add
Pattern: *.doubleclick.net

// Export HAR (HTTP Archive)
// Network panel > Right-click > Save all as HAR with content

// Programmatically analyze HAR
async function analyzeHAR(harFile) {
  const har = await fetch(harFile).then(r => r.json());

  const entries = har.log.entries;
  const totalSize = entries.reduce((sum, entry) => {
    return sum + entry.response.size;
  }, 0);

  console.log('Total transfer:', (totalSize / 1024 / 1024).toFixed(2), 'MB');

  const slowRequests = entries.filter(entry => {
    return entry.time > 1000; // > 1 second
  });

  console.log('Slow requests:', slowRequests.length);

  // Find duplicate requests
  const urls = entries.map(e => e.request.url);
  const duplicates = urls.filter((url, index) => {
    return urls.indexOf(url) !== index;
  });

  console.log('Duplicate requests:', [...new Set(duplicates)]);
}

// Grid overlay
// Elements panel > Select grid container
// Styles > Grid > Show grid overlay
// Customize grid colors and labels

// Flexbox overlay
// Elements panel > Select flex container
// Styles > Flex > Show flex overlay
// Visualize flex items and gaps

// Element state inspection
// Elements panel > .hov :hover
// .vis :visited
// .act :active
// .foc :focus

// CSS cascade visualization
// Computed panel > Show all
// See which rules apply and why

// Enable Layout Shift Tracker
Settings > Experiments > Layout Shift Tracker

// Visualize layout shifts in real-time
// Red highlights indicate shifts
// Perfect for debugging CLS issues

// Programmatic detection
new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (!entry.hadRecentInput) {
      console.log('Layout shift:', {
        value: entry.value,
        sources: entry.sources,
        startTime: entry.startTime
      });

      // Identify shifting elements
      entry.sources.forEach(source => {
        console.log('Shifting element:', {
          node: source.node,
          previousRect: source.previousRect,
          currentRect: source.currentRect
        });
      });
    }
  });
}).observe({ entryTypes: ['layout-shift'] });

// Run Lighthouse programmatically
// In DevTools Console:
const lighthouse = await import('lighthouse');
const chromeLauncher = await import('chrome-launcher');

const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });

const options = {
  logLevel: 'info',
  output: 'html',
  onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
  port: chrome.port
};

const runnerResult = await lighthouse('https://example.com', options);
console.log('Report is done for', runnerResult.lhr.finalUrl);
console.log('Performance score:', runnerResult.lhr.categories.performance.score * 100);

await chrome.kill();

// Custom audits
// Extend Lighthouse with custom audits
// lighthouse-custom-audits.js
class CustomAudit {
  static get meta() {
    return {
      id: 'custom-audit',
      title: 'Custom Audit',
      description: 'My custom audit check',
      failureTitle: 'Failed custom audit',
    };
  }

  static audit(auditContext) {
    // Your audit logic here
    return {
      score: 1,
      displayValue: 'Passed'
    };
  }
}

// Device Toolbar
// Toggle device toolbar (Cmd/Ctrl + Shift + M)

// Custom device presets
Settings > Devices > Add custom device
Name: iPhone 15 Pro Max
Width: 430
Height: 932
Device pixel ratio: 3
User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)...

// Responsive design testing
// Test different viewport sizes
// Check touch interactions
// Verify mobile-specific features

// Sensors simulation
Sensors > Location
Sensors > Orientation
Sensors > Touch

// Test geolocation
navigator.geolocation.getCurrentPosition(
  position => console.log('Position:', position),
  error => console.error('Error:', error)
);

// Animation Inspector
// More tools > Animation Inspector
// Visualize all animations on page
// Control playback speed

// FPS Meter
// More tools > Rendering > Frame Rendering Stats
// Monitor real-time FPS

// Paint Profiling
// More tools > Rendering > Paint flashing
// Green flashes indicate repaints

// Layout Thrashing Detection
// More tools > Rendering > Layout Shift regions

// Composite Layers
// More tools > Rendering > Layer borders
// Visualize compositor layers

// Optimize animations
@layer optimizations {
  * {
    will-change: transform;  // Promote to layer
  }

  .animating {
    transform: translateZ(0);  // Force GPU acceleration
    backface-visibility: hidden;
  }
}

// Enable async stack traces
Settings > Preferences > Enable async stack traces

// Debug Promise chains
async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
}

// Debug async/await
async function processUser(userId) {
  try {
    const user = await fetchUserData(userId);
    const profile = await fetchUserProfile(user.id);
    return { user, profile };
  } catch (error) {
    // Full async stack trace visible
    console.error('Processing failed:', error);
  }
}

// TypeScript debugging
// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": false
  }
}

// Vite configuration
// vite.config.ts
export default {
  build: {
    sourcemap: true
  }
};

// Debugging minified code
// Source maps map minified code back to original
// Set breakpoints in original source files
// Step through TypeScript code directly

// Security Panel
// Security panel shows HTTPS status, mixed content
// Check certificate validity
// Verify secure origins

// Content Security Policy (CSP)
// Console shows CSP violations
// Use Report-To for monitoring

// Cross-Origin isolation
// Check COOP/COEP headers
// Security > Main origin > Cross-origin isolation policy

// Trusted Types API
// Prevent XSS attacks
// Security panel shows Trusted Types violations

// Use Chrome DevTools Protocol programmatically
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Enable performance metrics
  await page.coverage.startCSSCoverage();

  await page.goto('https://example.com');

  const metrics = await page.metrics();
  console.log('Metrics:', metrics);

  const coverage = await page.coverage.stopCSSCoverage();
  console.log('CSS Coverage:', coverage);

  await browser.close();
})();

// Custom CDP commands
const client = await page.target().createCDPSession();
await client.send('Performance.enable');
const metrics = await client.send('Performance.getMetrics');

// Create reusable code snippets
// Sources > Snippets > New snippet

// Example: Debug React components
function debugReactComponents() {
  const root = document.querySelector('#root');
  console.log('React Root:', root);
  console.log('React Version:', React.version);

  // Find all React components
  const components = document.querySelectorAll('[data-reactroot]');
  console.log('React Components:', components);
}

// Example: Clear all cookies
function clearCookies() {
  const cookies = document.cookie.split(';');
  cookies.forEach(cookie => {
    const name = cookie.split('=')[0].trim();
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
  });
  console.log('All cookies cleared');
}

// Run snippets with: Cmd/Ctrl + Enter

// Open Command Menu: Cmd/Ctrl + Shift + P

// Useful commands:
- Show Console                     (Ctrl/Cmd + \`)
- Show Elements                    (Ctrl/Cmd + Shift + C)
- Show Network                     (Ctrl/Cmd + Shift + I > Network)
- Show Sources                     (Ctrl/Cmd + Shift + I > Sources)
- Show Performance                 (Ctrl/Cmd + Shift + I > Performance)
- Show Memory                      (Ctrl/Cmd + Shift + I > Memory)
- Show Application                 (Ctrl/Cmd + Shift + I > Application)
- Show Security                    (Ctrl/Cmd + Shift + I > Security)
- Capture full size screenshot
- Capture node screenshot
- Start recording
- Disable JavaScript
- Enable request blocking

// 1. Use Performance Observer instead of Performance API
new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.duration);
  });
}).observe({ entryTypes: ['measure', 'navigation', 'resource'] });

// 2. Monitor Web Vitals
import { onCLS, onFID, onLCP } from 'web-vitals';

onCLS(console.log);
onFID(console.log);
onLCP(console.log);

// 3. Use Console2 for better logging
// Install Console2 extension for enhanced console

// 4. Leverage React DevTools Profiler
// Identify unnecessary re-renders
// Optimize component performance

// 5. Use Lighthouse CI
// Integrate performance testing in CI/CD
// Prevent performance regressions

// 6. Monitor Core Web Vitals
// Make them part of your performance budget

// DevTools not opening?
// Try: Right-click > Inspect
// Try: F12
// Try: Menu > More Tools > Developer Tools

// Source maps not working?
// Verify sourcemap files are served
// Check Content-Type header
// Ensure correct sourceMappingURL

// Breakpoints not hitting?
// Check if code is in blackbox
// Verify source maps are correct
// Try refreshing the page

// Performance profile not showing data?
// Ensure profiling started before interaction
// Check if page is HTTPS
// Verify browser permissions

// Memory leaks detection
// Take heap snapshots
// Compare snapshots
// Look for detached DOM elements
// Check for event listeners not removed