From fdfc0ea01d667d476861b4ff9d41fae9d2005bfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ho=C3=A0i=20Nh=E1=BB=9B?= Date: Wed, 20 May 2026 15:48:41 +0000 Subject: [PATCH] Add OhMyPerf to Timeline, Tracing & Profiling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit OhMyPerf drives Chromium through the DevTools Protocol via Playwright + raw CDP, specifically: - Target.setAutoAttach({flatten: true}) for cross-origin OOPIF inspection with per-frame CDPSession (~99% coverage). The motivating pattern is the same as awesome-puppeteer's nested-frame chapter but generalized to any cross-origin iframe — including the practical mdnplay.dev / openstreetmap.org / example.org cases. - Performance.getMetrics + Input.dispatchMouseEvent + 'web-vitals' PerformanceObserver pipeline for honest LCP/INP/CLS measurement on real hardware (not synthetic Lighthouse-CI in a datacenter). - long-task attribution via 'longtask' PerformanceObserver + Network.requestWillBeSent capture, joined back to the script URL. - Mann-Whitney U statistical regression detection against a baseline report (alpha=0.05 default), with per-metric noise floors so noisy measurements stop reporting false-positive regressions. Plus an MCP server (Model Context Protocol) so LLM agents can call the full 'measure -> propose_patch -> verify_fix' fix loop directly. Apache-2.0, runs both locally (npx -y @ohmyperf/cli) and as a hosted service. Tested with Claude Desktop, OpenCode, Cursor, Cline. --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 18ff815..4c1989b 100644 --- a/readme.md +++ b/readme.md @@ -43,6 +43,7 @@ ### Timeline, Tracing & Profiling - [DevTools Timeline Viewer](https://chromedevtools.github.io/timeline-viewer/) - Share URLs of your timeline recordings. +- [OhMyPerf](https://github.com/hoainho/ohmyperf) - Real-Chromium Core Web Vitals (LCP/INP/CLS/FCP/TBT/TTFB) measurement with cross-origin OOPIF inspection (~99% coverage) via per-frame `CDPSession`, long-task → script-URL attribution, and Mann-Whitney U regression detection. Drives Chromium through Playwright + raw CDP (`Target.setAutoAttach`), and exposes an MCP server so LLM agents can `measure → propose_patch → verify_fix` end-to-end. ### Chrome Debugger integration with Editors - [VS Code - Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug/) - Breakpoint debugging in VS Code.