Skills
.Work. You
Rest

visual-qa-chrome-profiler

Community

Chrome DevTools profiler for browser bottlenecks.

Software Engineering#performance#fps#chrome-devtools#profile#core-web-vitals#flame-chart
Authorgwpjp
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Profiles production page performance to identify browser-level bottlenecks using Chrome DevTools.

Core Features & Use Cases

  • Performance profiling across Main, Network, Frames, GPU, Interactions, Layout Shifts, Animations, and Timings.
  • Flame chart, FPS, CPU usage, and timeline event analysis for pinpointing slow tasks.
  • Core Web Vitals collection (LCP, CLS, FID) during realistic workloads.
  • Use Case: Debug a production issue where a page feels sluggish under real user traffic and surface the root cause in the performance panel.
  • Use Case: Compare pre- and post-optimization results to validate performance improvements.

Quick Start

Start profiling production pages with a ready-to-use workflow: ensure a production build is served, attach Chrome DevTools, start a Performance recording, and analyze the flame chart and metrics to identify bottlenecks.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: visual-qa-chrome-profiler
Download link: https://github.com/gwpjp/Web3-Claude/archive/main.zip#visual-qa-chrome-profiler

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.