Chrome Extension Debugging Tools. Developer Guide

Chrome Extension Debugging Tools

A comprehensive detailed look into debugging tools and techniques for Chrome extension development.

Chrome Internal Pages {#chrome-internal-pages}

chrome://extensions {#chromeextensions} The central hub for managing extensions. Enable “Developer mode” to access debugging features. View errors and warnings directly on this page - a red badge on your extension indicates runtime errors that need attention.

chrome://inspect/#service-workers {#chromeinspectservice-workers} Inspect active service workers for your extensions. View running workers, their lifecycle state, and click “inspect” to open a dedicated DevTools window for the service worker context.

chrome://serviceworker-internals {#chromeserviceworker-internals} Provides detailed lifecycle information about service workers. Use this to debug worker registration issues, update cycles, and termination behavior.

Extension DevTools {#extension-devtools}

Sources Panel {#sources-panel} The Sources panel shows your extension’s files in the “Content scripts” folder for injected scripts. Add breakpoints by clicking line numbers - these persist across page reloads.

Application Panel {#application-panel} Access the Storage section to inspect chrome.storage.local, chrome.storage.sync, and chrome.storage.managed. View IndexedDB databases and Cache API data directly.

Console Tricks {#console-tricks}

// Copy any value to clipboard
copy(myVariable);

// Reference the currently selected element in Elements panel
$0;

// Inspect all instances of a constructor
queryObjects(ConstructorName);

// Monitor function calls
monitor(functionName);

Breakpoint Types {#breakpoint-types}

Line breakpoints: Pause execution at specific lines
Conditional breakpoints: Pause only when conditions are met
XHR/Fetch breakpoints: Break on network requests matching patterns
DOM breakpoints: Pause on subtree modifications, attribute changes, or node removal
Event listener breakpoints: Break on specific event types

Source Maps {#source-maps}

Enable source maps in your bundler configuration (Webpack, Rollup, Vite) to map minified code back to source files. This provides readable stack traces and allows debugging original source directly.

// webpack.config.js example
devtool: 'source-map',

Network Debugging {#network-debugging}

Extension network requests appear in the page DevTools Network tab. Filter by “Other” to isolate extension-originated requests. Note that requests from service workers show the extension ID as the initiator.

Performance Profiling {#performance-profiling}

Record performance profiles to analyze extension popup rendering. Open the popup, start recording, interact with UI, then stop to identify bottlenecks in your rendering pipeline.

Memory Leak Detection {#memory-leak-detection}

Take a heap snapshot before an operation
Perform the operation
Take another snapshot
Compare snapshots to identify retained objects

Look for detached DOM trees and growing object counts that don’t release after garbage collection.

Remote Debugging {#remote-debugging}

Use chrome://inspect to debug extensions on mobile devices or remote Chrome instances. Configure port forwarding for Android device testing.

Debug Logging {#debug-logging}

Include version information in logs using chrome.management.getSelf() to track which extension version generated specific log entries:

chrome.management.getSelf((info) => {
  console.log(`Extension v${info.version}:`, myData);
});

Related Guides {#related-guides}

Debugging Extensions - Basic debugging techniques
Advanced Debugging - Complex debugging scenarios
Service Worker Debugging - Service worker specific tips