srsubramanian

chrome_perf_analyzer

Analyze Chrome DevTools Performance trace JSON files. Use when the user uploads a Chrome Performance trace (.json) and asks questions like "what network calls happened between X and Y", "what took the most time", "show me long tasks", "what was slow", or any query about timing, network requests, or performance bottlenecks in the trace.

srsubramanian 0 Updated 4mo ago

Resources

2
GitHub

Install

npx skillscat add srsubramanian/langchain-docker/chrome-perf-analyzer

Install via the SkillsCat registry.

SKILL.md

Chrome Performance Trace Analyzer

Analyze Chrome DevTools Performance trace JSON exports to answer questions about network requests, timing, and performance bottlenecks.

Workflow

  1. User uploads a Chrome Performance trace (.json) to the Working Folder
  2. Use trace_summary to get an overview of the trace
  3. Use specific tools to investigate:
    • trace_network - All network requests
    • trace_network_window - Network requests in a time range
    • trace_long_tasks - Main thread blocking tasks
    • trace_slowest - Slowest events overall
    • trace_filter - Custom filtering

Common Questions

User Question Tool to Use
"What network calls happened between 2-5 seconds?" trace_network_window(start_ms=2000, end_ms=5000)
"What took the most time?" trace_slowest(count=10)
"Are there any long tasks?" trace_long_tasks(threshold_ms=50)
"Show me JavaScript execution issues" trace_filter(category="v8")
"What's in this trace?" trace_summary()

Time Units

  • All times are in milliseconds relative to trace start
  • Use trace_summary to get total trace duration
  • Network request times show when the request started and its duration

Key Metrics to Look For

Long Tasks (>50ms)

Tasks that block the main thread for more than 50ms cause jank and poor interactivity.

Slow Network Requests

Requests taking >500ms may indicate:

  • Server issues (high TTFB)
  • Large payloads
  • Missing caching

Layout Thrashing

Frequent Layout events in a short window indicate forced synchronous layouts.

JavaScript Execution

Look for long v8.execute or FunctionCall events.

Reference

For trace event format details, load the trace_format resource.

Categories