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
colorOptional Experimental-
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". dataOptional Experimental-
An object with additional data to display. URLs may automatically be turned into links by some browsers.
endOptional Experimental-
A string referencing a previously defined
timeStamplabel or a timestamp (DOMHighResTimeStamp) to be used as the end time. labelOptional-
Label for the timestamp.
startOptional Experimental-
A string referencing a previously defined
timeStamplabel or a timestamp (DOMHighResTimeStamp) to be used as the start time. trackNameOptional Experimental-
The name of the custom track used to display the timestamp data
trackGroupOptional Experimental-
The group of the custom track used to display the timestamp data
Return value
None (undefined).
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)
);
Browser compatibility
Loading…