Tracing, debugging and profiling JavaScript code with spy-js in PhpStorm

Spy-JSForget about the NSA: PhpStorm 8 EAP comes with spy-js, our own secret service that allows tracing our code without console.log, debugging it without breakpoints and profiling it without any specialized tools. All while running our web app (and even other web apps out there on the Internet, it’s a secret service after all). Sounds like some serious espionage, right? Let’s have a quick look at what it can do for us.

A picture is worth a thousand words, and a moving picture is worth ten times that. So here’s a 7-minute introduction video to spy-js:

Let’s order a Vodka Martini (shaken, not stirred), and get down to business.

Enabling spy-js in PhpStorm

While PhpStorm includes all features supported in WebStorm, such as spy-js, not all of them are enabled by default. We can enable the spy-js plugin for PhpStorm through IDE Settings | Plugins, clicking the Install JetBrains Plugin… button and adding spy-js to our IDE. Installing of NodeJS is also required (instructions on their website) because spy-js relies heavily on it.

Spy-js Run Configuration

First of all, we will have to create a new Run Configuration. We can specify various options, such as the Node interpreter to use, the trace server port (spy-js will start its proxy server on this port), the tracing configuration and the URL to trace. Note that the URL is not required: if we don’t specify it, our tracing session will capture and display any events from other Internet or local websites (excluding HTTPS) that we visit while the session is still running.

Spy-js Run Configuration

Spy-js works by sending traffic through a proxy. Checking the Automatically configure system proxy option will automatically configure the system proxy on our machine when we start the spy-js Run Configuration, and revert the system proxy settings when we stop it. Mac OS X users may want to follow these instructions to avoid having to enter system credentials every time.

Spy-js in action

After launching spy-js, we can open our application in the browser. Spy-js will tell us it’s active by displaying its logo in the browser. Once that happens, the spy-js tool window in PhpStorm will also contain information about our app execution.

SpyJS in action

Let’s navigate to www.jetbrains.com and see what happens. Because we did not give spy-js a URL to the page to trace, it will simply trace all web pages we now visit (not for HTTPS). The Events pane will display all DOM events and JavaScript code execution roots. Script names have different colors so they can be distinguished more easily.

Spy-js events

When we select an individual event, its stack tree is opened in the Event Stack Pane on the right. Stack tree nodes contain short file and function name, as well as the execution time of the function. We can search the tree for a file or function name by just typing while in the tree.

Spy-js trace events

Some nodes may have their execution time rendered in blue. This means that the function is responsible for more than 50% of the execution time of the expanded stack level: a perfect candidate to look into for performance optimization. Nodes rendered in red have had an unhandled exception occur.

After locating and selecting the function we’re interested in, we can open its trace file with all code execution details. Code is highlighted and we can hover over variables to see their values, or functions to see their return values.

Inspect function trace

Much more information can be shown in trace files: we can see executed parts of logical expressions and parts of ternary operators. Imagine the code if (1 == 1 || 2 == 2): spy-js will show us only the first expression has been evaluated to enter the if statement’s body.

In this blog post, we’ve highlighted just a few features of spy-js. Head over to the WebStorm blog to dive deep into all the available features and what you can do with them.

Download the latest PhpStorm 8 EAP and give spy-js a test drive! We would love to hear your thoughts through the issue tracker, by posting in the comments below, or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

This entry was posted in Cool Feature, Early Access Program and tagged , , , , , , , . Bookmark the permalink.

7 Responses to Tracing, debugging and profiling JavaScript code with spy-js in PhpStorm

  1. Jannik Zschiesche says:

    Wow, very nice feature!

    A small feature request, though: I would like to be able to clear the tree without needing to manually remove everything.

    • You can use “Remove all” action available from the events pane toolbar (click the cogwheel icon on the right hand side of the toolbar). Doing so will clear the tree and stop tracing all active pages, you can resume tracing by refreshing the page in browser.

      If you’d like to clear some page events from the tree but still be able to trace events on it (without refreshing it), then right click the page node in the events tree and run “Remove all children” context action. This way you’ll get rid of all of the events traced so far, but if something new happens on the page it’ll appear under the page node.

  2. Frank says:

    This IDE just keeps getting more awesome. I can’t wait to use this Spy.js – what a timesaver this will be. When will there be a stable release of 8.0?

  3. Anonymous says:

    Please turn off the suggested videos at the end of your presentation. Some are NSFW in the US. I assumed the related videos would be other Jetbrains videos.
    Please use ?rel=0 at the end of your embed string. Thanks!

    • Mikhail Vink says:

      Checked and it seems to be working only with JetPack enabled (which is currently not, so adding &rel=0 doesn’t solve the problem for now). We’ll investigate that further, thank you!

  4. Pingback: PhpStorm 8 released: Blade, Behat, WordPress, Remote PHP interpreters, multiple carets/selections, and more | JetBrains PhpStorm Blog

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">