console.count() — Methode · JavaScript-Referenz

Signatur

console.count(label)

Beschreibung

Die statische Methode console.count() führt für jedes Label einen eigenen internen Zähler. Bei jedem Aufruf wird der Zähler für dieses Label um eins erhöht und in der Form label: n in der Konsole ausgegeben. Ohne Argument wird das Label "default" verwendet.

Die Methode eignet sich gut zum schnellen Debuggen: Man sieht, wie oft eine Funktion aufgerufen wird, wie oft ein Event-Handler auslöst, wie oft eine React-Komponente neu rendert oder wie oft ein bestimmter Zweig in einer Schleife durchlaufen wird. Dafür muss man keine eigene Zählvariable anlegen und später wieder entfernen.

Mit console.countReset() setzt man den Zähler eines Labels wieder auf null. Die Zähler gelten jeweils für eine Konsole bzw. einen Ausführungskontext: Ein Neuladen der Seite oder ein neuer Worker beginnt wieder bei null.

Parameter

Name	Typ	Default	Beschreibung
$label	string	"default"	Name des Zählers. Andere Werte als Strings werden in einen String umgewandelt (z. B. `42` → `"42"`). Wenn das Label fehlt oder `undefined` ist, wird `"default"` verwendet.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Die Ausgabe landet nur in der Konsole.

Beispiele

Einfaches Zählen mit und ohne Label

console.count();
console.count();
console.count('api');
console.count();
console.count('api');

default: 1 default: 2 api: 1 default: 3 api: 2

Funktionsaufrufe je Kategorie zählen

const handleRequest = (method) => {
  // Eigener Zähler pro HTTP-Methode
  console.count(`Request ${method}`);
};

['GET', 'POST', 'GET', 'DELETE', 'GET'].forEach(handleRequest);

Request GET: 1 Request POST: 1 Request GET: 2 Request DELETE: 1 Request GET: 3

Event-Häufigkeit messen und Zähler zurücksetzen

const onScroll = () => console.count('scroll');
window.addEventListener('scroll', onScroll, { passive: true });

// Nach 2 Sekunden auswerten und Zähler zurücksetzen
setTimeout(() => {
  console.count('scroll');       // zeigt aktuellen Stand +1
  console.countReset('scroll');  // wieder auf 0
  window.removeEventListener('scroll', onScroll);
}, 2000);

scroll: 1 scroll: 2 ... scroll: 57

Re-Renders einer Komponente beobachten

const renderList = (items) => {
  console.count('renderList');
  return items.map((item) => `<li>${item}</li>`).join('');
};

renderList(['a']);
renderList(['a', 'b']);

renderList: 1 renderList: 2

// Wichtig · Fallstricke

Label wird zu einem String: console.count(1) und console.count('1') erhöhen denselben Zähler. Objekte werden zu "[object Object]" und teilen sich daher alle einen Zähler. Für Objekte ist die Methode also ungeeignet.
Kein Rückgabewert: Den Zählerstand kann man im Programm nicht auslesen. Wer den Wert im Code braucht, muss selbst zählen, z. B. mit einer Map.
Zurücksetzen: Nur mit console.countReset(label). Wird ein Label zurückgesetzt, das es nicht gibt, erscheint eine Warnung wie Count for 'x' does not exist.
Performance: Bei sehr häufigen Events (scroll, mousemove, requestAnimationFrame) kann die viele Konsolenausgabe die DevTools deutlich verlangsamen. Vor dem Produktiveinsatz entfernen oder beim Build herausfiltern lassen (z. B. mit drop_console in Terser).
Kompatibilität: Wird von allen modernen Browsern unterstützt. In Node.js wird auf stdout ausgegeben. Das Ausgabeformat kann sich je nach Umgebung leicht unterscheiden.
Frames und Worker: Jeder iframe und jeder Web Worker hat eigene Zähler.

Siehe auch

console.countReset() console.log() console.time() console.trace() console.group() console console.clear()