Brackets Blog

code the web

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 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):

... 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!

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 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).

8 Comments

  1. Capaj says:

    Please make the extended video public, right now it is private. Thx.

  2. [...] Lieber (an MIT student) has a blogpost/video to introduce the project here. Let us know what you think! This entry was posted in JavaScript, Tools by Mihai Corlan. Bookmark [...]

  3. [...] but crazy real time debugging that’s easy to understand and jump right into.  Check out the explanation of Theseus over at the Brackets team blog. And then check out the github repo.   Seriously, if you work with Javascript, do it now – [...]

  4. Is this tools avaiable if I use CoffeeScript (by Source Map for example).

  5. Tom Lieber says:

    Capaj: it seems to be up now

  6. Hi guys,

    Whoa, this is killer! I’m impressed. I really want to integrate it into my app and debug via chrome. But I’m running ASP.NET. Is there a way to install there debugger bits via a single JS file in my site and then debug via chrome?

    Seems like whatever you’re doing in node should be easy enough to port over….

    Thanks,
    Michael

    • Tom Lieber says:

      Theseus works by processing your code with a proxy server (rather than simply adding a source file to your project). What you can try is starting your ASP.NET server on port 3000, going to File > Proxy Mode in Brackets, opening your project root in Brackets, then clicking the lightning bolt in Brackets to start Live Development. That will try to open your web site with a debugger connection, but it has to make some guesses as to what URLs correspond to what files. If you have trouble with it, file an Issue on the Theseus GitHub and we can figure it out. :)

  7. papychicken says:

    Looks great !

  8. [...] Theseus JavaScript Debugger for Chrome and NodeJS (brackets.io) Share this:TwitterFacebookTumblrGoogleLike this:Like Loading… [...]

  9. [...] Theseus JavaScript Debugger for Chrome and NodeJS (brackets.io) Share this:Share on TumblrDigg Pin ItLike this:Like Loading… This entry was posted in Haiku, Haiku_Heights-Sept, Memory, Poem, Writing and tagged Dance, Haiku, Haiku_Heights-Sept, Home, Inner, Luck, poem, poetry, Thoughts, words, Writing. Bookmark the permalink. ← Haiku: SUNDAY [...]

  10. GottZ says:

    woah!

    srsly.. this is insane. i yet did not knew how i could debug my js code in brackets but this is a must have!

    greetings from an arch linux user!

  11. mbonaci says:

    Invaluable, love it!
    I was surprised NOT to see even a single bug.
    Great job.

  12. [...] for more: http://blog.brackets.io/2013/08/28/theseus-javascript-debugger-for-chrome-and-nodejs/ [...]

  13. […] @paul_irish: The debugging experience in Brackets with Theseus is innovative and awesome: blog.brackets.io/2013/08/28/th… Watch the […]

  14. […] Theseus for Brackets (see this link) […]

9 Trackbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*


2 − two =

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>