Spy-js 2.0: New Level of JavaScript Tracing

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:

    Does charles proxy work with spy-js. charles has a self root certificate ?


  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:

      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 *