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)
This commit is contained in:
Jamie Wong
2018-05-08 22:27:31 -07:00
committed by GitHub
parent 84504f650a
commit 2b9f7ffe1b
11 changed files with 305 additions and 38 deletions

View File

@@ -1,5 +1,6 @@
# 🔬speedscope
An interactive web-based viewer for [sampling profiles][0]. An alternative viewer for [FlameGraphs][1].
A fast, interactive web-based viewer for [sampling profiles][0]. 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.
@@ -9,15 +10,39 @@ Given raw profiling data, speedscope allows you to interactively explore the dat
[1]: https://github.com/brendangregg/FlameGraph
# 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.
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.
## Supported file formats
## Supported file formats:
1. The folded stack format output by the FlameGraph scripts do: https://github.com/brendangregg/FlameGraph#2-fold-stacks. Example: https://github.com/jlfwong/speedscope/blob/master/sample/perf-vertx-stacks-01-collapsed-all.txt
2. The timeline format output by Chrome developer tools: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#save.
3. The `.cpuprofile` format output by Chrome developer tools JavaScript profiler, useful for viewing flamecharts generated by Node.js applications: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
4. The `profile.json` format output by Firefox developer tools https://developer.mozilla.org/en-US/docs/Tools/Performance
### 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.
### `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
@@ -38,19 +63,22 @@ In the "Left Heavy" view, identical stacks are grouped together, regardless of w
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
* 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
* 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 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
* `+`: 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