Dev Tools Panel
A Chrome extension that adds a live performance panel to any page, from FPS and frame time to Core Web Vitals and long tasks.
Overview
Dev Tools Panel injects a small, always-available performance surface into Chrome pages. It keeps the common measurements visible without requiring a developer to open DevTools or switch panels while investigating a page.
The panel reports navigation timing, paint timing, layout stability, interaction latency, long-task pressure, DOM size, resource count, and JavaScript heap usage when the browser exposes it. A toolbar popup controls visibility and the panel can reset accumulating metrics in place.
Methodology
A Manifest V3 content script mounts the panel at document idle and reads the browser Performance APIs already available to the page. PerformanceObserver instances collect LCP, CLS, INP, and long-task entries, while requestAnimationFrame samples FPS and an exponentially smoothed frame duration.
The popup and content script communicate through Chrome runtime messages, with local storage preserving the visibility preference. The design keeps collection local to the current page and uses graceful fallbacks when a browser does not expose a metric such as the JavaScript heap.
What it does
- FPS and smoothed frame-render time
- DOMContentLoaded, load, TTFB, and first paint timing
- Core Web Vitals: FCP, LCP, CLS, and INP
- Long-task count, total blocking time, and maximum duration
- DOM node count, resource count, and heap usage when available
- Popup and in-page controls for visibility and metric reset