Spy-js 2.0: New Level of JavaScript Tracing

It has been almost 7 months since we released WebStorm 8. The recently rolled out WebStorm 9 brings a lot of new things on top of that, so today I’m going to tell you more about some new exciting features I have been working on in spy-js, and will share some tips and tricks on how to use them.

Spy-js powered Autocompletion and Magnifier

Last fall, in a spy-js presentation I mentioned a few possible distant-future features. Well, the future is here and today those feature come true. Please welcome spy-js-driven code completion and magnifier!

Enable autocompletion and magnifierBefore using these new features, make sure to select “Enable spy-js autocomplete and magnifier” in the Events toolbar menu. By doing so, you will allow spy-js to perform some additional ‘dark magic’ during its code instrumentation phase, to make possible what you’re about to see.

These new features are available for the browser and node.js, so I will use a sample MEAN stack application to demonstrate both of them in action.

Spy-js powered Autocompletion

First, let’s launch the application with spy-js and access it from Chrome or any other browser of your choice. If you haven’t tried this before, please read this blog post for more details. Now let’s jump straight into some source file with executed code and start editing one of its functions.

Autocompletion in Chrome page

Because the spy-js-traced application is running in Chrome, we can see completion suggestions from spy-js with Chrome icon as we modify the application. If a different browser is used, its icon would be displayed instead. If you’re are working with more than one browser at the same time, spy-js will cleverly combine completion suggestions from all of the browsers that have the traced page opened.

If we jump to some executed server side node.js code and start editing it, we’ll get spy-js powered completion assistance as well:

Autocompletion in Node.js app

If you don’t notice anything special on the screenshots above, you might say: Meh, I already had completion in WebStorm, so what’s the deal here? Well, completion assistance in all of the JavaScript editors, including WebStorm default completion data provider, is enabled by JavaScript code static analysis data. Spy-js completion is different as it uses runtime data to complement WebStorm standard completion and to provide very precise suggestions that reflect the reality of the executed code.

Dynamic source of completion data in browser

Due to the dynamic nature of JavaScript, static analysis cannot reach many corners of your codebase. Spy-js comes to rescue in these cases, as it doesn’t have to guess what to suggest for an autocompletion list—it knows it exactly. Even when you’re dealing with dynamic data, like JSON that you’ve received from your server or read from disk.

Dynamic source of completion data in node.js

Being powered by runtime data has its price. There are two major things you have to remember when working with spy-js completion assistance. First, the code where you’re expecting completion suggestions from spy-js has to be executed first. Second, when you change your code, some previously valid runtime data may become obsolete until you re-run your code. While spy-js does its best to retain the code changes and provide valid completion data for as long possible, it works best if you re-run your code periodically to keep the runtime data up-to-date.

Spy-js Magnifier

Imagine a typical scenario where you’d like to debug some code. You find a source file, find a function within it, find a line where you’d like to set a breakpoint, run your scenario, hit the breakpoint, and start inspecting object values that are available in the scope where you’ve stopped your code. Sounds familiar, doesn’t it?

Now, if you have worked with spy-js before, you know how it’s different from the debugging scenario. You execute your code and you have trace files, where apart from the executed path you could inspect recorded parameters and return values of executed functions. It works great when you’re analyzing the trace step by step, function by function.

What if you could get the best of both worlds and be able to just open your source code and quickly inspect any up-to-date object values? And not only for parameters and return values, but for any objects? And no object depth limitations? And without having to set and stop at breakpoints.? And both in browser and node.js code? Well, that’s exactly what spy-js magnifier allows you to do!

Magnifier

Just start spy-js Run Configuration and hover the mouse over any expression in any executed context/scope (or press Cmd-Alt-F8 on Mac or Ctrl+Alt+F8 on Windows or Linux) to get the latest value for the expression.

This feature should definitely spare you from a few console.log calls here and there and from setting breakpoints to just inspect some objects.

Node.js support

I’m very excited to mention node.js application tracing support. Please watch the video and read this blog post for more details.

Saving and Loading Traces

Imagine a scenario where you’re tracing some application to find out what’s going on inside it. Suddenly you find some suspicious call stack or an exception that you’d like to analyze later, maybe share with your teammate responsible for the code you’re tracing, or even attach the trace to the bug report in your issue tracker. To support this scenario, spy-js now allows you to save the running trace and load it later in the same or a different WebStorm instance. Simply use Save/Load trace menu items from the Events toolbar menu. Note that the feature is available both for browser and node.js traces.

Saving/Loading traces

ES6 support

ES6 support is slowly but steadily coming to browsers and node.js. Whether you’re using some browser’s latest version or node.js 0.11.x with the –harmony flag, it’s now possible to trace code that is using new language features, such as generators or arrow functions. Spy-js fully supports the current version of the ES6 specification draft.

ES6

That’s it for this post. Thanks for reading and I hope you enjoy the new spy-js features. Please keep sharing your feedback here in comments, on Twitter and in YouTrack.

About Artem Govorov

Artem Govorov is an independent contractor at JetBrains working in WebStorm team. He's JavaScript addict and creator of spy-js and wallaby.js.
This entry was posted in Cool Feature, Tutorials and tagged , . Bookmark the permalink.

11 Responses to Spy-js 2.0: New Level of JavaScript Tracing

  1. Brennan says:

    spy-js is very useful thanks :)

    With the magnifier feature I noticed it cannot be used with jump to trace. I understand the magnifier is showing the current values which might not be the values used while viewing the traced event. Is it possible or are there plans to be able to jump to trace and see the values via magnifier at that point in time? I quite like the feature in Adobe Scout where you can isolate all code execution from a start/end time(though that was frame based).

    I’m not sure if it’s possible but similar to above, when my node.js app crashes throwing an error and stack trace, it’d be awesome if spy-js could help me jump to where the error happened viewing the trace file(s) and the values via magnifier. I can do this at present manually looking through the trace run tab.

    • Thanks for your feedback, glad to hear you’re finding spy-js useful!

      You’re correct, the magnifier is showing the current values. It can retrieve any objects, from any executed context, traversing object properties as deep as required. Trace files also contain some recorded values (function arguments and return values), but number (and depth) of collected properties is limited because of the performance impact caused by collecting object dumps. However, you can use custom configuration file and increase those limits.

      Your idea with jumping straight to error sounds interesting and useful, please feel free to create the feature request at YouTrack.

  2. Vyacheslav Pavlenko says:

    I’m working behind proxy and my app going to bootstrapcdn for css files. How to setup proxy for spy.js so it would be able to serve files from outside?

  3. Miro says:

    Is it possible associate/bind spy-js traced files with project files?

    • Ekaterina Prigara says:

      You can save trace file and then copy it to the project directory – in the spy-js tool window click the icon with a gear and select Save trace.

    • Spy-js tries to automatically map traced files to corresponding project files. Just hit space in the trace file and focus should jump to the corresponding source file. “Jump to Source” stack tree context action does the same for a selected function.

      If it doesn’t work, for example because you’re using not WebStorm built-in web server, but some other development web server with tricky paths or production web server, and still would like to map trace files to local source files – please configure the mapping like described here.

  4. lionel says:

    Hi
    Does charles proxy work with spy-js. charles has a self root certificate ?
    http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

    regard’s

  5. anurag m says:

    Hi artem, I need help configuring spy js to trace live web pages. Please help me on this. spy js is not able to trace live webpages and spyjs icon doesnt show up in web browser either. please guide me on how to configure the proxy to make it work. please help.

    • Ekaterina Prigara says:

      Hi,
      what do you mean exactly by live webpages? Did spy-js works when you start the app with the WebStorm built-in web server? The proxy configuration should be automatic. Please make sure that you checked Automatically configure system proxy in your spy-js run configuration.

Leave a Reply

Your email address will not be published. Required fields are marked *