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>

All versions