| .vscode | ||
| import | ||
| sample | ||
| .eslintrc.js | ||
| .gitignore | ||
| .npmignore | ||
| .travis.yml | ||
| application.tsx | ||
| canvas-context.ts | ||
| cli.js | ||
| color-chit.tsx | ||
| color.ts | ||
| demangle-cpp.ts | ||
| deploy.sh | ||
| favicon-16x16.png | ||
| favicon-32x32.png | ||
| favicon.ico | ||
| flamechart-color-pass-renderer.ts | ||
| flamechart-minimap-view.tsx | ||
| flamechart-renderer.ts | ||
| flamechart-style.ts | ||
| flamechart-view.tsx | ||
| flamechart.ts | ||
| hash-params.ts | ||
| index.html | ||
| LICENSE | ||
| lru-cache.test.ts | ||
| lru-cache.ts | ||
| math.test.ts | ||
| math.ts | ||
| overlay-rectangle-renderer.ts | ||
| package-lock.json | ||
| package.json | ||
| prettier.config.js | ||
| profile-table-view.tsx | ||
| profile.test.ts | ||
| profile.ts | ||
| README.md | ||
| rectangle-batch-renderer.ts | ||
| regl.d.ts | ||
| reloadable.tsx | ||
| reset.css | ||
| row-atlas.ts | ||
| scrollable-list-view.tsx | ||
| speedscope.tsx | ||
| stats.ts | ||
| style.ts | ||
| test-utils.ts | ||
| texture-cached-renderer.ts | ||
| tsconfig.json | ||
| utils.test.ts | ||
| utils.ts | ||
| value-formatters.test.ts | ||
| value-formatters.ts | ||
🔬speedscope
A fast, interactive web-based viewer for sampling 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.
Usage
Visit https://jlfwong.github.io/speedscope/, 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.
Supported file formats
Chrome
Both the timeline format output by Chrome developers tools (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#save) and the .cpuprofile format output are supported. The .cpuprofile format is useful for viewing flamecharts generated by Node.js applications:
https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
Firefox
The profile.json file format output by Firefox can be saved and import into speedscope: https://developer.mozilla.org/en-US/docs/Tools/Performance
Instruments.app
You can import call trees from OSX Instruments.app into speedscope by selecting a row in the "Profile" view and select "Edit -> Deep Copy" from the menu then pasting directly into speedscope. This data contains only aggregate statistics, so the "Time Order" view and the "Left Heavy" view will look very similar.
You can also import .trace files for time profiles by dragging them directly
into the browser from Chrome.
stackprof Ruby profiler
If the raw: true flag is set when recording a dump, the resulting json dump can be imported into speedscope.
perf and DTrace
If you process the output of perf or DTrace first with Brendan Gregg's stackcollapse-*.pl scripts (https://github.com/brendangregg/FlameGraph#2-fold-stacks), the result can be imported into speedscope.
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
Both of the main views of the applications display flame graphs.
In this view, 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.
🕰Time Order
In the "Time Order" view (the default), the stacks are ordered left-to-right in the same order as the occurred in the input file, which is usually going to be the chronological order they were recorded in. This view is most helpful for understand 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". This is the only flame graph order supported by Chrome developer tools.
⬅️Left Heavy
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.
📒Table View
In this "Table View", you can find a list of all functions an their associated times. You can sort by self time or total time.
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
Keyboard Navigation
+: zoom in-: zoom out0: zoom out to see the entire profilew/a/s/dor arrow keys: pan around the profile1: Switch to the "Time Order" view2: Switch to the "Left Heavy" view3: Switch to the table viewr: Collapse recursion in the flamegraphs