speedscope est un visualiseur rapide, interactif et basé sur le web pour les profils de performance. Il supporte l’importation de données depuis de nombreux profileurs et offre trois modes de visualisation : ordre temporel, poids gauche (flame graph traditionnel) et vue sandwich pour analyser les fonctions individuelles.
Installation
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
Basé sur le web (sans installation)
# Ouvrir https://speedscope.app dans votre navigateur
# Glisser-déposer un fichier de profil sur la page
# Ou utiliser le sélecteur de fichiers pour choisir un profil
# Tout le traitement se fait côté client dans le navigateur
Utilisation CLI
# Ouvrir un profil dans le navigateur par défaut
speedscope profile.json
# Ouvrir un format de fichier spécifique
speedscope perf.data.json
speedscope profile.pb.gz
speedscope chrome_trace.json
# Envoyer des données directement depuis un profileur
py-spy record --format speedscope -o - -- python app.py | speedscope -
# Ouvrir plusieurs profils pour comparaison
speedscope before.json after.json
| Format | Outil source | Extension de fichier |
|---|
| speedscope JSON | Format natif | .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 | Piles repliées DTrace | .txt |
| Haskell prof | Profileur GHC | .prof |
| Safari Timeline | Safari Web Inspector | .json |
Générer des profils pour speedscope
Depuis py-spy (Python)
# Générer une sortie compatible speedscope
py-spy record --format speedscope -o profile.speedscope.json -- python my_script.py
# Depuis un processus en cours
sudo py-spy record --format speedscope -o profile.speedscope.json --pid 1234
Depuis perf (Linux)
# Enregistrer avec perf
perf record -F 99 -g -- ./my_program
perf script > out.perf
# Convertir en piles pliées (speedscope les lit)
stackcollapse-perf.pl out.perf > out.folded
# Ouvrir dans speedscope
speedscope out.folded
Depuis Go pprof
# Générer un profil CPU
go tool pprof -proto http://localhost:6060/debug/pprof/profile?seconds=30 > cpu.pb.gz
# Ouvrir dans speedscope
speedscope cpu.pb.gz
# Ou générer depuis un test Go
go test -cpuprofile cpu.pb.gz -bench .
speedscope cpu.pb.gz
# 1. Ouvrir Chrome DevTools > onglet Performance
# 2. Cliquer sur Record, reproduire le problème, cliquer sur Stop
# 3. Cliquer sur la flèche vers le bas (Exporter) pour sauvegarder en JSON
# 4. Ouvrir le fichier JSON dans speedscope
speedscope chrome_profile.json
Depuis Node.js
# Générer un profil CPU V8
node --cpu-prof --cpu-prof-dir=./profiles my_app.js
# Ouvrir le fichier .cpuprofile généré
speedscope profiles/*.cpuprofile
# Avec clinic.js flame
npx clinic flame -- node my_app.js
# La sortie HTML contient des données exportables
Depuis Ruby (stackprof)
# Générer un profil stackprof
# Dans le code Ruby :
# StackProf.run(mode: :cpu, out: 'stackprof.dump') { do_work }
# Convertir au format speedscope
stackprof --flamegraph stackprof.dump > flamegraph.json
speedscope flamegraph.json
Modes de vue
Vue ordre temporel
# Affiche les événements en ordre chronologique (gauche à droite = temps)
# - L'axe X représente le temps horloge
# - L'axe Y représente la profondeur de la pile d'appels
# - Utile pour comprendre le flux d'exécution et la temporisation
# - Montre quand des fonctions spécifiques ont été appelées
# - Aide à identifier les phases et patterns d'exécution
# - Naviguer : défiler horizontalement pour se déplacer dans le temps
Vue poids gauche
# Flame graph traditionnel (agrégé par chemin d'appels)
# - Les cadres de pile identiques sont fusionnés et triés par poids
# - L'axe X représente le temps total (plus large = plus de temps)
# - L'axe Y représente la profondeur de la pile d'appels
# - Idéal pour trouver les points chauds et cibles d'optimisation
# - Similaire aux flame graphs de Brendan Gregg
# - Naviguer : cliquer pour zoomer dans un sous-arbre
Vue sandwich
# Se concentrer sur une seule fonction montrant appelants et appelés
# - Sélectionner n'importe quelle fonction pour voir son contexte complet
# - Section supérieure : qui a appelé cette fonction (appelants)
# - Section inférieure : ce que cette fonction appelle (appelés)
# - Centre : la fonction sélectionnée
# - Excellent pour comprendre le rôle d'une fonction spécifique
# - Naviguer : cliquer sur les noms de fonctions pour recentrer
Raccourcis clavier
| Raccourci | Action |
|---|
1 | Basculer vers la vue ordre temporel |
2 | Basculer vers la vue poids gauche |
3 | Basculer vers la vue sandwich |
f ou / | Ouvrir la recherche |
Enter | Confirmer la recherche |
Escape | Fermer la recherche ou réinitialiser le zoom |
r | Réinitialiser la vue / zoom |
n | Correspondance de recherche suivante |
Shift+n | Correspondance de recherche précédente |
+ / = | Zoomer |
- | Dézoomer |
0 | Ajuster à la fenêtre |
h / Flèche gauche | Défiler à gauche |
l / Flèche droite | Défiler à droite |
| Molette souris | Zoomer/dézoomer au curseur |
{
"$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]
}
]
}
Conseils et flux de travail
# Flux de travail de comparaison A/B rapide
# 1. Profiler avant l'optimisation
py-spy record --format speedscope -o before.json -- python my_script.py
# 2. Modifier le code, puis profiler à nouveau
py-spy record --format speedscope -o after.json -- python my_script.py
# 3. Ouvrir les deux dans des onglets speedscope pour comparaison
speedscope before.json &
speedscope after.json &
# Conversion entre formats
# Piles pliées vers speedscope : ouvrir directement
speedscope my_folded_stacks.txt
# Plusieurs profils dans un fichier
# Le JSON speedscope supporte plusieurs profils dans le tableau "profiles"
# Chacun apparaît comme un onglet séparé dans le visualiseur
# Auto-hébergement de speedscope
# Cloner et servir les fichiers statiques
git clone https://github.com/jlfwong/speedscope.git
cd speedscope && python3 -m http.server 8080
# Ouvrir http://localhost:8080
Référence rapide
| Fonctionnalité | Description |
|---|
| Ordre temporel | Vue d’exécution chronologique |
| Poids gauche | Vue flame graph agrégé |
| Sandwich | Vue centrée appelant/appelé |
| Recherche | Mettre en surbrillance les cadres correspondants |
| Zoom | Cliquer sur les cadres ou utiliser la molette |
| Exporter | Sauvegarder la vue actuelle en PNG |
| Glisser-déposer | Charger des fichiers en les déposant sur la page |
| Confidentialité | Tout le traitement est côté client |
