console: timeStamp() statische Methode
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die statische Methode console.timeStamp() fügt ein einzelnes Markierungszeichen zu dem Leistungswerkzeug des Browsers hinzu (Firefox Bug 1387528, Chrome). Dies ermöglicht es Ihnen, einen Punkt in Ihrem Code mit den anderen im Zeitstrahl aufgezeichneten Ereignissen wie Layout- und Paint-Ereignissen zu korrelieren.
Sie können optional ein Argument angeben, um den Zeitstempel zu beschriften, und diese Beschriftung wird dann neben der Markierung angezeigt.
Einige Browser haben diese console.timeStamp()-Methode weiterentwickelt, um zusätzliche, optionale Parameter bereitzustellen, die als Teil ihrer Erweiterungs-API in Leistungsdiagrammen sichtbar werden. Siehe die Dokumentation zur Chrome-Erweiterungs-API für weitere Informationen.
Syntax
console.timeStamp(label);
console.timeStamp(label, start, end, trackName, trackGroup, color, data);
Parameter
colorOptional-
Ein String für die Anzeigefarbe des Eintrags. Muss einer der folgenden Werte sein:
"primary","primary-light","primary-dark","secondary","secondary-light","secondary-dark","tertiary","tertiary-light","tertiary-dark","error". dataOptional-
Ein Objekt mit zusätzlichen anzuzeigenden Daten. URLs können von einigen Browsern automatisch in Links umgewandelt werden.
Hinweis:
Die Unterstützung für den data-Parameter variiert zwischen den verschiedenen Browsern und ihren DevTools-Implementierungen. Beispielsweise kann in einigen Versionen von Chrome diese Daten im Leistungspanel nicht angezeigt werden.
endOptional-
Ein String oder ein Zeitstempel (
DOMHighResTimeStamp), der auf ein zuvor definiertestimeStamp-Label verweist und als Endzeit verwendet wird. labelOptional-
Beschriftung für den Zeitstempel.
startOptional-
Ein String oder ein Zeitstempel (
DOMHighResTimeStamp), der auf ein zuvor definiertestimeStamp-Label verweist und als Startzeit verwendet wird. trackNameOptional-
Der Name der benutzerdefinierten Spur, die verwendet wird, um die Zeitstempeldaten anzuzeigen.
trackGroupOptional-
Die Gruppe der benutzerdefinierten Spur, die verwendet wird, um die Zeitstempeldaten anzuzeigen.
Rückgabewert
Kein Wert (undefined).
Beispiele
Grundlegende Verwendung
console.timeStamp("marker 1");
Verwendung der Erweiterungs-API, um reichere Details für die Anzeige bereitzustellen
// 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)
);