Instrumenting JavaScript

There are multiple ways to use the profiler with JavaScript. There is the “JavaScript” profiler feature (via about:profiling), which enables stack walking for JavaScript code. This is most likely turned on already for every profiler preset.

In addition, markers can be created to specifically marker an instant in time, or a duration. This can be helpful to make sense of a particular piece of the front-end, or record events that normally wouldn’t show up in samples.

Note

This guide explains JavaScript markers in depth. To learn more about how to add a marker in C++, Rust or JVM please take a look at their documentation in Markers, Instrumenting Rust or Instrumenting Android respectively.

Markers in Browser Chrome

If you have access to ChromeUtils, then adding a marker is relatively easily.

// Add an instant marker, representing a single point in time
ChromeUtils.addProfilerMarker("MarkerName");

// Add a duration marker, representing a span of time.
const startTime = Cu.now();
doWork();
ChromeUtils.addProfilerMarker("MarkerName", startTime);

// Add a duration marker, representing a span of time, with some additional tex
const startTime = Cu.now();
doWork();
ChromeUtils.addProfilerMarker("MarkerName", startTime, "Details about this event");

// Add an instant marker, with some additional tex
const startTime = Cu.now();
doWork();
ChromeUtils.addProfilerMarker("MarkerName", undefined, "Details about this event");

Markers in Content Code

If instrumenting content code, then the UserTiming API is the best bet. performance.mark will create an instant marker, and a performance.measure will create a duration marker. These markers will show up under UserTiming in the profiler UI.

// Create an instant marker.
performance.mark("InstantMarkerName");

doWork();

// Measuring with the performance API will also create duration markers.
performance.measure("DurationMarkerName", "InstantMarkerName");