Get started with tracing.js CDN
MIT licensed
Tracing.js: Lightweight library for real-time display of interactive web page performance profiles.
Tags:- tracing
- debug
- development
- javascript
Stable version
Copied!
How to start using tracing.js CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with tracing.js CDN - cdnhub.io</title>
<script src="https://cdn.cdnhub.io/tracing.js/1.2.1/tracing.min.js"></script>
</head>
<body>
<button id="record">Start Recording</button>
<button id="stop">Stop Recording</button>
<button id="download">Download Trace</button>
<script>
let recorder;
const recordButton = document.getElementById('record');
const stopButton = document.getElementById('stop');
const downloadButton = document.getElementById('download');
recordButton.addEventListener('click', () => {
recorder = new tracing.Recorder('traceCanvas');
recorder.start();
recordButton.disabled = true;
stopButton.disabled = false;
});
stopButton.addEventListener('click', () => {
recorder.stop();
recordButton.disabled = false;
stopButton.disabled = true;
downloadButton.disabled = false;
});
downloadButton.addEventListener('click', () => {
recorder.save('trace.json');
});
const traceCanvas = document.createElement('canvas');
traceCanvas.id = 'traceCanvas';
document.body.appendChild(traceCanvas);
</script>
</body>
</html>