0.2.0 • Published 4 months ago
code-heatmap v0.2.0
CodeHeatmap
A tool that generates real-time heatmaps of JavaScript execution to show performance bottlenecks.
Installation
npm install code-heatmapUsage
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