Skip to content

learn(frame-graphs): update the ways to view flame graphs #8555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bjohansebas wants to merge 1 commit into
base: main
Choose a base branch
from
Open

learn(frame-graphs): update the ways to view flame graphs #8555

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions apps/site/pages/en/learn/diagnostics/flame-graphs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <https://flamegraph.com> 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.
Copy link

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an extra 'a' in the sentence. It should read 'if you click an element of a flame graph it will zoom-in' (removing the extra 'a').

Suggested change
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.

Copilot uses AI. Check for mistakes.
Copy link
Member

@mikeesto mikeesto Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might as well fix this too


Expand Down
Loading