paulirish / trace.cafe

easy webperf trace sharing

trace.cafe - easy webperf trace sharing

https://trace.cafe/

Biggups to the team behind https://profiler.firefox.com/ who've enabled Firefox folks to do this for years.

And shoutout to Artem (and me, lol), who worked on this project's predecessor: https://chromedevtools.github.io/timeline-viewer/

Development

Probably npm install -g firebase-tools

firebase use tum # optional

yarn watch # or yarn build

yarn serve

# deploying
yarn deploy

TODO

• motion grpahics animation on drop?
• navigation transition API?
• create nanoid as hash of content. (I experimented with https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string but it gives a ~40 char string. and i'm too lazy to find a determinisitic hashing nanoid thing that will stay short.)

trace.cafe's Issues

Resolve OOMing with multiple tabs open

Yeah if you open a dozen trace cafes you get lots of trace cafe renderers but one huge devtools frontend process
With a main thread that drowns

The iframe attributes credentialless referrerpolicy nor sandbox seem to affect the process sharing behavior. will need to see if there's another mechanism we can use to get them split into separate processes.

That and/or fix the large memory consumption. :)

Can't download traces easily

You can't right click the trace viewer at all for some reason, and you can't choose "Save Profile..." to download the trace. I have to keep opening the dev tools on trace.cafe and then finding the resource load to download the trace itself.

screenshot checkbox missing

reported upstream https://bugs.chromium.org/p/chromium/issues/detail?id=1487369

Save links to the most recent N traces in client storage

No auth is needed, just save the last N (maybe 50-100?) uploaded trace links and their creation date in localStorage and show the links when going to trace.cafe. I frequently need to reference a bunch of traces I uploaded yesterday but I can't find them easily.

Preserve CPU throttling config

I recorded a trace with 4x throttling but the throttling settings in the UI appear as "No throttling" (example)

Get /t/ url during upload

It'd be great to get the new url set during upload so I can quickly go paste it wherever and not wait the 10-20 seconds.

Might have to have it like /t/tHisId324#uploading to make that obvious..

DT is broken in Safari

TypeError: Illegal constructor

cuz no support for constructable stylesheets: new CSSStyleSheet()

Safari Tech Preview seemingly has support...

---

However Safari TP then breaks on typeerror: i.setIconType is not a function . I think thats cuz its a subclass of a native HTMLElement and perhaps Safari TP doesn't support that:

DT is broken in incognito

Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

breaks in incognito

Uncaught (in promise) DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    host.js:1
    at f.getPreferences (https://chrome-devtools-frontend.appspot.com/serve_rev/@030cc140435b0152645522b9864b75cac6c0a854/core/host/host.js:1:11517)

trace.cafe doesn't use sourcemaps

If sourcemaps are available devtools will use it to rename functions in the traces, but when uploaded to trace.cafe the sourcemaps never work. It would be much easier to use trace.cafe if it loaded sourcemaps to show unminified names.

Set up DNS record for bucket so trace.cafe URL can directly access s3 contents

I know you're using firebase, but this should be possible in general for any S3 service. for example, Digital Ocean Spaces lets you do this

such that a entry in the bucket can be accessed via a subdomain. example: https://data.zquestclassic.com/manifest.json is the key manifest.json in the bucket, etc

see https://stackoverflow.com/questions/46902359/custom-domain-name-with-ssl-on-firebase-storage

---

edit: https://cloud.google.com/storage/docs/hosting-static-website-http & https://stackoverflow.com/a/45908563/89484 are solutions aside from the load balancer one... ah but you need load balancer for https. https://cloud.google.com/storage/docs/hosting-static-website

Feature req: comparison

https://chromedevtools.github.io/timeline-viewer/ has comparison functionality. (Click the 'split view' link, then dragndrop in your traces).
It also synchronizes the zoomed timescale across the split, making for even comparison. (At least, it sync's when you brush-select on the overview, though not other zoom gestures)

It'd be great to have similar functionality here. But since CDT is in an iframe, it's going to be a different story than the monkeypatch injection I did in timeline-viewer.

Perhaps with a conservative postMessage protocol, CDT and t.c can coordinate... 🤔

---

Also:

Download broke

It broke when I rolled from 112 to 117.
It's cuz of https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4381791

exception:

Error: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker.

chromium source: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/modules/file_system_access/global_file_system_access.cc;l=189;drc=dbf0295f91fe41035e15d8d6d9e7cdc7f674d2a5

---

Will either have to check for this case within dt or trace-cafe can provide its own download button.

Feature req: deep link to a specific item

Usecase: deep link to the task that explains a high INP.
Bonus usecase: It's multiple tasks and we somehow focus/annotate the group/timerange.

Perf panel can find/focus specific events on the flamechart. (Ctrl-F, searchterm, enter).
Though AFAIK, no revealers are set up for other panels to reference individual items.

Again, perhaps with a postMessage protocol, trace.cafe could offer permalinks to specific events within specific traces. Not sure how we'd establish the identity of focusable items....

(Filed after @brendankenny proposed the idea.)

Support uploading proto traces

#9 adds support for viewing JSON traces in the perfetto UI

but.. we should be able to view proto traces in perfetto UI and toggle to view the JSON export of it in devtools.