Rik Arends has released TraceGL, a new tool to debug JavaScript application using trace debugging. To make it easier to debug and understand complex browser and Node.js-based applications, the tool captures, visualizes and lets the user navigate execution traces while the application is running.
TraceGL consists of two parts: a node.js-based server and a WebGL-based client that runs in the browser. The four-pane browser UI shows a mini-map of the trace at the top left, a zoomed-in part of the trace top right, a stack-trace bottom left and the code itself bottom-right. When hovering over variables in the code, the UI shows the value that the variable had at the time. In addition, code execution paths for control flow are visualized.
To find out more about this project, InfoQ talked to its creator, Rik Arends.
Why do we need TraceGL, aren't the browser-integrated debuggers good enough?
Browser debuggers have definitely been getting better, but they operate in 'breakpoint/step' mode. First, you have to know where to put the breakpoints, and if you step over the wrong function you have to start all over again. With a trace, all execution is recorded. This means that instead of stepping, you see all logic at once, all variables and function arguments are visible, and you can use search, and data aggregation visualisations. You don't miss anything anymore. Also as it is a recording, you don't interrupt the program. Especially with event based code, behaviour is different if you put a breakpoint somewhere, with tracing code behaves more natural. And now the recording can be shared, which enables new ways of aiding debugging in a quality assurance process.
TraceGL has definitely taught me a lot about my own code and libraries like jQuery just by wandering around the code.
Are there any types of applications that this is especially useful for?
The more code you have, the nicer having a tracer is, especially if it's not all your own code. Use it on any reasonably complex HTML5 app and you will learn many new things about your code. Seeing what your code does as you move around the UI is quite lovely. However I have to say that TraceGL is also very useful for Node.js. As it is entirely event driven, breakpoint debugging is not a natural fit, but tracing is. The availability of a closure stack allows you to jump in and out of callbacks by simply clicking on the function, which is very handy. It's like getting a window into your server and being able to see what is going on.
How does TraceGL work, does it integrate into the JavaScript VM? Does it instrument the code?
TraceGL operates as both a proxy and a fileserver, and it works by instrumenting your JavaScript, much in the same way as CoffeeScript is compiled to JavaScript. I'm using the awesome Acorn JS parser by Marijn Haverbeke, and then non-destructively modify the source. When executing this modified source, it logs all codeflow over a websocket connection, via the node process to the UI for visualisation. This means traceGL doesn't need a debug connection to the JavaScript VM. It can just as easily trace your code on a mobile phone, as a Node.js backend.
What is the technology used to implement the traceGL UI?
Since TraceGL can get huge amounts of data flowing in, I needed to display and scroll vast amounts of text. As an experiment I decided to write the whole UI in webGL, and render all the text to static vertexbuffers. This means when scrolling and zooming there is very little processing going on in JavaScript as its a single drawcall to render big chunks of text. I've implemented a basic UI toolkit with dirty-region handling, and wrote a GLSL shader compiler to do all UI styling. So this means I no longer use CSS to style anything, but you write little shader fragments. All the interactivity works via raypicking and databinding a JavaScript DOM to shader variables. If you go this route, you do have to handle Retina screens yourself, but that works nicely. I'm originally a C++ graphics coder, so finally being able to make a fast browser UI without HTML was very refreshing.
Does traceGL work with compile-to-JavaScript languages like CoffeeScript?
TraceGL can instrument and display the output of a CoffeeScript compiler, but I don't have support yet for source-maps to neatly map it back to the original CoffeeScript source.
While TraceGL is not an editor or IDE, it does give a similar "live programming" feel as LightTable. Whereas LightTable does this by showing results of individual Clojure functions and allows editing to affect the results, with TraceGL you keep using your own editor, and use the TraceGL UI to visualize the codeflow either live, or after the fact.
TraceGL is available from its website for $14.99. It is distributed as a single JavaScript file and runs on any platform that can run Node.js and browsers supporting WebGL (primarily recent versions of Chrome and Firefox).