jlfwong / speedscope Goto Github PK
View Code? Open in Web Editor NEW๐ฌ A fast, interactive web-based viewer for performance profiles.
Home Page: https://www.speedscope.app
License: MIT License
๐ฌ A fast, interactive web-based viewer for performance profiles.
Home Page: https://www.speedscope.app
License: MIT License
There is Google protobuf-based file format used for profilers in Google tooling, and is more specifically used by go tool pprof
.
https://github.com/google/pprof/tree/master/proto
https://blog.golang.org/profiling-go-programs
What's the license for this repository? I don't see it in the README or in the repo.
It'd be great to add a LICENSE file to the repository to make this clear.
This project looks really nice!
It would be nice if you could run speedscope /path/to/profile.json
and have it either automatically open in your browser of choice or boot up speedscope in an electron shell. This would make integration with other tools potentially much easier.
The following profile:
a;b 1
a 3
a;b 5
Should contain 3 CallTreeNode
objects. But it currently contains 2: one for a
with self-weight 3, and one for b
with self-weight 6.
Chrome has a simplified trace format which is a json list of trace dictionaries. This is the main format we generate internally at our company, so it would be nice if speedscope could render them.
This test trace file loads in chrome://tracing
while it gives an error in speedscope.
Ideally I'd be able to zoom out using the browser's zoom to be able to compress deeper traces. Right now the UI gets really messed up if you do that. It looks like there are two separate layers that are both the wrong scale in different ways?
It looks like Chrome's latest release changed the format again. Traces captured in Chrome Canary cannot be loaded.
In the DevTools (and about:tracing) we allow panning Y axis with A/D and zooming Y axis with W/S. I've come to heavily rely on that, so I'd lurve if it was supported here, too.
Greattt work on this app. So nice.
Export can lock up speescope for a while. It should be easy enough to pop up a progress bar.
If you do multiple runs of a trace, it seems like speed scope only renders the last run? Or kind of merges them together? It's kind of hard to tell.
Here is an example trace on safari.
Maybe a run selector needs to be added?
https://kcachegrind.github.io/html/CallgrindFormat.html
This is also a common format output by some other profiles, like XDebug for PHP (https://xdebug.org/docs/profiler)
When trying to open an instruments time tracing trace, speedscope fails to load it with an error. Pasting in a deep copy of the same trace works. The error that shows up in the JS console is just 'undefined'
Here is an example trace that fails. I created it by tracing xcode 9.4 for a few seconds.
xcode.trace.zip
The viewport & selection should be maintained for the flamegraphs, and the sort order, scroll offset, and selection should be maintained for the sandwich view
This should be helpful in cases where an expensive function shows up in many different stacks (e.g. if you had an expensive function used at various recursive depths in a compiler).
Inspired by the tree view in KCacheGrind: https://kcachegrind.github.io/html/Shot3.html
For a complex, heavily multi-threaded app, the logic that assumes that the thread with the most samples is the main thread can be mislead.
Sadly, I don't have a concrete suggestion for something better. I notice that main appears to usually be thread id '4', but there has to be something less hacky.
Just wanted to open this issues to start a discussion about this.
In time ordered view, it would be useful to be able to crop along the time axis to the current viewport. This would allow for more meaningful statistics around where the time is going within some specific time span (e.g. a single request or a single frame).
Maintaining the viewport between the two views isn't helpful, and sometimes results in buggy behavior when the bounds of the two views are different because e.g. the left heavy view drops idle time from the profile
First, it would really help if we could simplify how time > 1 minute is shown. It's hard to parse 1.20min as 1:12 (have to constantly multiply the fraction by 60 to understand seconds).
Second, only 2 decimals are shown, once you pass 1 minute, instead of 10ms as the finest grain now you only see 0.01 minutes (600ms) as the finest grain. To improve this it would be best if we could get a mm:ss.iii format (minutes:seconds.millisconds) instead. You can look at the timeline in Instruments to see a demo of what this would look like.
Thanks!
This should be doable via a service worker (https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
Since this app can read many trace formats, it would be pretty cool if we could have an export function into some sort of common JSON format. That way we can use it to convert things like proprietary instruments traces into open chrome traces so we can use it with other tools.
It looks like someone else has already done the hard work of figuring out the file format! https://rhye.org/post/android-profiling-flamegraphs/
I bought speedscope.app, might as well use it!
There are no unit tests for this repository yet!
Some of the areas that should be pretty easy to write tests for:
importFromChromeTimeline
importFromChromeCPUProfile
importFromStackprof
importFromBGFlameGraph
Profile
classFlamechart
classLRUCache
classVec2
classAffineTransform
classRect
classTrickier tests that would require some form of visual diffing + a GPU (or CPU implementation of gl like headless-gl
, but are otherwise pretty stable with well defined interfaces
ViewportRectangleRenderer
TextureRenderer
RectangleBatchRenderer
FlamechartRenderer
And then there's the matter of tests for the UI itself
A dotted blue line should suffice
#61 was caused by me zooming in really far at the end of the run to try to measure the overall time since that's not displayed in the UI anywhere. Displaying that in the UI somewhere would mean I wouldn't have hit this bug in the first place :)
I'm making a chrome devtools extension to surface the results of server-side profiling, and I tried hacking speedscope in as a React component, but I ran into some issues. From my perspective, it would be great if I could install speedscope as a library and render it as a React component with the full text of the profile as a prop.
Here's a partial list of issues that would need to be addressed for this to happen:
npm link
the TypeScript into my node_modules and compile it with webpack, but that ran into various issues. If you want to avoid the React dependency (or peer dependency), you could ship a @speedscope/core
and separate @speedscope/react
package, or something like that.So at least for now, it looks like an iframe (or external window) is the nicest way to use speedscope, and from what I can see that works fine. But it would be cool if it could be more integrated into a larger tool.
The developer tools in Chrome's latest release are super buggy, so I'd like to use Firefox for profiling instead. I can't find any documentation about the format unfortunately. It looks like it's JSON-based.
It would be awesome to get data from Instruments.app into speedscope to get nice visualizations out of XCode
https://github.com/mapbox/flamebearer should be a helpful reference
It seems like subpixel text anti-aliasing is disabled for non-opaque canvases: https://stackoverflow.com/questions/4550926/subpixel-anti-aliased-text-on-html5s-canvas-element
If all rendering was switched to WebGL rather than a combination of WebGL + Canvas, this could be solved by creating a text atlas with glyphs that are already subpixel AA'd
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.