CodeHeatmap

A tool that generates real-time heatmaps of JavaScript execution to show performance bottlenecks.

Installation

npm install code-heatmap

Usage

Basic Usage

import CodeHeatmap from 'code-heatmap';

// Initialize the heatmap
const heatmap = new CodeHeatmap({
  targetSelector: 'body',
  colorScale: ['#e0f7fa', '#80deea', '#26c6da', '#00acc1', '#0097a7', '#00838f', '#006064'],
  updateInterval: 1000
});

// Start monitoring
heatmap.start();

// Later, to stop monitoring
heatmap.stop();

CDN Usage

<script src="https://unpkg.com/code-heatmap@0.1.0/dist/code-heatmap.js"></script>
<script>
  const heatmap = new CodeHeatmap();
  heatmap.start();
</script>

Options

The CodeHeatmap constructor accepts an options object with the following properties:

| Option | Type | Default | Description | |--------|------|---------|-------------| | targetSelector | String | 'body' | CSS selector for the target element to monitor | | maxIntensity | Number | 100 | Maximum intensity value for the heatmap | | colorScale | Array | ['#e0f7fa', '#80deea', '#26c6da', '#00acc1', '#0097a7', '#00838f', '#006064'] | Array of colors for the heatmap | | updateInterval | Number | 500 | Interval in milliseconds for updating the visualization | | fadeTime | Number | 3000 | Time in milliseconds for fading out the heatmap | | samplingRate | Number | 10 | Sampling rate in milliseconds |

Methods

start()

Start monitoring JavaScript execution.

pause()

Pause monitoring without removing instrumentation.

stop()

Stop monitoring and remove instrumentation.

clear()

Clear collected data.

exportData()

Export collected data as JSON.

Advanced Usage

Script Instrumentation

To instrument scripts more thoroughly:

import { CodeHeatmap, ScriptInstrumenter } from 'code-heatmap';

const heatmap = new CodeHeatmap();
const instrumenter = new ScriptInstrumenter(heatmap);

// Instrument all scripts in the document
instrumenter.instrumentScripts();

// Start monitoring
heatmap.start();

License

MIT