Performance Trace Explorer
Visualize Chrome DevTools trace files as a Gantt timeline. Spot Long Tasks, main thread bottlenecks, and scripting costs at a glance — 100% local.
Understanding Web Performance Traces
Chrome DevTools Performance traces are JSON files that record every task the browser's main thread and worker threads executed during a recording session. Each event has a timestamp (ts), a duration (dur), a category (cat), and a phase (ph). While Chrome's built-in Performance panel is powerful, it can be overwhelming for developers unfamiliar with flame charts or trace analysis.
The DToolkits Performance Trace Explorer simplifies this by rendering a Gantt-style timeline grouped by thread, immediately surfacing Long Tasks (≥50ms) and showing the top 10 slowest events in a bar chart — giving you actionable bottleneck data in seconds.
What Causes Long Tasks?
- Large JavaScript bundles — parsing and compiling oversized scripts blocks the main thread
- Synchronous XHR — legacy synchronous network requests freeze the UI completely
- Expensive reflows — reading layout properties (e.g.
offsetHeight) inside loops forces multiple layout passes - Unoptimized event handlers — scroll, resize, or input handlers without debouncing
- Main-thread garbage collection — large object allocations trigger expensive GC pauses
Performance Tracing FAQs
Open Chrome DevTools (F12), go to the Performance tab, click the Record button (or press Ctrl+Shift+E), interact with your page, then click Stop. After profiling, click the Download ⬇ icon in the Performance panel toolbar to save the trace as a .json file.
A Long Task is any main-thread task that takes more than 50 milliseconds to complete. Long Tasks block the browser's event loop, preventing it from responding to user input. They directly harm Interaction to Next Paint (INP) and First Input Delay (FID) — two Core Web Vitals scores that affect Google Search ranking.
The Gantt timeline displays every parsed trace event grouped by thread ID (tid). Each colored bar represents a single event, and its width is proportional to how long it took. Hovering over a bar shows the event name, category, and exact duration. Events highlighted with a red ring are Long Tasks (≥50ms).
No. The .json file is parsed entirely in your browser using the FileReader API and JavaScript. Your potentially sensitive performance data — including URL structures and timing signatures — never leaves your machine.
The tool recognizes and color-codes five Chrome trace categories: task (blue), v8 scripting (violet), blink rendering (emerald/green), gc garbage collection (red), and devtools.timeline (amber). Events not matching a known category appear in gray.