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 marker to a performance recording in developer tools that support it, such as the Chrome Performance panel and Firefox Profiler. This lets you correlate a point in your code with recorded events such as layout and painting.
Syntax
console.timeStamp(label)
console.timeStamp(label, start, end, trackName, trackGroup, color, data)
Parameters
labelOptional-
Label for the timestamp.
startOptional-
A string referencing a previously defined
timeStamplabel or a timestamp (DOMHighResTimeStamp) to be used as the start time. endOptional-
A string referencing a previously defined
timeStamplabel or a timestamp (DOMHighResTimeStamp) to be used as the end time. trackNameOptional-
The name of the custom track used to display the timestamp data
trackGroupOptional-
The group of the custom track used to display the timestamp data
colorOptional-
A string for the display color of the entry. Must be one of
"primary","primary-light","primary-dark","secondary","secondary-light","secondary-dark","tertiary","tertiary-light","tertiary-dark","error". dataOptional-
An object with additional data to display. URLs may automatically be turned into links by some browsers.
Return value
None (undefined).
Description
To see the marker, start a performance recording before the call occurs. Marker recording and display depend on the browser and its profiling tool; the presence of console.timeStamp() does not by itself guarantee a visible marker.
This method does not log elapsed time to the console or create a PerformanceEntry. Use console.time() and console.timeEnd() for console timers, or performance.mark() and performance.measure() for standard entries that your application can observe and read.
Examples
Basic usage
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)
);