Theseus JavaScript Debugger for Chrome and NodeJS

Article by: Tom Lieber

Theseus JavaScript Debugger for Chrome and NodeJS

Back in May I wrote about Theseus, an open source JavaScript debugger for Brackets with some interesting real-time features for inspecting your code. Theseus recently celebrated its 0.4 release, which features a new look, many bug fixes and performance improvements, and the added ability to debug Brackets itself in addition to JavaScript running in Chrome and Node.js.

In case you haven’t seen Theseus before, here’s a tiny example of how it works. The code below is a snippet from a page that calculates a Fibonacci number when the user clicks a button. You can tell from the gray coloring and call counts that the page has loaded, but the user hasn’t clicked the button:

Theseus - JavaScript debugging for Brackets
Theseus displays all loaded functions…

As soon as the user clicks the button, the editor updates with the new coverage information (removing the gray background color and updating the call counts on the left):

Theseus - JavaScript Debugger for Brackets
… and displays the number of calls in real-time.

You can inspect the arguments the fib() function received, and the values it returned, by clicking the call count next to its definition. All without typing console.log or even reloading the page!

Theseus - JavaScript Debugger for Brackets
Inspect each function calls to see arguments and returned data.

Those are the basics, but if you’re interested in the full story, the following 3-minute video walks you through all of Theseus’s features on a small example project:

Starting with version 0.4, you can use Theseus to debug Brackets itself, as well as any extensions Brackets has loaded, in just two steps:

  1. Open the source code for Brackets or the source code for your extension, in Brackets.
  2. Click the menu item Debug > Debug Brackets with Theseus.

Theseus can be easily installed from within Brackets. Simply click the Brackets Extension Manager Icon icon in the toolbar to launch the extension manager. Navigate to the “Available” tab and search for Theseus. Click the install button and enjoy!

If you want to watch an extended demo of Theseus, check out a recently recorded meeting with the Brackets team (20 min).

Leave a Reply

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