Brackets Blog

code the web

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

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.

3 Comments

  1. WM says:

    Could you tell me that how to enable the function which demoed from 1:20 in the video?

    • Joel Brandt says:

      Thanks for your interest! The feature at 1:20 (clicking on elements in the browser to navigate your code) isn’t ready for prime time yet, and doesn’t work with current releases.

      If you’re willing to get your hands dirty and you’d like to play with it, you can download an old build of Brackets (Sprint 19 should do it), and then follow the directions here to enable it.

      Old builds of Brackets can be downloaded from http://download.brackets.io/ by clicking on the “All Downloads” link

      If you want the feature in Brackets for real, please consider “voting” for these cards in our backlog tracker:
      #564, #433

  2. [...] 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. [...]

  3. Sergey says:

    I have question about using the developer tools with Brackets. I write my project and than go to Chrome to see some bugs in console, but when I open console it broke connection with Brackets and it’s really irritating. Can you help me, how can I use console as before in other IDE? Or maybe Theseus can replace it.

One Trackback

Post a Comment

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

*
*


5 + one =

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>