All Projects

dev-tools-extension

A Chrome extension that overlays real-time web performance metrics on any page — FPS, Core Web Vitals, memory usage, and long task detection in one panel.

Overview

dev-tools-extension adds a floating performance panel to any webpage in Chrome. It tracks real-time metrics including FPS, frame render time, and all Core Web Vitals (FCP, LCP, CLS, TTFB, INP) alongside memory and DOM statistics.

The panel appears in the bottom-left corner with toggle and reset controls. Built for developers who want quick performance visibility without opening DevTools.

Metrics Tracked

  • FPS and frame render time
  • DOMContentLoaded and page load timing
  • Core Web Vitals: FCP, LCP, CLS, TTFB, INP
  • Long tasks: count, total blocking time, max duration
  • DOM node count and resource count
  • JavaScript heap usage

Tech Stack

JavaScript Chrome APIs Web Performance API

Links