spy-js TypeScript, CoffeeScript, ES6 Support, Advanced Search and Navigation

Posted on by Artem Govorov

While WebStorm celebrates its 10th version anniversary, spy-js is proud of its third major release within this awesome IDE. Here’s a quick sneak peek at the new spy-js features available in WebStorm 10.

Source maps, TypeScript, CoffeeScript, ES6 via Babel/Traceur/etc tracing support

From day one, spy-js was capable of tracing JavaScript code execution. Later on we added ES6/ES2015 support for engines that can execute it. Now it’s time to bring some of its love to other languages compiled to JavaScript! Today I am happy to announce that the newest spy-js can trace TypeScript, CoffeeScript and ES6 code transpiled to JavaScript with Traceur/Babel (former 6to5) or any other transpiler (given it can produce the source map).

Let’s see how this can be done. I’ll use TypeScript for the example, but you can use CoffeeScript or ES6 just as easily.

First, I’ll create a simple .ts file in my empty project.

Then I will enable a new built-in TypeScript compiler (Settings | Languages & Frameworks | TypeScript), which will compile my TypeScript file to JavaScript on the fly and generate a source map as well. Please note that spy-js also works with your own file watcher/transpiler solution as long as it generates source maps.


Now, I will add index.html page and include the generated index.js as a script there.

Let’s start spy-js and see the trace. After starting it, but before hitting the page in the browser, we will need to modify a couple of spy-js settings just once. The first one is to enable source maps lookup during tracing. It’s off by default to avoid impacting your tracing if you are not using source maps and are tracing just plain JavaScript. The second one (“Always open source mapped trace if available”) is optional. It’s useful when you always want to inspect the opened trace file in TypeScript and not in the generated JavaScript by default.

Source maps support

We are now ready to open our index.html page in the browser and inspect the recorded trace.

When we jump to the execution stack and select one of the entries, the opened trace file is our original TypeScript file. We can still see all the highlighted execution paths, inspect object values and so on, just as we would be tracing normal JavaScript. Amazing, isn’t it?


Similarly, you can use CoffeeScript watcher or Babel/Traceur one to trace the original executed code:



Source maps support comes with one more bonus: You can now debug code in Chrome DevTools while it’s being traced by spy-js. In other words, tracing and debugging at the same time. To turn the feature on, go to spy-js settings and select “Enable source map generation”. Please note that this may significantly slow down your tracing, so try only using it when needed and turning it back off.

Source maps generation

Advanced trace search

As you probably know, spy-js event tree and opened stack are easily searchable. After the tree gets focus, you can start typing and using quick search to find what you need. It works nicely for searching certain function calls when you are within the stack tree and know that your function call is inside it.

But what if you don’t know where your function is called from, not even the event, but still would like to search across the whole trace? spy-js to the rescue! When spy-js session is running, you can use the context menu for any function in your source code to quickly initiate the search, and then navigate through the results. Feel free to assign some shortcuts to make the process completely keyboard-friendly.

Advanced search

The search can also be initiated for any function inside any opened trace file, or from the context menu of the stack tree nodes (select “Search this function calls across all events”).

Advanced trace navigation

One more useful feature is the new way to navigate spy-js traces. When tracing some synchronously executed code, you can open the event you are interested in and start exploring its stack tree. But what if you are tracing some async code with a few callbacks or a chain of promises? In this case you will have multiple events and opening them one by one just to find the call of the next function in the file is not much fun.

spy-js now addresses this issue in a simple and elegant way: you can now just jump to the next or previous function in the file that you are inspecting. It means that if you have a chain of promises or a callback defined within the function that you are tracing, and you can easily jump to the next promise or the callback function call.

Promise navigation

More actions are available in the stack tree toolbar menu and the stack tree node context menu under the “Navigate” item.

That’s it for this blog post, but I have more new and exciting spy-js features to share with you, so stay tuned!

Comments below can no longer be edited.

7 Responses to spy-js TypeScript, CoffeeScript, ES6 Support, Advanced Search and Navigation

  1. Sergey says:

    April 15, 2015

    Artem this is awesome, I didn’t know about ability to search using ‘Search this function calls’ from context menu. Very useful! It worked right away for node, but I can’t get it to work for client side code. Could it be something to do with node.js version which I’m using (0.12.x)?

    Thank you

    • Artem Govorov says:

      April 16, 2015

      Hi Sergey,
      ‘Search this function calls’ works for me with any version of node, including 0.12.x

      Please note, this feature works only with running spy-js session (not stopped). Also, if you invoke the action in actual source files (as opposed to opened trace files), ‘Enable autocomplete and magnifier’ spy-js setting should be on.

      • Sergey says:

        April 18, 2015

        Thanks Artem, you’re right, it is working. Most likely there was something wrong with my code. Thanks again.

  2. Jim Cummins says:

    May 13, 2015

    Hi there. This looks great, however, I have not been able to get spy-js to go to my .ts files if I have a different output directory for the .js files than where the .ts files live. It basically always goes to my .js file. I see the source map tag in the .js file so I know it exists.

    • Ekaterina Prigara says:

      May 14, 2015

      Hi Jim,
      Could you please check that you have the following spy-js options enabled: Enable source map lookup, Always open source mapped trace if available and Enable source map generation.
      If it doesn’t help, please create a new issue on our tracker to provide a bit more info on your project configuration.

      • Jim Cummins says:

        May 14, 2015


        I tried that and it didn’t work. As it turns out, there is a known issue with Webstorm and Typescript sourcemaps. At the moment you MUST have your .ts files and .js files in the same directory if you want to be able to use sourcemaps / spyjs. This means you can’t have separate src and dist directories. 🙁

        I was about to put in an issue when I realized that this is a known issue being tracked here for about a month: https://youtrack.jetbrains.com/issue/WEB-16049

        Would you be able to tag it as Typescript + spy-js since it impacts both?

        • Jim Cummins says:

          May 15, 2015

          Quick update. You can work around this if you use absolute paths combined with the -outDir Typescript command line argument. See the issue I posted above for a bit more background. Unfortunately you cannot do this if you need to use macros / project specific variables for your output path.