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:
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):
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!
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:
- Open the source code for Brackets or the source code for your extension, in Brackets.
- Click the menu item Debug > Debug Brackets with Theseus.
Theseus can be easily installed from within Brackets. Simply click the 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).