speedscope/README.md

English | [简体中文](./README-zh_CN.md)
# 🔬speedscope 

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.

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](https://user-images.githubusercontent.com/150329/40900669-86eced80-6781-11e8-92c1-dc667b651e72.gif)

[0]: https://en.wikipedia.org/wiki/Profiling_(computer_programming)#Statistical_profilers
[1]: https://github.com/brendangregg/FlameGraph

# 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.

- JavaScript
  - [Importing from Chrome](https://github.com/jlfwong/speedscope/wiki/Importing-from-Chrome)
  - [Importing from Firefox](https://github.com/jlfwong/speedscope/wiki/Importing-from-Firefox)
  - [Importing from Safari](https://github.com/jlfwong/speedscope/wiki/Importing-from-Safari)
  - [Importing from Node.js](https://github.com/jlfwong/speedscope/wiki/Importing-from-Node.js)
- Ruby
  - [Importing from stackprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-stackprof-(ruby))
  - [Importing from rbspy](https://github.com/jlfwong/speedscope/wiki/Importing-from-rbspy-(ruby))
  - [Importing from ruby-prof](https://github.com/jlfwong/speedscope/wiki/Importing-from-ruby-prof)
- Python
  - [Importing from py-spy](https://github.com/jlfwong/speedscope/wiki/Importing-from-py-spy-(python))
  - [pyspeedscope](https://github.com/windelbouwman/pyspeedscope)
  - [Importing from Austin](https://github.com/P403n1x87/austin-python#format-conversion)
  - [Importing from pyinstrument](https://github.com/jlfwong/speedscope/wiki/Importing-from-pyinstrument-(python))
- PHP
  - [Importing from phpspy or sj-i/php-profiler](https://github.com/sj-i/php-profiler/pull/101)
- Go
  - [Importing from pprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go))  
- Rust
  - [flamescope](https://github.com/coolreader18/flamescope)
- Native code
  - [Importing from Instruments.app](https://github.com/jlfwong/speedscope/wiki/Importing-from-Instruments.app) (macOS)
  - [Importing from `perf`](https://github.com/jlfwong/speedscope/wiki/Importing-from-perf-(linux)) (linux)
- [Importing from .NET Core](https://github.com/jlfwong/speedscope/wiki/Importing-from-.NET-Core)
- [Importing from GHC (Haskell)](https://github.com/jlfwong/speedscope/wiki/Importing-from-Haskell)
- [Importing from custom sources](https://github.com/jlfwong/speedscope/wiki/Importing-from-custom-sources)

Contributions to add support for additional formats are welcome! See issues with the ["import source" tag](https://github.com/jlfwong/speedscope/issues?q=is%3Aissue+is%3Aopen+label%3A%22import+source%22).

## 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](https://user-images.githubusercontent.com/150329/42108613-e6ef6d3a-7b8f-11e8-93d4-541b2cb93fe5.png)

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](https://user-images.githubusercontent.com/150329/44534434-a05f8380-a6ac-11e8-86ac-e3e05e577c52.png)

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](https://user-images.githubusercontent.com/150329/42108467-76a57baa-7b8f-11e8-815f-1df7b6ac3ede.png)

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](./CONTRIBUTING.md) for instructions on setting up your dev environment.
-												Add `README-zh_CN.md` file (#364)


											
										
										
											2021-09-22 21:20:25 +03:00
+								English | [简体中文](./README-zh_CN.md)
 								# 🔬speedscope
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
-												Update README.md
											
										
										
											2018-08-21 20:20:08 +03:00
+								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.
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
 								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.
-												Revert "Update hero GIF in README"

This reverts commit 11585fed92ff6004f27561f3c1907b9147fe6ae6.

											
										
										
											2018-08-23 18:44:12 +03:00
+								![Example Profile](https://user-images.githubusercontent.com/150329/40900669-86eced80-6781-11e8-92c1-dc667b651e72.gif)
-												Create README.md
											
										
										
											2017-12-08 10:51:15 +03:00
 								[0]: https://en.wikipedia.org/wiki/Profiling_(computer_programming)#Statistical_profilers
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								[1]: https://github.com/brendangregg/FlameGraph
-												Create README.md
											
										
										
											2017-12-08 10:51:15 +03:00
 								# Usage
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
-												Update URL in README
											
										
										
											2018-07-06 12:14:34 +03:00
+								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.
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
-												Add a way of generating a self-contained zip-file

											
										
										
											2018-08-22 06:11:00 +03:00
+								## Command line usage
-												Add a CLI to load the target file in your default browser (#88)

This PR add a CLI speedscope which load file given as an argument in your default browser. Expected usage looks like:

```
speedscope /path/to/profile
```

Note that since we're using base64 encoded strings as a transport for this, this won't work with multi-file profiles, like the Instruments .trace files. This could be augmented to support that by archiving the contents, but that can be handled in a different PR.

This PR also set up a viable model for integrating speedscope into other projects. By replicating the contents of `cli.js` in other languages, integration should be possible in other languages with no dependency upon node in any way. Distribution should consist of just HTML, JS, and CSS assets to be loaded in browser.

Test Plan:
- Ran the following to simulate a publish & subsequent installation:

```
$ npm pack
$ mv speedscope-0.1.0.tgz /tmp/
$ cd /tmp
$ tar -xvvf speedscope-0.1.0.tgz
$ cd package
$ npm install --only=production
$ ./cli.js
Opening file:///private/tmp/package/dist/release/index.html in your default browser
$ ./cli.js ~/code/speedscope/sample/profiles/Chrome/65/timeline.json
Creating temp file /var/folders/l0/qtd9z14973s2tw81vmzwkyp00000gp/T/speedscope-1531023992823-3880.js
Creating temp file /var/folders/l0/qtd9z14973s2tw81vmzwkyp00000gp/T/speedscope-1531023992823-3880.html
Opening file:///var/folders/l0/qtd9z14973s2tw81vmzwkyp00000gp/T/speedscope-1531023992823-3880.html in your default browser
```

Fixes #24
											
										
										
											2018-07-08 07:33:02 +03:00
+								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.
-												Add a way of generating a self-contained zip-file

											
										
										
											2018-08-22 06:11:00 +03:00
+								## 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.
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
+								## Supported file formats
-												Update README.md to link to wiki pages for import instructions

Fixes #115
											
										
										
											2018-08-21 19:55:06 +03:00
+								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.
 								- JavaScript
 								  - [Importing from Chrome](https://github.com/jlfwong/speedscope/wiki/Importing-from-Chrome)
 								  - [Importing from Firefox](https://github.com/jlfwong/speedscope/wiki/Importing-from-Firefox)
-												Add support for Safari profiles (#313)

Closes #294 

This adds import for Safari/webkit profiler. Well, for Safari 13.1 for sure, I haven't done any work to check if there's been changes to the syntax.

It seems to work OK, and is already a huge improvement over profiling in Safari (which doesn't even have a flame graph, let alone something like left heavy). Sadly, the sampler resolution is only 1kHz, which is not super useful for a lot of profiling work. I made a ticket on webkit bug tracker to ask for 10kHz/configurable sampling rate: https://bugs.webkit.org/show_bug.cgi?id=214866

Another thing that's missing is that I cut out all the idle time. We could also insert layout/paint samples into the timeline by parsing `events`. But I'll leave that for another time.

<img width="1280" alt="Captura de pantalla 2020-07-28 a las 11 02 06" src="https://user-images.githubusercontent.com/183747/88643560-20c16700-d0c2-11ea-9c73-d9159e68fab9.png">
											
										
										
											2020-09-30 00:26:01 +03:00
+								  - [Importing from Safari](https://github.com/jlfwong/speedscope/wiki/Importing-from-Safari)
-												Update README.md to link to wiki pages for import instructions

Fixes #115
											
										
										
											2018-08-21 19:55:06 +03:00
+								  - [Importing from Node.js](https://github.com/jlfwong/speedscope/wiki/Importing-from-Node.js)
 								- Ruby
 								  - [Importing from stackprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-stackprof-(ruby))
 								  - [Importing from rbspy](https://github.com/jlfwong/speedscope/wiki/Importing-from-rbspy-(ruby))
-												Update README.md to include link for importing from ruby-prof

Fixes #265
											
										
										
											2020-04-28 21:00:53 +03:00
+								  - [Importing from ruby-prof](https://github.com/jlfwong/speedscope/wiki/Importing-from-ruby-prof)
-												Add py-spy to README
											
										
										
											2019-10-07 00:59:17 +03:00
+								- Python
 								  - [Importing from py-spy](https://github.com/jlfwong/speedscope/wiki/Importing-from-py-spy-(python))
-												Add pyspeedscope & flamescope to README
											
										
										
											2019-10-07 01:10:00 +03:00
+								  - [pyspeedscope](https://github.com/windelbouwman/pyspeedscope)
-												Update link to Austin instructions (#319)

The Austin format conversion tools have been moved to the dedicated austin-python module. The README has been updated to point to the new instructions.
											
										
										
											2020-10-11 22:05:20 +03:00
+								  - [Importing from Austin](https://github.com/P403n1x87/austin-python#format-conversion)
-												Add link to pyinstrument wiki page (#377)


											
										
										
											2022-05-17 09:14:25 +03:00
+								  - [Importing from pyinstrument](https://github.com/jlfwong/speedscope/wiki/Importing-from-pyinstrument-(python))
-												Add PHP import instructions (fixes #368)

											
										
										
											2022-05-17 09:24:14 +03:00
+								- PHP
 								  - [Importing from phpspy or sj-i/php-profiler](https://github.com/sj-i/php-profiler/pull/101)
-												Update README.md
											
										
										
											2018-09-26 23:38:36 +03:00
+								- Go
 								  - [Importing from pprof](https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go))
-												Add pyspeedscope & flamescope to README
											
										
										
											2019-10-07 01:10:00 +03:00
+								- Rust
 								  - [flamescope](https://github.com/coolreader18/flamescope)
-												Update README.md to link to wiki pages for import instructions

Fixes #115
											
										
										
											2018-08-21 19:55:06 +03:00
+								- Native code
 								  - [Importing from Instruments.app](https://github.com/jlfwong/speedscope/wiki/Importing-from-Instruments.app) (macOS)
 								  - [Importing from `perf`](https://github.com/jlfwong/speedscope/wiki/Importing-from-perf-(linux)) (linux)
-												Update README.md
											
										
										
											2019-10-16 10:15:06 +03:00
+								- [Importing from .NET Core](https://github.com/jlfwong/speedscope/wiki/Importing-from-.NET-Core)
-												Haskell GHC JSON format support (fixes #182) (#183)

Fixes #182 by adding support for importing the JSON profiling format created by GHC's built in profiling support when the executable is passed the `-pj` option. Produces a profile group containing both a time and allocation profile.

Unfortunately, GHC doesn't provide the raw sample information to get the time view to be useful, so only left heavy and sandwich are useful.

Includes a test profile, and I've also tested it on a more real large 2MB profile file in the UI and it works great.

I also modified the Readme to link to a wiki page I'm unable to create, but that should have something like this content copy-pasted into it:

# Importing from Haskell

GHC provides built in profiling support that can export a JSON file.
In order to do this you need to compile your executable with profiling
support and then pass the `-pj` RTS flag to the executable.

This will produce a `my-binary.prof` file in the current directory which
you can import into speedscope.

## Using GHC

See the [GHC manual page on profiling](https://downloads.haskell.org/~ghc/latest/docs/html/users_guide/profiling.html)
for more extensive information on the command line flags available.

```
$ ghc -prof -fprof-auto -rtsopts Main.hs
$ ./Main +RTS -pj -RTS
```

## Using Stack

### With executables

```
$ stack build --profile
$ stack exec -- my-executable +RTS -pj -RTS
```

### With tests

```
stack test --profile --test-arguments "+RTS -pj -RTS"
```
											
										
										
											2018-10-29 19:37:11 +03:00
+								- [Importing from GHC (Haskell)](https://github.com/jlfwong/speedscope/wiki/Importing-from-Haskell)
-												Update README.md to link to wiki pages for import instructions

Fixes #115
											
										
										
											2018-08-21 19:55:06 +03:00
+								- [Importing from custom sources](https://github.com/jlfwong/speedscope/wiki/Importing-from-custom-sources)
-												Update README.md
											
										
										
											2018-08-21 19:55:27 +03:00
+								Contributions to add support for additional formats are welcome! See issues with the ["import source" tag](https://github.com/jlfwong/speedscope/issues?q=is%3Aissue+is%3Aopen+label%3A%22import+source%22).
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
 								## 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.
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
 								## Views
 								### 🕰Time Order
-												Update README.md
											
										
										
											2018-08-23 18:15:59 +03:00
+								![Detail View](https://user-images.githubusercontent.com/150329/42108613-e6ef6d3a-7b8f-11e8-93d4-541b2cb93fe5.png)
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
-												Update README.md
											
										
										
											2018-08-23 19:22:24 +03:00
+								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".
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
-												Update README.md
											
										
										
											2018-08-23 18:15:59 +03:00
+								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.
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								### ⬅️Left Heavy
-												Update README.md
											
										
										
											2018-08-23 18:15:59 +03:00
+								![Left Heavy View](https://user-images.githubusercontent.com/150329/44534434-a05f8380-a6ac-11e8-86ac-e3e05e577c52.png)
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
 								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.
-												Create README.md
											
										
										
											2017-12-08 10:51:15 +03:00
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
+								### 🥪 Sandwich
-												Update README.md
											
										
										
											2018-08-23 18:15:59 +03:00
+								![Sandwich View](https://user-images.githubusercontent.com/150329/42108467-76a57baa-7b8f-11e8-815f-1df7b6ac3ede.png)
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
-												Fix typo in README (#360)


											
										
										
											2021-08-10 09:20:20 +03:00
+								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.
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
+								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.
-												Update README.md with info about recursion collapsing and table view
											
										
										
											2018-06-22 00:00:16 +03:00
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								## Navigation
-												Create README.md
											
										
										
											2017-12-08 10:51:15 +03:00
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								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".
-												Update README.md
											
										
										
											2018-01-01 21:19:39 +03:00
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								### Minimap Navigation
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
 								* Scroll on either axis to pan around
 								* Click and drag to narrow your view to a specific range
-												Create README.md
											
										
										
											2017-12-08 10:51:15 +03:00
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								### Stack View Navigation
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
 								* 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
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
+								* Click on a frame to view summary statistics about it
-												Update README.md
											
										
										
											2017-12-08 10:51:48 +03:00
-												Update README.md
											
										
										
											2018-01-08 06:16:07 +03:00
+								### Keyboard Navigation
-												Support importing from instruments via deep copy (#33)

Instruments has a complex binary file format. If we're interested in just having a nice flamegraph display of the contents and don't care too much about time ordering or symbol file locations, then we can just grab the information we need from the clipboard rather than deal with the binary file format. This also avoids needing to deal with multiple processes or multiple threads.

This PR contains 2 compressed `.trace` files. In each, if you select the top row in the call tree view and hit "Cmd+Shift+C" or go to "Edit -> Deep Copy", then paste into speedscope, you should get the corresponding flamechart.

## Allocations Profile

![image](https://user-images.githubusercontent.com/150329/39796943-5d900c88-530e-11e8-8dea-fa0a44888a64.png)

![image](https://user-images.githubusercontent.com/150329/39796949-65f6a9f4-530e-11e8-8509-64816cebe74c.png)

## Time Profile

![image](https://user-images.githubusercontent.com/150329/39796956-6fd88776-530e-11e8-9978-14aba8e883e1.png)

![image](https://user-images.githubusercontent.com/150329/39796973-8983189e-530e-11e8-8d82-92183c8590f6.png)
											
										
										
											2018-05-09 08:27:31 +03:00
 								* `+`: 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
-												Upgrade the "Table view" to a "Sandwich" view (#73)

![image](https://user-images.githubusercontent.com/150329/41837387-25417bae-7812-11e8-83cb-d3e6782b734e.png)

This provides information about the caller & callees of individual functions selected in the table view.
											
										
										
											2018-06-29 22:06:19 +03:00
+								* `3`: Switch to the "Sandwich" view
-												Update README.md with info about recursion collapsing and table view
											
										
										
											2018-06-22 00:00:16 +03:00
+								* `r`: Collapse recursion in the flamegraphs
-												Specify file format for speedscope (#83)

This defines a JSON-based file format for speedscope.

The motivation for is primarily two things:
1. To enable others to write tools to output profiles which can be read by speedscope
2. To enable others to write tools to handle the output of speedscope, leveraging the variety of importers that speedscope supports

Fixes #65 
											
										
										
											2018-07-08 04:37:28 +03:00
+								* `Cmd+S`/`Ctrl+S` to save the current profile
 								* `Cmd+O`/`Ctrl+O` to open a new profile
-												Add support for profiles w/ multiples processes & threads (#130)

More broadly, this just supports multiple profiles loaded into the editor in the same time, which supports import from profiles which are multithreaded by importing each thread as a different profile.

For now, the only two file formats that support multiprocess import are Instruments .trace files and speedscope's own file format

In the process of doing this, I refactored the container code considerably and extracted all the dispatch calls into containers rather than them being part of the non-container view code. This is nice because it means that views don't have to be aware of which Flamechart they are or which profile index is being operated upon.

Fixes #66
Fixes #82
Fixes #91

											
										
										
											2018-08-12 08:01:52 +03:00
+								* `n`: Go to next profile/thread if one is available
 								* `p`: Go to previous profile/thread if one is available
-												Introduce a profile selector dropdown (#282)

This adds much better UI for selecting different profiles within a single import.

![Kapture 2020-05-30 at 21 34 06](https://user-images.githubusercontent.com/150329/83344564-595ce400-a2bd-11ea-8306-e5d8f647b65e.gif)

You can now hover over the middle of the toolbar or hit `t` on your keyboard to bring up the profile selector. From there, you can use fuzzy-find to switch to the profile you want, and hit "enter" to select it. The up and down arrow keys can be used while the profile selector filter input is focused to move through the list of profiles.

I think the "next" and "prev" buttons are now totally useless, so I removed them.

Fixes #167
											
										
										
											2020-05-31 07:42:27 +03:00
+								* `t`: Open the profile/thread selector if available
-.9.0

											
										
										
											2020-08-05 11:02:17 +03:00
+								* `Cmd+F`/`Ctrl+F`: to open search. While open, `Enter` and `Shift+Enter` cycle through results
-												Update README.md
											
										
										
											2018-08-23 18:07:03 +03:00
 								## Contributing
 								Do you want to contribute to speedscope? Sweeeeet. Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on setting up your dev environment.