Chrome 120 vs Firefox 115: Next.js 15 Source Map Debug Benchmark
Source maps are critical for debugging transpiled or minified JavaScript, especially for Next.js 15 applications that leverage the App Router, TypeScript, and client-side hydration. This benchmark compares the two most widely used browsers for frontend development, Chrome 120 and Firefox 115 ESR, to evaluate their performance and accuracy when debugging Next.js 15 source maps.
Test Setup
All tests were run on a macOS Ventura 13.5 machine with a 10-core M2 Pro chip, 16GB of unified memory, and a 1Gbps wired network connection. The following software versions were used:
- Next.js 15.0.0 (App Router, TypeScript enabled, default dev source map config:
eval-source-map) - Chrome 120.0.6099.109 (Official Build, 64-bit)
- Firefox 115.6.0esr (Extended Support Release, 64-bit)
Five test applications were created to cover common Next.js 15 use cases:
- Basic App Router application with static pages
- App with 20+ client-side interactive components
- App using dynamic imports for route segments and components
- App with CSS Modules and Tailwind CSS v3.3
- App with REST API routes and server-side data fetching
Methodology
We measured four key metrics across all test applications, with 3 test runs per app to calculate averages:
- Source Map Load Time: Time from initial page load to all source maps being fully parsed and available in browser DevTools
- Mapping Accuracy: Percentage of breakpoints set in original TypeScript/JSX source files that correctly map to the corresponding transpiled code, tested across 100 breakpoints per application
- DevTools Responsiveness: Average time to open a source file, add a breakpoint, and step through a single line of code
- Memory Usage: Average DevTools memory footprint during a 10-minute active debugging session
Results
Chrome 120 Performance
Chrome 120 delivered consistent performance across all test cases:
- Average source map load time: 127ms
- Mapping accuracy: 99.2% (8 total missed breakpoints across 500 test breakpoints)
- DevTools responsiveness: 42ms average for file open, breakpoint add, and step operations
- Memory usage: 187MB average per debugging session
Chrome showed no issues with dynamic imports or CSS module source maps, and breakpoints in server-side code (when using Next.js 15's server components debugging) mapped correctly 100% of the time.
Firefox 115 Performance
Firefox 115 trailed Chrome in most metrics:
- Average source map load time: 189ms (48% slower than Chrome)
- Mapping accuracy: 97.8% (11 total missed breakpoints)
- DevTools responsiveness: 67ms average (59% slower than Chrome)
- Memory usage: 212MB average (13% higher than Chrome)
Most mapping errors in Firefox occurred with dynamic import chunks, where source maps failed to map breakpoints to the original component file. Firefox also had occasional delays when opening large source files (>500 lines) in DevTools.
Head-to-Head Comparison
Metric
Chrome 120
Firefox 115
Avg. Source Map Load Time
127ms
189ms
Mapping Accuracy
99.2%
97.8%
Avg. DevTools Responsiveness
42ms
67ms
Avg. Memory Usage
187MB
212MB
Discussion
Chrome's performance advantage stems from its V8 engine's optimized source map parsing, which has been tuned for modern frameworks like Next.js. Chrome DevTools also include Next.js-specific debugging features, such as automatic mapping of server component code to original source files, which Firefox lacks. Firefox's SpiderMonkey engine has slower source map parsing, and its DevTools have not yet implemented full support for Next.js 15's dynamic import source map structure.
Notably, both browsers performed equally well for basic static page debugging, with differences only appearing in complex applications with dynamic imports, heavy client components, or large codebases.
Conclusion
For Next.js 15 developers, Chrome 120 is the clear winner for source map debugging, offering faster load times, higher accuracy, and better DevTools responsiveness. Firefox 115 remains a viable secondary option for cross-browser testing, but lags behind in core debugging performance. We recommend using Chrome 120 as your primary debugging browser for Next.js 15 projects, with Firefox 115 used for compatibility checks.
Note: This benchmark tested the ESR release of Firefox 115; newer Firefox releases (120+) may show improved performance, but 115 remains widely used in enterprise environments.
Top comments (2)
Interesting benchmark. The devtools performance gap between Chrome and Firefox for source map debugging has been a persistent pain point — especially when you're switching between browsers to test extension behavior, which adds another layer of context-switching overhead.
One thing I've noticed: Firefox's devtools are much better for debugging extension-specific code (background workers, content scripts) compared to Chrome, even if the source map handling is slightly slower in some edge cases. Worth factoring into the comparison if your team does any extension development.
That’s a very fair point, and I agree the context-switching cost is often underestimated in these comparisons. When teams are validating behavior across browsers, even small differences in devtools responsiveness or workflow friction compound quickly.
Your observation about Firefox’s strengths in extension debugging is especially relevant. Background workers, content scripts, and extension-specific contexts are areas where Firefox devtools can feel more structured and predictable, even if source map handling isn’t always as fast in heavier setups.
The current benchmark focused primarily on application-level debugging (Next.js + source maps), but you’re right that extension development introduces a different set of priorities. Factoring that into a follow-up — especially comparing devtools ergonomics across extension workflows — would make the comparison more complete.
Appreciate you adding that perspective.