Skip to Content

Debugging Three.js

| Three.js

If you’re in the stages of creating a webGL game or app using three.js you may find it useful to visualize what your code is doing. That’s where the need for a debugger/inspector comes into play. Here are a few ways to do it.

Using a Custom UI to Debug Three.js

You can use JQuery to a certain extent alongside three.js. to create things like ui elements. Having said that, you can’t interact directly with three.js using jQuery unless you’re using something like TQuery. In our case we just use jQuery interact with the ui elements because you may want to debug in a way that the stats object (next) doesn’t offer.

The below code ceates a debuginfo object and prints it out. var stats;

var debuginfo = { ‘Mouse’: { ‘mouseX’: ‘’, ‘mouseY’: ‘’, ‘targetRotationX’: ‘’, ‘targetRotationY’: ‘’ }, ‘Models’: {}, ‘Textures’: {} }

function initDebug() {

//print your list of debug items in html


function printDebugInfo(obj) {

var str = '';
$.each(obj, function (key, value) {
    str += "
<div class="sidebar-widget">
<h3>" + key + "</h3>
<div id="&quot; + key.toLowerCase() + &quot;">"; $.each(value, function (key, value) { str += key + ": " + '<span id=" + key + ">' + value + '</span> '; }); str += "</div>
"; }); return str; }


Using the stats object

Three.js has a built-in “stats” object that you can use for monitoring memory usage




Here's how to initialize it
function initDebug() {

    stats = new Stats(); = 'absolute'; = '0px';

    //for debuging stats (update is a bit less frequent than using the update function)
    interval = setInterval(updateDebugInfo, 50);

Then just update it every frame when you call your render loop


Three.js Inspector

You can also try debugging directly from the browser. Check out this nifty plugin for Chrome by by Jerome Etienne called Three.js Inspector. This will help you understand how demos are done and allow you to tweak parameters. Still in early development, but very cool.

Canvas debugging Tools in Popular Browsers

After a little digging, it’s really nice to see major browsers adopt the need for debegging the HTML5 canvas element. These can be used for any kind of webGL project whether it be a game or visualization running on three.js or any other webGL framework.

Here is an article that explains the Chrome version in more detail: Chrome Canvas Inspector and for firefox lovers such as myself I was excited to find out they have one too! Canvas Debugger in Firefox Developer Tools

Share This