agentmods.dev

tracing-with-chrome

tracing-with-chrome is a skill for Claude Code from corewebvitals/cwv-superpowers. It costs 80 tokens per session (4,669 once invoked), scanned A, original, MIT.

A Chrome-based investigation method for a specific Core Web Vitals problem: LCP, INP, or CLS. Core Web Vitals are browser measurements of loading speed, interaction response, and visual stability.

In plain words
What is it for?
Use it to inspect a target URL with Chrome, capture network and visual evidence, and investigate issues such as slow hero images, delayed input, or layout shifts. It requires a Chrome browser connection.
Why use it?
It narrows browser tracing to the suspected slow phase or cause identified by real-user data, instead of collecting an unfocused trace.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter.

Part of the cwv-superpowers plugin — 6 skills, 1 hook shipped together

not rated 12repo 2mo ago A scan 80 tokens original MIT

Good fit Use it to inspect a target URL with Chrome, capture network and visual evidence, and investigate issues such as slow hero images, delayed input, or layout shifts. It requires a Chrome browser connection.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/corewebvitals/cwv-superpowers/tracing-with-chrome
View source ↗ corewebvitals/cwv-superpowers
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add corewebvitals/cwv-superpowers --skill tracing-with-chrome
Clone the repo
git clone --depth 1 https://github.com/corewebvitals/cwv-superpowers

Made for: Claude Code.

Or install cwv-superpowers, the plugin that ships this one along with the rest of its 6 skills, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for tracing-with-chrome

README.md
[![agentmods](https://agentmods.dev/badge/skills/corewebvitals/cwv-superpowers/tracing-with-chrome/github.svg)](https://agentmods.dev/skills/corewebvitals/cwv-superpowers/tracing-with-chrome)
Your own site
<a href="https://agentmods.dev/skills/corewebvitals/cwv-superpowers/tracing-with-chrome"><img src="https://agentmods.dev/badge/skills/corewebvitals/cwv-superpowers/tracing-with-chrome/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for tracing-with-chrome

Your own site · 80×15
<a href="https://agentmods.dev/skills/corewebvitals/cwv-superpowers/tracing-with-chrome"><img src="https://agentmods.dev/badge/skills/corewebvitals/cwv-superpowers/tracing-with-chrome.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 80 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,669 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00080 $0.04669
Opus 5 $0.00040 $0.02335
Sonnet 5 $0.00016 $0.00934
Haiku 4.5 $0.00008 $0.00467

Measured 9d ago against content hash fe1e1193dce5, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

tracing-with-chrome scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/cwv-superpowers/skills/tracing-with-chrome/SKILL.md · 334 lines

How it starts

The opening of the file, as written. The whole thing — 334 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Tracing with Chrome

Invocation

Called by the cwv-superpower orchestrator at Step 3, or invoked directly when the user has a specific URL, metric, and suspected bottleneck to investigate.

Inputs:

  • Target URL — the page to trace.
  • Metric — LCP, INP, or CLS.
  • Bottleneck phase or cause pattern — from the diagnosis skill (e.g., "LOADDELAY", "INPUTDELAY", "font swap on new visitors"). Drives what to look for.
  • Element selector — from CoreDash attribution (if available).

Chrome investigates the specific bottleneck phase identified by RUM. Not all phases — just the one that matters. The trace also collects visual evidence for the report: network waterfall, page filmstrip, INP interaction timeline.

Prerequisites

This skill needs a Chrome browser MCP. Two are supported:

  • chrome-devtools-mcp (preferred — native trace primitives plus CPU/network throttling): 
    claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
  • claude-in-chrome (fallback — uses claude --chrome; JS-based timing, no native throttling).

If neither is available, the orchestrator skips this skill and reports RUM-only findings.

Tool Routing

Pick ONE path at the start of the trace based on which Chrome MCP is connected. Do not switch mid-trace. Do not free-choose tools — use the named tool list for the chosen path.

  • Path A — chrome-devtools-mcp (preferred). Probe: performance_start_trace exists. Native phase breakdowns, no PerformanceObserver scripts.

  • Path B — claude-in-chrome (fallback). Probe: javascript_tool and navigate exist on MCP server claude-in-chrome. Same evidence shape; timing captured via PerformanceObserver scripts injected through javascript_tool. Print this warning at the start of the trace:

    ⚠️ Using claude-in-chrome fallback. For native phase breakdowns and CPU/network throttling, install chrome-devtools-mcp:
   claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Read the full file on GitHub · 334 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 334 lines · 80 tokens per session scan A fe1e1193dce5

Subscribe to this mod's changes

tracing-with-chrome is a skill published in the GitHub repository corewebvitals/cwv-superpowers (12 stars, last pushed 2mo ago), licensed MIT. It adds 80 tokens to every session and 4,669 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Analytics and metricsBrowser automation
Related

Other skills, from other repositories

opencli-sitemap-author

Use when creating or maintaining OpenCLI site sitemaps: agent-facing navigation, page-state, action, workflow, API-reference, pitfall, and fallback knowledge for a website. Use after browser exploration discovers durable site context, when a sitemap is stale, or when promoting local site knowledge into the repo.

jackwener/OpenCLI · 67 tokens

debug-optimize-lcp

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…

ChromeDevTools/chrome-devtools-mcp · 99 tokens

interactive-login

How to complete browser/interactive logins (aws / gh / glab / gcloud). The platform backgrounds the login poller so it survives the human's browser round-trip — and when that does NOT work.

yc-software/qm · 46 tokens

pinchtab-mcp

Use this skill when a task requires browser automation through PinchTab's MCP server connected to a remote browser instance. Covers navigation, element interaction, data extraction, form filling, multi-step flows, and session management via MCP tools.

pinchtab/pinchtab · 52 tokens

azure-messaging-webpubsub-java

Build real-time web applications with Azure Web PubSub SDK for Java. Use when implementing WebSocket-based messaging, live updates, chat applications, or server-to-client push notifications.

microsoft/skills · 43 tokens

google-safe-browsing

Prevent and fix Google Safe Browsing "Dangerous site" flags. Use when launching a public web app, buying/picking a domain, building a login or signup page, or when any site shows a red "Dangerous site" / "Deceptive site" warning in Chrome, Brave, Safari, Firefox, or Edge. Triggers on "dangerous site", "deceptive…

davidondrej/skills · 105 tokens