Better JavaScript Debugging with Theseus

Article by: Tom Lieber

Better JavaScript Debugging with Theseus

Chrome’s Web Inspector and brackets-debugger allow you to set breakpoints, step through your code, and inspect the values of variables. However, especially in code with callbacks, using those tools is tedious enough that many people just use console.log instead. Now there’s a Brackets extension called Theseus that makes inspecting variables and control flow easy, even in asynchronous code. And it works with JavaScript running in Chrome and Node.js simultaneously to boot.

This video gives you a quick demonstration of how it works (best viewed full-screen):

The video cannot be shown at the moment. Please try again later.

Theseus shows you the number of times that every function has been called right next to the definition of the function. When you click the call count, it retroactively adds log of all the arguments the function has received, all the values it has returned, and all the exceptions that it has thrown. If you click a second function’s call count, its log entries are added as well. If the functions call each other (even asynchronously), the log will show up as a call tree so you can see what called what.

It all works by rewriting your code on-the-fly. When you start Brackets’ Live Development with Theseus enabled, the page loads in Chrome through a proxy server. That server adds code to your page that records every time a function is called, along with the values of all the variables you might want to inspect later. Launching Node.js scripts with node-theseus does something similar by hooking into every require() statement.

The module that adds instrumentation to JavaScript code is called fondue. It’s available via npm so that you can use it in real-time debuggers of your own.

Leave a Reply

Your email address will not be published. Required fields are marked *