Skip to content

Commit 06ee026

Browse files
bjohansebasCopilot
andauthored
learn(frame-graphs): update the ways to view flame graphs (#8555)
* 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 <bjohansebas@gmail.com> * 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 <bjohansebas@gmail.com> * fixup! --------- Signed-off-by: Sebastian Beltran <bjohansebas@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent fb4943d commit 06ee026

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

apps/site/pages/en/learn/diagnostics/flame-graphs.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,16 @@ perf record -e cycles:u -g -- node --perf-basic-prof --interpreted-frames-native
4040

4141
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.
4242
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
43-
6. Clone Brendan Gregg's FlameGraph tools: https://github.com/brendangregg/FlameGraph
44-
7. Run `cat perfs.out | ./FlameGraph/stackcollapse-perf.pl | ./FlameGraph/flamegraph.pl --colors=js > profile.svg`
43+
6. Preview or generate the flame graph:
44+
- Browser preview (no local setup required):
45+
- Upload the generated `perfs.out` file to <https://flamegraph.com> to visualize the flame graph.
4546

46-
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.
47+
- Clone Brendan Gregg's FlameGraph tools: https://github.com/brendangregg/FlameGraph
48+
- 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
4749

48-
Worth mentioning - if you click an element of a flame graph a it will zoom-in on the section you clicked.
50+
Once the flame graph is rendered, inspect the most saturated orange bars first. They're likely to represent CPU heavy functions.
51+
52+
Worth mentioning - if you click an element of a flame graph it will zoom-in on the section you clicked.
4953

5054
### Using `perf` to sample a running process
5155

0 commit comments

Comments
 (0)