speedscope

Speedscope provides three primary ways to visualize profile data:

• Time Order (Default): Call stacks are arranged from left to right in the order they appear in the input file (chronological order). This is useful for understanding how an application behaves over time.
• Left Heavy: Identical stacks are grouped together, and stacks are sorted so that the heaviest child stack is on the left. This is useful for identifying where time is spent when many functions are interleaved.
• Sandwich: A tabular view listing all functions and their associated times. You can sort by self-time or total time. Selecting a row shows the flame graphs of all its callers and callees.

Navigation

• Minimap: Scroll on any axis to pan; click and drag to zoom into a specific range.
• Stack View: Scroll on any axis to pan; use Cmd + Scroll to zoom; double-click a frame to fit the viewport; click a box to see summary statistics.

Keyboard Shortcuts

The speedscope-sourcemap-test-project is used to verify that performance profile remapping via sourcemaps works correctly across different build chains (TypeScript, bundling, and minification).

To use this project:

1. Build the artifacts using npm run build.
2. Open the generated files located in the html directory in your web browser to test remapping functionality.

The interface is split into a Minimap (top) and a Stack View (bottom).

Minimap Navigation

• Scroll: Pan around the profile.
• Click and drag: Narrow your view to a specific range.

Stack View Navigation

• Scroll: Pan around.
• Pinch / Cmd+Scroll: Zoom in/out.
• Double click a frame: Fit the viewport to that specific frame.
• Click a frame: View summary statistics for that frame.

If you do not have Node.js or npm installed, you can download a self-contained version from the speedscope releases page.

1. Download the zip file from a release.
2. Unzip the file.
3. Open the contained index.html in Chrome or Firefox.

To build the demangle module, you must install the following dependencies:

1. Emscripten 4.0.0: Follow the official emsdk installation instructions. Ensure emcc is available in your PATH.
2. GCC Sources: You must fetch specific GCC sources by cloning the repository and resetting to a specific commit.

Refer to the official Emscripten documentation for installation: https://emscripten.org/docs/getting_started/downloads.html#installation-instructions-using-the-emsdk-recommended

# Fetch GCC sources
git clone https://github.com/gcc-mirror/gcc
git reset --hard 40754a3b9bef83bf4da0675fcb378e8cd1675602

To use speedscope offline or via the terminal, install it globally using npm:

npm install -g speedscope

Once installed, you can load a profile by running:

speedscope /path/to/profile

This will open speedscope in your default web browser.

speedscope provides three distinct ways to visualize profiling data:

• Time Order (Default): Call stacks are ordered left-to-right chronologically. This is best for understanding application behavior over time (e.g., sequence of events).
• Left Heavy: Identical stacks are grouped together and sorted so the heaviest stack for each parent is on the left. This is best for identifying where total time is being spent across many interleaved calls.
• Sandwich: A table view listing all functions and their associated times. You can sort by self time or total time. Selecting a row shows flamegraphs for all callers and callees of that function.

You can load a specific profile by appending a hash fragment to the speedscope URL. This is useful for sharing specific profiles.

Use the following format: #profileURL=[URL-encoded profile URL]&title=[URL-encoded custom title]

Note: The server hosting the profile must have CORS configured to allow AJAX requests from speedscope.

The demangle module (a wrapper for GNU libiberty demangling functions) can be built using make. Depending on your target environment, use one of the following commands:

• For CommonJS: Run make to produce a single CommonJS module that includes the base64 encoded .wasm file.
• For ES6/Testing: Run make TEST=1 to produce both an ES6 module and a separate .wasm file. This version is suitable for use with node for testing purposes.

If you prefer not to use npm or Node.js, you can download a standalone version from the speedscope releases page.

To use it:

1. Download the compressed file for your version.
2. Extract the contents.
3. Open index.html in Google Chrome or Firefox.