{"id":19397,"date":"2014-06-05T14:25:20","date_gmt":"2014-06-05T14:25:20","guid":{"rendered":"https:\/\/blog.jetbrains.com\/phpstorm\/?p=7543"},"modified":"2024-01-09T14:59:54","modified_gmt":"2024-01-09T13:59:54","slug":"tracing-debugging-and-profiling-javascript-code-with-spy-js-in-phpstorm","status":"publish","type":"phpstorm","link":"https:\/\/blog.jetbrains.com\/phpstorm\/2014\/06\/tracing-debugging-and-profiling-javascript-code-with-spy-js-in-phpstorm\/","title":{"rendered":"Tracing, debugging and profiling JavaScript code with spy-js in PhpStorm"},"content":{"rendered":"

\"Spy-JS\"<\/a>Forget 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.<\/p>\n

A picture is worth a thousand words, and a moving picture is worth ten times that. So here’s a 7-minute introduction video<\/a>\u00a0to spy-js:<\/p>\n

https:\/\/www.youtube.com\/watch?v=vPIbwxzC5cU<\/p>\n

Let’s order a\u00a0Vodka Martini (shaken, not stirred), and get down to business.<\/p>\n

<\/p>\n

Enabling spy-js in PhpStorm<\/h2>\n

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\u00a0IDE Settings | Plugins<\/strong><\/em>, clicking the\u00a0Install JetBrains Plugin…<\/strong>\u00a0button and adding spy-js to our IDE. Installing of\u00a0NodeJS is also required (instructions on their website<\/a>) because spy-js relies heavily on it.<\/p>\n

Spy-js Run Configuration<\/h2>\n

First of all, we will have to create a new\u00a0Run Configuration<\/strong>. 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:\u00a0if 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.<\/p>\n

\"Spy-js<\/a><\/p>\n

Spy-js works by sending traffic through a proxy. Checking the\u00a0Automatically configure system proxy<\/em>\u00a0<\/strong>option will\u00a0automatically 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<\/a> to avoid having to enter system credentials every time.<\/p>\n

Spy-js in action<\/h2>\n

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.<\/p>\n

\"SpyJS<\/a><\/p>\n

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

\"Spy-js<\/a><\/p>\n

When we select an individual event, its stack tree is opened in the Event Stack Pane<\/strong> 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.<\/p>\n

\"Spy-js<\/a><\/p>\n

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.<\/p>\n

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.<\/p>\n

\"Inspect<\/a><\/p>\n

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)<\/code>: spy-js will show us only the first expression has been evaluated to enter the if statement’s body.<\/p>\n

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

Download the latest PhpStorm 8 EAP<\/a>\u00a0and give spy-js a test drive!\u00a0We would love to hear your thoughts through\u00a0the\u00a0issue tracker<\/a>,\u00a0by posting in the comments below, or in our\u00a0forums<\/a>!<\/p>\n

Develop with pleasure!<\/em>
\n\u2013 JetBrains PhpStorm Team<\/em><\/p>\n","protected":false},"author":118,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[826,808,907],"tags":[263,197,743,365,41,489,399,2279],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm\/19397"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/types\/phpstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/users\/118"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/comments?post=19397"}],"version-history":[{"count":1,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm\/19397\/revisions"}],"predecessor-version":[{"id":432138,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/phpstorm\/19397\/revisions\/432138"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/media?parent=19397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/categories?post=19397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/tags?post=19397"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/cross-post-tag?post=19397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}