speedscope أوامر

speedscope هو عارض سريع وتفاعلي ومبني على الويب لملفات تحليل الأداء. يدعم استيراد البيانات من العديد من المحللات ويوفر ثلاثة أوضاع عرض: الترتيب الزمني، والثقيل يساراً (مخطط اللهب التقليدي)، وعرض الشطيرة لتحليل الدوال الفردية.

التثبيت

Linux/Ubuntu

# Install via npm (globally)
npm install -g speedscope

# Or use npx without installing
npx speedscope profile.json

# Verify installation
speedscope --version

# speedscope runs locally in your browser — no data is sent to any server

Web-Based (No Install)

# Open https://speedscope.app in your browser
# Drag and drop a profile file onto the page
# Or use the file picker to select a profile

# All processing happens client-side in the browser

CLI الاستخدام

# Open a profile in the default browser
speedscope profile.json

# Open a specific file format
speedscope perf.data.json
speedscope profile.pb.gz
speedscope chrome_trace.json

# Pipe data directly from a profiler
py-spy record --format speedscope -o - -- python app.py | speedscope -

# Open multiple profiles for comparison
speedscope before.json after.json

الصيغ المدعومة

Format	Source Tool	File Extension
speedscope JSON	Native format	`.speedscope.json`
pprof	Go pprof, py-spy	`.pb.gz`, `.pb`
Chrome Trace	Chrome DevTools, Node.js	`.json`
Firefox Profile	Firefox Profiler	`.json`
Brendan Gregg folded	FlameGraph stackcollapse	`.folded`, `.txt`
callgrind	Valgrind, cachegrind	`callgrind.out.*`
Instruments	Xcode Instruments	`.trace`
Linux perf	`perf script`	`.perf`, `.txt`
DTrace	DTrace collapsed stacks	`.txt`
Haskell prof	GHC profiler	`.prof`
Safari Timeline	Safari Web Inspector	`.json`

Generating Profiles for speedscope

From py-spy (Python)

# Generate speedscope-compatible output
py-spy record --format speedscope -o profile.speedscope.json -- python my_script.py

# From a running process
sudo py-spy record --format speedscope -o profile.speedscope.json --pid 1234

From perf (Linux)

# Record with perf
perf record -F 99 -g -- ./my_program
perf script > out.perf

# Convert to folded stacks (speedscope reads these)
stackcollapse-perf.pl out.perf > out.folded

# Open in speedscope
speedscope out.folded

From Go pprof

# Generate a CPU profile
go tool pprof -proto http://localhost:6060/debug/pprof/profile?seconds=30 > cpu.pb.gz

# Open in speedscope
speedscope cpu.pb.gz

# Or generate from a Go test
go test -cpuprofile cpu.pb.gz -bench .
speedscope cpu.pb.gz

From Chrome DevTools

# 1. Open Chrome DevTools > Performance tab
# 2. Click Record, reproduce the issue, click Stop
# 3. Click the down arrow (Export) to save as JSON
# 4. Open the JSON file in speedscope
speedscope chrome_profile.json

From Node.js

# Generate a V8 CPU profile
node --cpu-prof --cpu-prof-dir=./profiles my_app.js

# Open the generated .cpuprofile file
speedscope profiles/*.cpuprofile

# Using clinic.js flame
npx clinic flame -- node my_app.js
# The output HTML contains data that can be exported

From Ruby (stackprof)

# Generate a stackprof profile
# In Ruby code:
# StackProf.run(mode: :cpu, out: 'stackprof.dump') { do_work }

# Convert to speedscope format
stackprof --flamegraph stackprof.dump > flamegraph.json
speedscope flamegraph.json

أوضاع العرض

عرض الترتيب الزمني

# Shows events in chronological order (left to right = time)
# - X-axis represents wall-clock time
# - Y-axis represents call stack depth
# - Useful for understanding execution flow and timing
# - Shows when specific functions were called
# - Helps identify phases and patterns in execution
# - Navigate: scroll horizontally to move through time

العرض الثقيل يساراً

# Traditional flame graph (aggregated by call path)
# - Identical stack frames are merged and sorted by weight
# - X-axis represents total time (wider = more time)
# - Y-axis represents call stack depth
# - Best for finding hotspots and optimization targets
# - Similar to Brendan Gregg flame graphs
# - Navigate: click to zoom into a subtree

عرض الشطيرة

# Focus on a single function showing callers and callees
# - Select any function to see its full context
# - Top section: who called this function (callers)
# - Bottom section: what this function calls (callees)
# - Center: the selected function
# - Great for understanding a specific function's role
# - Navigate: click function names to re-center

اختصارات لوحة المفاتيح

Shortcut	Action
`1`	Switch to Time Order view
`2`	Switch to Left Heavy view
`3`	Switch to Sandwich view
`f` or `/`	Open search
`Enter`	Confirm search
`Escape`	Close search or reset zoom
`r`	Reset view / zoom
`n`	Next search match
`Shift+n`	Previous search match
`+` / `=`	Zoom in
`-`	Zoom out
`0`	Fit to window
`h` / Left Arrow	Pan left
`l` / Right Arrow	Pan right
Mouse wheel	Zoom in/out at cursor

speedscope JSON Format

{
  "$schema": "https://www.speedscope.app/file-format-schema.json",
  "shared": {
    "frames": [
      {"name": "main", "file": "app.py", "line": 10},
      {"name": "process_data", "file": "app.py", "line": 25},
      {"name": "transform", "file": "utils.py", "line": 42}
    ]
  },
  "profiles": [
    {
      "type": "sampled",
      "name": "CPU Profile",
      "unit": "milliseconds",
      "startValue": 0,
      "endValue": 5000,
      "samples": [[0, 1, 2], [0, 1], [0, 1, 2]],
      "weights": [10, 10, 10]
    }
  ]
}

نصائح وسير العمل

# Quick A/B comparison workflow
# 1. Profile before optimization
py-spy record --format speedscope -o before.json -- python my_script.py

# 2. Make code changes, then profile again
py-spy record --format speedscope -o after.json -- python my_script.py

# 3. Open both in speedscope tabs for comparison
speedscope before.json &
speedscope after.json &

# Converting between formats
# Folded stacks to speedscope: just open directly
speedscope my_folded_stacks.txt

# Multiple profiles in one file
# speedscope JSON supports multiple profiles in the "profiles" array
# Each appears as a separate tab in the viewer

# Self-hosting speedscope
# Clone and serve the static files
git clone https://github.com/jlfwong/speedscope.git
cd speedscope && python3 -m http.server 8080
# Open http://localhost:8080

مرجع سريع

الميزة	الوصف
Time Order	Chronological execution view
Left Heavy	Aggregated flame graph view
Sandwich	Caller/callee focus view
Search	Highlight matching frames
Zoom	Click frames or use scroll wheel
Export	Save current view as PNG
Drag & Drop	Load files by dropping onto the page
Privacy	All processing is client-side