console: timeStamp() static method

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

Note: This feature is available in Web Workers.

The console.timeStamp() static method adds a single marker to the browser's Performance tool (Firefox bug 1387528, Chrome). This lets you correlate a point in your code with the other events recorded in the timeline, such as layout and paint events.

You can optionally supply an argument to label the timestamp, and this label will then be shown alongside the marker.

Some browsers have further extended this console.timeStamp() method to allow additional, optional parameters to be provided as part of its extensibility API that surfaces these in performances traces. See the Chrome's extensibility API documentation for more information.

Syntax

console.timeStamp(label);
console.timeStamp(label, start, end, trackName, trackGroup, color, data);

Parameters

color Optional: A string for the display colour of the entry. Must be one of "primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark", "tertiary", "tertiary-light", "tertiary-dark", "error".
data Optional: An object with additional data to display. URLs may automatically be turned into links by some browsers.

Note: Support for the data parameter varies across browsers and their DevTools implementations. For example, in some versions of Chrome, this data may not appear in the Performance panel.

end Optional: A string referencing a previously defined timeStamp label or a timestamp (DOMHighResTimeStamp) to be used as the end time.
label Optional: Label for the timestamp.
start Optional: A string referencing a previously defined timeStamp label or a timestamp (DOMHighResTimeStamp) to be used as the start time.
trackName Optional: The name of the custom track used to display the timestamp data
trackGroup Optional: The group of the custom track used to display the timestamp data

console.timeStamp("marker 1");

Using the Extensibility API to provide richer details for display

// 1. Create a duration event with rich data
const start = performance.now() - 150;
const end = performance.now() - 20;

const durationData = {
  processingTime: `${end - start}ms`,
  info: "Check this URL: https://example.com for more.",
  metrics: {
    items: 5,
    isCached: true,
  },
};

console.timeStamp(
  "My Timed Task", // label
  start, // startTime
  end, // endTime
  "Tasks", // trackName
  "My Extension", // trackGroup
  "tertiary", // color
  durationData, // data (object)
);

// 2. Create an instant event with a deep link for a DevTools extension
const linkData = {
  url: "ext://resource/123",
  description: "View Resource 123",
  otherDetail: "This data also appears in the JSON viewer",
};

console.timeStamp(
  "Event with Link", // label
  performance.now(), // startTime (instant)
  undefined, // endTime (instant)
  "Tasks", // trackName
  "My Extension", // trackGroup
  "primary-light", // color
  linkData, // data (object)
);