1. Chrome DevTools

What is it?

A built-in browser tool used to analyze and debug performance issues in your Three.js application.

Why use it?

Check FPS drops
Detect memory leaks
Analyze CPU/GPU usage
Measure loading times

Open DevTools

F12

Right Click → Inspect

Implementation

// Open DevTools
F12

// Go to:
Performance Tab

// Click:
Record

// Interact with scene

// Stop Recording

Chrome will show:

Rendering Time
JavaScript Time
Memory Usage
FPS

2. Stats.js

What is it?

A lightweight FPS monitor that displays real-time performance information.

Why use it?

Monitor FPS
Monitor frame time
Monitor memory usage

Installation

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>

Implementation

const stats = new Stats();

document.body.appendChild(stats.dom);

function animate() {

    stats.begin();

    renderer.render(scene, camera);

    stats.end();

    requestAnimationFrame(animate);
}

animate();

Output

FPS : 60
MS  : 16
MB  : 80