Signatur
Beschreibung
Die statische Methode console.profile() startet in den Entwicklerwerkzeugen des Browsers (z. B. im Performance-Panel von Firefox oder im Performance- bzw. JavaScript-Profiler-Panel von Chrome) die Aufzeichnung eines Performance-Profils. Mit console.profileEnd() beenden Sie die Aufzeichnung wieder. Danach können Sie das Ergebnis mit Aufrufbaum, Flame-Chart und Laufzeit pro Funktion auswerten.
Der große Vorteil gegenüber dem manuellen Klick auf „Aufnahme starten“: Sie können genau den Code-Abschnitt profilieren, der Sie interessiert, zum Beispiel eine rechenintensive Schleife, das Rendern einer Liste oder einen bestimmten Ereignis-Handler. So bleibt das Profil klein und übersichtlich.
Mit dem optionalen Parameter profileName geben Sie dem Profil einen Namen. Mehrere benannte Profile dürfen sich überlappen, und ein console.profileEnd(name) mit demselben Namen beendet genau dieses Profil. Die Methode ist nur zur Entwicklung und Fehlersuche gedacht und gehört nicht in Produktionscode.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $profileName | string | Optionaler Name des Profils. Er wird in der Profilübersicht der DevTools angezeigt und ordnet einen späteren Aufruf von console.profileEnd(profileName) genau diesem Profil zu. |
Rückgabewert
undefined zurück. Das Profil erscheint als Nebeneffekt in den Entwicklerwerkzeugen.Beispiele
Rechenintensive Funktion profilieren
const fib = (n) => (n < 2 ? n : fib(n - 1) + fib(n - 2));
console.profile('Fibonacci');
const result = fib(30);
console.profileEnd('Fibonacci');
console.log('Ergebnis:', result);Rendern einer großen Liste messen
const renderList = (items) => {
const ul = document.createElement('ul');
for (const item of items) {
const li = document.createElement('li');
li.textContent = item;
ul.append(li);
}
document.body.append(ul);
};
const items = Array.from({ length: 10_000 }, (_, i) => `Eintrag ${i + 1}`);
console.profile('Liste rendern');
renderList(items);
console.profileEnd('Liste rendern');Asynchronen Ablauf profilieren
const loadAndProcess = async () => {
console.profile('Laden + Verarbeiten');
try {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
const titles = posts.map((p) => p.title.toUpperCase()).sort();
console.log(`${titles.length} Titel verarbeitet`);
} finally {
// Profil auch im Fehlerfall sauber beenden
console.profileEnd('Laden + Verarbeiten');
}
};
loadAndProcess();Nur in der Entwicklung profilieren
const DEBUG = location.hostname === 'localhost';
const withProfile = (name, fn) => {
if (!DEBUG || typeof console.profile !== 'function') return fn();
console.profile(name);
try {
return fn();
} finally {
console.profileEnd(name);
}
};
const sum = withProfile('Summe', () =>
Array.from({ length: 1e6 }, (_, i) => i).reduce((a, b) => a + b, 0)
);
console.log(sum);// Wichtig · Fallstricke
- Nicht standardisiert:
console.profile()gehört nicht zum WHATWG-Console-Standard. Chrome, Edge und Firefox unterstützen die Methode. In Safari gibt es sie, sie verhält sich aber teilweise anders. In Node.js wirkt sie nur, wenn ein Inspector verbunden ist (z. B.node --inspectmit Chrome DevTools), sonst passiert nichts. - DevTools müssen meist geöffnet sein. Bei geschlossenen Entwicklerwerkzeugen wird in vielen Browsern kein Profil aufgezeichnet.
- Ein Aufruf ohne passendes
console.profileEnd()lässt die Aufzeichnung weiterlaufen. Das kostet Speicher und verfälscht Messungen. Nutzen Sie dahertry…finally, besonders bei asynchronem Code. - Das Profilieren selbst erzeugt Overhead. Absolute Zeiten sind deshalb nur ungefähr, zum Vergleich von Varianten taugen sie aber gut. Für einfache Zeitmessungen reichen
console.time()oderperformance.now(). - Aus Produktionscode entfernen oder hinter eine Debug-Abfrage legen. Build-Tools wie Terser (
drop_console) können solche Aufrufe automatisch entfernen.