From 9139c5ee5e27a65a21d7da2d0e4cb6c299cf047b Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Thu, 15 Jan 2026 11:38:48 -0500 Subject: [PATCH 1/2] learn(frame-graphs): update the ways to view flame graphs Updated instructions for generating and visualizing flame graphs, including browser preview and local setup options. Signed-off-by: Sebastian Beltran --- .../site/pages/en/learn/diagnostics/flame-graphs.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/site/pages/en/learn/diagnostics/flame-graphs.md b/apps/site/pages/en/learn/diagnostics/flame-graphs.md index 53245fef7cb35..98a22c4238f0d 100644 --- a/apps/site/pages/en/learn/diagnostics/flame-graphs.md +++ b/apps/site/pages/en/learn/diagnostics/flame-graphs.md @@ -40,10 +40,17 @@ perf record -e cycles:u -g -- node --perf-basic-prof --interpreted-frames-native 4. Disregard warnings unless they're saying you can't run perf due to missing packages; you may get some warnings about not being able to access kernel module samples which you're not after anyway. 5. Run `perf script > perfs.out` to generate the data file you'll visualize in a moment. It's useful to [apply some cleanup](#filtering-out-nodejs-internal-functions) for a more readable graph -6. Clone Brendan Gregg's FlameGraph tools: https://github.com/brendangregg/FlameGraph -7. Run `cat perfs.out | ./FlameGraph/stackcollapse-perf.pl | ./FlameGraph/flamegraph.pl --colors=js > profile.svg` +6. Preview or generate the flame graph: + + - Browser preview (no local setup required): -Now open the flame graph file in your favorite browser and watch it burn. It's color-coded so you can focus on the most saturated orange bars first. They're likely to represent CPU heavy functions. + - Upload the generated `perfs.out` file to to visualize the flame graph. + + - Clone Brendan Gregg's FlameGraph tools: https://github.com/brendangregg/FlameGraph + + - Run `cat perfs.out | ./FlameGraph/stackcollapse-perf.pl | ./FlameGraph/flamegraph.pl --colors=js > profile.svg` and now open the flame graph file in your favorite browser and watch it burn + +Once the flame graph is rendered, inspect the most saturated orange bars first. They're likely to represent CPU heavy functions. Worth mentioning - if you click an element of a flame graph a it will zoom-in on the section you clicked. From 57d0e5b927a241ad77846eb78f7f68fdb3138938 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Mon, 19 Jan 2026 12:37:30 -0500 Subject: [PATCH 2/2] Update apps/site/pages/en/learn/diagnostics/flame-graphs.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Sebastian Beltran --- apps/site/pages/en/learn/diagnostics/flame-graphs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/pages/en/learn/diagnostics/flame-graphs.md b/apps/site/pages/en/learn/diagnostics/flame-graphs.md index 98a22c4238f0d..dbc32c9c3cca9 100644 --- a/apps/site/pages/en/learn/diagnostics/flame-graphs.md +++ b/apps/site/pages/en/learn/diagnostics/flame-graphs.md @@ -52,7 +52,7 @@ perf record -e cycles:u -g -- node --perf-basic-prof --interpreted-frames-native Once the flame graph is rendered, inspect the most saturated orange bars first. They're likely to represent CPU heavy functions. -Worth mentioning - if you click an element of a flame graph a it will zoom-in on the section you clicked. +Worth mentioning - if you click an element of a flame graph it will zoom-in on the section you clicked. ### Using `perf` to sample a running process