https://bl.ocks.org/chromy/170c11ce30d9084957d7f3aa065e89f8
官方网站
https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui
源代码
<!doctype html>
<html lang="en-us">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<body>
<style>
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; }
</style>
<select id="source" size=4>
<option selected>https://storage.googleapis.com/perfetto-misc/example_android_trace_15s</option>
<option>https://storage.googleapis.com/perfetto-misc/example_chrome_trace_10s.json</option>
<option>https://storage.googleapis.com/perfetto-misc/example_chrome_trace_4s_1.json</option>
</select>
<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 = 'https://ui.perfetto.dev';
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 ui.perfetto.dev\n;
openTrace(arrayBuffer, traceUrl);
}
function openTrace(arrayBuffer, traceUrl) {
const win = window.open(ORIGIN);
if (!win) {
btnFetch.style.background = '#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';
return;
}
const timer = setInterval(() => win.postMessage('PING', ORIGIN), 50);
const onMessageHandler = (evt) => {
if (evt.data !== 'PONG') return;
// We got a PONG, the UI is ready.
window.clearInterval(timer);
window.removeEventListener('message', onMessageHandler);
const reopenUrl = new URL(location.href);
reopenUrl.hash = `#reopen=${traceUrl}`;
win.postMessage({
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);
fetchAndOpen(traceUrl);
}
btnFetch.onclick = () => fetchAndOpen(document.getElementById('source').value);
</script>
</body>
</html>
