From 82597df4e50e0b41b344e46b71ec0e71ec15dd98 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Thu, 15 Jan 2026 11:38:48 -0500 Subject: [PATCH 1/3] 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 f2a94a5db7a0ae42ef944e067288e1ae8ff9d67c Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Mon, 19 Jan 2026 12:37:30 -0500 Subject: [PATCH 2/3] 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 From 9d9c5af12966adc74838af1398e6574d72695561 Mon Sep 17 00:00:00 2001 From: Sebastian Beltran Date: Mon, 2 Feb 2026 15:32:18 +0000 Subject: [PATCH 3/3] fixup! --- .../site/pages/en/learn/diagnostics/flame-graphs.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/apps/site/pages/en/learn/diagnostics/flame-graphs.md b/apps/site/pages/en/learn/diagnostics/flame-graphs.md index dbc32c9c3cca9..16d38a220e689 100644 --- a/apps/site/pages/en/learn/diagnostics/flame-graphs.md +++ b/apps/site/pages/en/learn/diagnostics/flame-graphs.md @@ -41,14 +41,11 @@ 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. Preview or generate the flame graph: - - - Browser preview (no local setup required): - - - 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 + - Browser preview (no local setup required): + - 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.