Debugging, tracing and testing

WebStorm provides powerful built-in tools to make debugging, testing and tracing easier than ever. Whether you're working on a client-side or Node.js application, WebStorm can help you with these important tasks.

Debugging client-side JavaScript and Node.js

WebStorm provides an advanced debugger for your client-side code that works together with Google Chrome. It’s built right into the IDE, so you don't have to switch between the editor and browser for debugging.

You can easily debug ECMAScript 6, TypeScript or CoffeeScript code, relying on WebStorm debugger’s support for source maps.

The full-featured built-in debugger for Node.js works right out of the box as well. Use it to debug apps running locally or on a remote machine.

The WebStorm debugger has multiple views including Frames, Global and Local variables, and Watchers. Variable values are displayed inline, right next to their usages in the editor. You can easily evaluate JavaScript expressions in the runtime. The breakpoints support the suspend mode and conditions.

Unit testing

Perform unit testing with ease, as WebStorm integrates with popular JavaScript testing frameworks.

Select Karma or Jest for testing your client-side JavaScript code or Mocha for testing Node.js. Run and debug tests right inside the IDE, view results in a nice and visual format, and navigate to the test code.

Code coverage reports are also available for Karma test runner.

WebStorm also supports Protractor for the end-to-end testing for Angular, JSTestDriver, Cucumber.js for behavior-driven development, and Nodeunit.

Profiling

WebStorm can help you capture and explore V8 CPU profiles and heap snapshots for Node.js applications. Easily identify any possible hot spots or memory leaks in your app as profiling data are presented in the most accessible way.

Tracing

spy-js is a built-in tool that helps you trace your code and efficiently identify any possible bottlenecks. It works both for client-side JavaScript and Node.js, and even supports compiled-to-JavaScript languages.

With spy-js, you can see the full list of events that triggered code execution, then dig into the stack trace for an event and explore the highlighted trace in the source code. These data are also used to power code completion results.

spy-js can also help you visualize the application structure. Use the spy-js diagram to see how project files are connected with function calls based on the runtime data.