🌜
🌞
speedscope

speedscope

v1.14.0

A fast, interactive web-based viewer for performance profiles. An alternative viewer for [FlameGraphs][1]. Will happily display multi-megabyte profiles without crashing your browser.

npm install speedscope

README

English | 简体中文

🔬speedscope

A fast, interactive web-based viewer for performance profiles. An alternative viewer for FlameGraphs. Will happily display multi-megabyte profiles without crashing your browser.

Given raw profiling data, speedscope allows you to interactively explore the data to get insight into what's slow in your application, or allocating all the memory, or whatever data is represented in the profiling data.

Example Profile

Usage

Visit https://www.speedscope.app, then either browse to find a profile file or drag-and-drop one onto the page. The profiles are not uploaded anywhere -- the application is totally in-browser.

Command line usage

For offline use, or convenience in the terminal, you can also install speedscope via npm:

npm install -g speedscope

Invoking speedscope /path/to/profile will load speedscope in your default browser.

Self-contained directory

If you don't have npm or node installed, you can also download a self-contained version from https://github.com/jlfwong/speedscope/releases. After you download the zip file from a release, simply unzip it and open the contained index.html in Chrome or Firefox.

Supported file formats

speedscope is designed to ingest profiles from a variety of different profilers for different programming languages & environments. Click the links below for documentation on how to import from a specific source.

Contributions to add support for additional formats are welcome! See issues with the "import source" tag.

Importing via URL

To load a specific profile by URL, you can append a hash fragment like #profileURL=[URL-encoded profile URL]&title=[URL-encoded custom title]. Note that the server hosting the profile must have CORS configured to allow AJAX requests from speedscope.

Views

🕰Time Order

Detail View

In the "Time Order" view (the default), call stacks are ordered left-to-right in the same order as they occurred in the input file, which is usually going to be the chronological order they were recorded in. This view is most helpful for understanding the behavior of an application over time, e.g. "first the data is fetched from the database, then the data is prepared for serialization, then the data is serialized to JSON".

The horizontal axis represents the "weight" of each stack (most commonly CPU time), and the vertical axis shows you the stack active at the time of the sample. If you click on one of the frames, you'll be able to see summary statistics about it.

⬅️Left Heavy

Left Heavy View

In the "Left Heavy" view, identical stacks are grouped together, regardless of whether they were recorded sequentially. Then, the stacks are sorted so that the heaviest stack for each parent is on the left -- hence "left heavy". This view is useful for understanding where all the time is going in situations where there are hundreds or thousands of function calls interleaved between other call stacks.

🥪 Sandwich

Sandwich View

The Sandwich view is a table view in which you can find a list of all functions and their associated times. You can sort by self time or total time. It's called "Sandwich" view because if you select one of the rows in the table, you can see flamegraphs for all the callers and callees of the selected row.

Navigation

Once a profile has loaded, the main view is split into two: the top area is the "minimap", and the bottom area is the "stack view".

Minimap Navigation

  • Scroll on either axis to pan around
  • Click and drag to narrow your view to a specific range

Stack View Navigation

  • Scroll on either axis to pan around
  • Pinch to zoom
  • Hold Cmd+Scroll to zoom
  • Double click on a frame to fit the viewport to it
  • Click on a frame to view summary statistics about it

Keyboard Navigation

  • +: zoom in
  • -: zoom out
  • 0: zoom out to see the entire profile
  • w/a/s/d or arrow keys: pan around the profile
  • 1: Switch to the "Time Order" view
  • 2: Switch to the "Left Heavy" view
  • 3: Switch to the "Sandwich" view
  • r: Collapse recursion in the flamegraphs
  • Cmd+S/Ctrl+S to save the current profile
  • Cmd+O/Ctrl+O to open a new profile
  • n: Go to next profile/thread if one is available
  • p: Go to previous profile/thread if one is available
  • t: Open the profile/thread selector if available
  • Cmd+F/Ctrl+F: to open search. While open, Enter and Shift+Enter cycle through results

Contributing

Do you want to contribute to speedscope? Sweeeeet. Check out CONTRIBUTING.md for instructions on setting up your dev environment.

Release Notes

1.14.0
By Jamie Wong • Published on May 19, 2022

Added

  • File and line information is now displayed in hover tips [#365] (by @sokra)
  • Support for stackprof object mode [#391] (by @alexcoco)
  • Support for hash params to control view-mode [#362] (by @djudd)
  • Support for profiles over 512MB now works [#385] (by @jlfwong)
  • Support for relative URLs in profileURL hashParam [#357] (by @danvk)

Fixed

  • Allow collapsed stacks with invalid lines for the Brenden Gregg stack format [#336] (by @P403n1x87)
  • Allow pasting into the search box [#338] (by @P403n1x87)
  • Prevent hover tips from getting unnecessarily clipped outside container bounds [#395] (by @jlfwong)
1.13.0
By Jamie Wong • Published on February 15, 2021

Added

  • Support for importing callgrind profiles [#331]
1.12.1
By Jamie Wong • Published on November 12, 2020

Fixed

  • Fixed for retina displays [#327]
1.12.0
By Jamie Wong • Published on November 12, 2020

Added

Fixed

  • Fixed incorrect highlighting when search result overlaps "…" [#326]
1.11.1
By Jamie Wong • Published on October 25, 2020

Fixed

  • Fix trace-event import for many cases where there are 'ts' collisions [#322]
  • Fix import of trace event files where B/E events' args don't match [#321]
1.11.0
By Jamie Wong • Published on October 13, 2020

Added

  • Support remapping profiles using source maps [#317]

Fixed

  • Fix line & column numbers in imports from Chrome & Firefox [#318]
1.10.0
By Jamie Wong • Published on September 30, 2020

Added

  • Support for importing profiles from Safari [#300] (by @radex)

Fixed

  • Fixed browser not opening on Windows when using the CLI [#307] (by @spillerrec)
  • Fixed import of UTF-16 encoded files w/ BOM [#314]
  • Removed accidental dependency on React [#315]
1.9.0
By Jamie Wong • Published on August 5, 2020

Added

  • Provide prev/next buttons to cycle through search results, make search results more visually prominen [#304]

Fixed

  • Fix accumulated errors in Chrome profile imports caused by zeroed negative timeDeltas [#305] (by @taneliang)
1.8.0
By Jamie Wong • Published on July 20, 2020

Added

  • Added search highlighting in time order & left heavy views [#297]

Fixed

  • Fix performance issues for the caller/callee flamegraphs in the sandwich view [#296]
1.7.0
By Jamie Wong • Published on July 14, 2020

Added

  • Introduced filtering via Ctrl+F/Cmd+F into the sandwich view [#293]

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
3,785
Community Interest
3,107
Number of Forks
166

Maintenance

Commits
11/2110/22010
Last Commit
Open Issues
90
Closed Issues
149
Open Pull Requests
10
Closed Pull Requests
20

Versions

Versions Released
11/2110/2201
Latest Version Released
May 19, 2022
Current Tags
latest1.14.0

Contributors

jlfwong
jlfwong
Commits: 345
P403n1x87
P403n1x87
Commits: 4
alangpierce
alangpierce
Commits: 3
jyc
jyc
Commits: 3
vmarchaud
vmarchaud
Commits: 2
loganek
loganek
Commits: 1
f-hj
f-hj
Commits: 1
taneliang
taneliang
Commits: 1
JustinBeckwith
JustinBeckwith
Commits: 1
januszn
januszn
Commits: 1
pushrax
pushrax
Commits: 1
Archerlly
Archerlly
Commits: 1
evanw
evanw
Commits: 1
zoidbergwill
zoidbergwill
Commits: 1
trishume
trishume
Commits: 1