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
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.
Now, I will add index.html page and include the generated index.js as a script there.
We are now ready to open our index.html page in the browser and inspect the recorded trace.
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.
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.
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.
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!