Signatur
Beschreibung
Die statische Methode console.timeStamp() fügt während einer laufenden Leistungsaufzeichnung eine Markierung in die Zeitleiste der Entwicklerwerkzeuge ein, zum Beispiel im Chrome-Panel Performance oder im Firefox-Profiler. So lässt sich ein Zeitpunkt im eigenen Code (etwa „Daten geladen“ oder „Rendering fertig“) direkt mit Netzwerk-, Layout-, Paint- und Script-Ereignissen vergleichen.
Anders als console.time()/console.timeEnd() misst timeStamp() keine Zeitspanne und gibt auch nichts in der Konsole aus. Die Markierung erscheint nur, wenn gerade eine Aufzeichnung läuft. Ohne offene Entwicklerwerkzeuge bzw. ohne laufenden Profiler hat der Aufruf praktisch keine Wirkung.
Die Methode eignet sich gut für schnelles, vorübergehendes Debuggen der Leistung. Für Messungen, die man auch im Code auswerten möchte (etwa per PerformanceObserver oder für die Überwachung echter Nutzer), sind die standardisierten Methoden performance.mark() und performance.measure() besser geeignet. Diese erscheinen ebenfalls in der Zeitleiste.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $label | string | Beschriftung der Markierung in der Zeitleiste. Fehlt sie, zeigen die Entwicklerwerkzeuge eine Markierung ohne Namen bzw. mit einem Standardnamen an. Andere Werte als Zeichenketten werden in eine Zeichenkette umgewandelt. |
Rückgabewert
undefined zurück. Die Markierung ist nur in der Leistungsaufzeichnung sichtbar.Beispiele
Einfache Markierung setzen
// Vorher im Performance-Panel die Aufzeichnung starten
console.timeStamp('App-Start');
const items = Array.from({ length: 100_000 }, (_, i) => i * 2);
console.timeStamp('Array erzeugt');Phasen eines Datenabrufs markieren
const loadUsers = async () => {
console.timeStamp('Fetch gestartet');
const response = await fetch('https://jsonplaceholder.typicode.com/users');
console.timeStamp('Antwort erhalten');
const users = await response.json();
console.timeStamp('JSON geparst');
const list = document.createElement('ul');
list.append(...users.map((u) => Object.assign(document.createElement('li'), { textContent: u.name })));
document.body.append(list);
console.timeStamp('DOM aktualisiert');
};
loadUsers();Mit sicherem Rückfall auf performance.mark()
const mark = (label) => {
if (typeof console.timeStamp === 'function') {
console.timeStamp(label);
}
// Standard-API: im Code auswertbar
performance.mark(label);
};
mark('render-start');
for (let i = 0; i < 1e6; i++); // Arbeit simulieren
mark('render-end');
performance.measure('render', 'render-start', 'render-end');
const [entry] = performance.getEntriesByName('render');
console.log(`Rendern dauerte ${entry.duration.toFixed(2)} ms`);// Wichtig · Fallstricke
- Nicht standardisiert:
console.timeStamp()gehört nicht zum Console-Standard der WHATWG. Wie die Markierung dargestellt wird, unterscheidet sich von Browser zu Browser. In Firefox war die Anzeige im neuen Profiler lange eingeschränkt (Bug 1387528). - Nur bei laufender Aufzeichnung sichtbar: Ohne aktiven Profiler geht die Markierung verloren. In der Konsole selbst wird nichts ausgegeben.
- Nicht im Code auswertbar: Die Zeitpunkte lassen sich nicht per JavaScript abfragen. Für Messungen, die man auswerten oder protokollieren will,
performance.mark()bzw.performance.measure()verwenden. - Node.js: Die Methode gibt es zwar, sie wirkt aber nur, wenn ein Inspector (z. B. Chrome DevTools über
--inspect) verbunden ist und aufzeichnet. - Aufrufe vor dem Produktiv-Build entfernen, da sie in engen Schleifen unnötig Rechenzeit kosten können.