Skip to content

Instantly share code, notes, and snippets.

Forked from primiano/open_with_perfetto_ui.html
Last active May 16, 2022 12:19
What would you like to do?
<!doctype html>
<html lang="en-us">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
pre {
border: 1px solid #eee;
margin: 10px 0;
font-family: monospace;
font-size: 10px;
min-height: 100px;
body > * { margin: 20px; }
#btn_fetch { font-size: 14px; }
<select id="source" size=4>
<option selected></option>
<button type="button" id="btn_fetch">Fetch and open trace</button>
<pre id="logs" cols="80" rows="20"></pre>
<script type="text/javascript">
const ORIGIN = '';
const logs = document.getElementById('logs');
const btnFetch = document.getElementById('btn_fetch');
async function fetchAndOpen(traceUrl) {
logs.innerText += `Fetching trace from ${traceUrl}...\n`;
const resp = await fetch(traceUrl);
// Error checcking is left as an exercise to the reader.
const blob = await resp.blob();
const arrayBuffer = await blob.arrayBuffer();
logs.innerText += `fetch() complete, now passing to\n`;
openTrace(arrayBuffer, traceUrl);
function openTrace(arrayBuffer, traceUrl) {
const win =;
if (!win) { = '#f3ca63';
btnFetch.onclick = () => openTrace(arrayBuffer);
logs.innerText += `Popups blocked, you need to manually click the button`;
btnFetch.innerText = 'Popups blocked, click here to open the trace file';
const timer = setInterval(() => win.postMessage('PING', ORIGIN), 50);
const onMessageHandler = (evt) => {
if ( !== 'PONG') return;
// We got a PONG, the UI is ready.
window.removeEventListener('message', onMessageHandler);
const reopenUrl = new URL(location.href);
reopenUrl.hash = `#reopen=${traceUrl}`;
perfetto: {
buffer: arrayBuffer,
title: 'The Trace Title',
url: reopenUrl.toString(),
}}, ORIGIN);
window.addEventListener('message', onMessageHandler);
// This is triggered when following the link from the Perfetto UI's sidebar.
if (location.hash.startsWith('#reopen=')) {
const traceUrl = location.hash.substr(8);
btnFetch.onclick = () => fetchAndOpen(document.getElementById('source').value);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment