Guide to Node.js Development with WebStorm

In this short blog post we would like to put together all the tutorials we have so far on Node.js development workflow with WebStorm and other JetBrains’ IDEs.
Hope that it would help you to get started with Node.js in WebStorm and master your workflow.

Getting started with Node.js

The following videos are available in this playlist.

Running and Debugging Node.js apps

Getting started with Express

Continue reading

Posted in Screencast, Tutorials | 14 Comments

WebStorm 8.0.2 Bug Fix Update is Available

WebStorm 8.0.2 bug fix update (build 135.831) is available now.

If you’re using WebStorm 8.0.1, you’ll be prompted  to install a patch-update (will be available within an hour). Otherwise, you can download a fresh installer for your OS on the WebStorm website.

This update contains quite a lot of fixes in various product subsystems. The full list of addressed issues is available in the release notes.

Please report any bugs and submit feature requests on our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Release Announcements | 3 Comments

WebStorm 9 Development Roadmap Discussion

We on the WebStorm team have drafted a WebStorm 9 development roadmap that we would like to share with you and get your feedback.

Please note the developed roadmap is not a finalized list of features that you’ll see in WebStorm 9. It’s pretty flexible and may be subject to changes. Furthermore, we haven’t included improvements in the existing features that we are planning to work on.

WebStorm 9 is planned for release in late 2014. Our Early Access Program will start a couple of months before the release.

The major issue that we are going to address in the upcoming release is WebStorm’s performance when working with large JavaScript projects. While this issue may not be apparent at first, it is quite complex and very important, and we work on it to make WebStorm faster and much more stable.

The highlights of the roadmap include:

We are going to finish our work on Yo integration (WEB-6744) and improvements in CSS3 support that we weren’t able to finish for WebStorm 8 release.
You can see the full list of features on the roadmap draft.

There is one more thing that we are currently investigating and would like your opinion on: possible PhoneGap integration. If you’re using it, how WebStorm could improve your experience with building mobile apps with PhoneGap? Please share your thoughts.

We’ll be very happy to hear your comments, idea and suggestions here or on our issue tracker where you can vote for issues or submit new feature requests.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Early Access Preview | Tagged | 134 Comments

[Webinar Recording] WebStorm 8: Mastering AngularJS, spy-js, Grunt, and Multi-Selection Workflows

The recording of our April 24th webinar with John Lindquist, WebStorm 8: Mastering AngularJS, spy-js, Grunt, and Multi-Selection Workflows, is now available on JetBrains YouTube channel.

In this webinar you will learn how to get the most out of the new WebStorm 8 features. John shows advanced AngularJS support in action and how integration of Grunt task runner and multi-selections in the editor helps optimize your workflow in WebStorm and speed up your daily development tasks. We also take a closer look at a brand new tool in WebStorm: spy-js, a powerful JavaScript tracer.

In this post we’d like to address the some of the most frequent questions we had during the webinar.
Continue reading

Posted in Tutorials, Webinar | Tagged , , | 7 Comments

Using Bower in WebStorm

WebStorm 8 includes integration with Bower, a package manager for the web. Bower allows you to manage your project’s front-end dependencies. You can read more about it on the project website at

WebStorm helps you search and install new packages available through Bower’s registry in the IDE UI, as well easily update and delete packages.

Let’s have a look at a common workflow with Bower in WebStorm.

Continue reading

Posted in Tutorials | Tagged , | 14 Comments

Spy-js: WebStorm secret service


What is the difference between Orem, Utah, USA; Munich, Germany; Gold Coast, Queensland, Australia; and St. Petersburg, Russia? Well, they are thousands of kilometers apart, span 3 climate zones from continental to subtropical, and only one of them is home to kangaroos.

What do these places share in common? They are all home to the team behind WebStorm 8.

But there are things more puzzling than that. For example, have you ever suspected it’s possible to trace your code without console.log, debug it without breakpoints, and profile it without JavaScript execution engine specific tools? What if I said you could see what’s happening in your app in real time, as the app executes? And not just your app but any Internet website? And finally, what if you could enjoy all this magic for JavaScript code running in any browser/device?

Today this is all possible. Please welcome spy-js, a new feature of WebStorm 8 that makes all these tricks possible—and much more.

Before going further, I recommend that you watch this 7-minute video, if you haven’t already, to get a general idea of what spy-js is about.

In this post we’ll walk through the tool’s features in more detail, and I’ll share some tips and tricks to improve your experience with spy-js. I’m going to cover a range of topics, including but not limited to:

Continue reading

Posted in Cool Feature, Screencast, Tutorials | Tagged , , , , | 22 Comments

WebStorm 8.0.1 Bug Fix Update is Available: node-webkit, TypeScript 1.0 and Sass 3.3

WebStorm 8.0.1 bug fix update (build 135.621) is available now.

If you’re using WebStorm 8.0, you’ll get a notification about available update or you can check for updates manually and make a patch-update. Or, if you like, you can download a fresh installer on the WebStorm site.

This update is focused on various fixes and improvements including:

  • improvements in Grunt console UI;
  • full support for Sass 3.3;
  • improvements in support for TypeScript 1.0, and more.

You can see the full list of issues in the release notes.

WebStorm 8.0.1 also adds a new feature: now you can run your node-webkit applications in one click and debug them using WebStorm’s built-in debugger.

Create new Run/Debug configuration of node-webkit type, select the path to the app folder and specify the path to the node-webkit interpreter. After that simply click Run to start an app or set breakpoints in the JS code and start a debugging session.


We welcome bug reports and feature requests on our issue tracker.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Cool Feature | 3 Comments

[Live Webinar] WebStorm 8: Mastering AngularJS, spy-js, Grunt, and Multi-Selection Workflows

Join us Thursday, April 24th, 9:00 AM – 10:00 AM PDT (16:00 – 17:00 GMT) for our free live webinar showing-off the hottest additions to WebStorm 8.

This webinar will cover how to get the most out of the new WebStorm 8 features. We’ll show advanced AngularJS support in action and how integration of Grunt task runner and multi-selections in the editor could optimize your workflow in WebStorm and speed up your daily development tasks. We’ll have a closer look at a brand new tool in WebStorm – spy-js, a powerful JavaScript tracer.

Space is limited, please register now.

The new features that are going to be covered in this webinar are available in WebStorm 8 and also: IntelliJ IDEA 13.1, PhpStorm 8 EAP, RubyMine 6.3 and the upcoming PyCharm 3.4 EAP. The recording will be available a week after the webinar.

John LindquistJohn Lindquist is a Technology Evangelist at JetBrains. He has spent the majority of his career developing Rich Web Applications. Before joining JetBrains, he was a Technical Architect at Roundarch leading teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg. John focuses his free time on delivering high-quality video tutorials for free on his YouTube channel and recently launched his own video tutorial training site focused on AngularJS.
Posted in Webinar | Tagged , , , , , , , | 4 Comments

AngularJS Workflow in WebStorm

WebStorm 8 introduces a slew of new AngularJS features. This post will help you understand and optimize your workflow around what we provide.

Include angular.js in Your Project

While the AngularJS plugin is now bundled with WebStorm* the AngularJS features don’t kick in until you’ve included the AngularJS scripts in your project.


Head over to, click the download buttons, then move the angular.js script into your project.


If you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.


Libraries can be reconfigured later under Settings | JavaScript | Libraries. This trick also works with any other JavaScript library.


If you have installed, WebStorm will pick up on the angular.js script automatically. It’s worth noting that WebStorm can now help you manage your bower.json libraries under Settings | JavaScript | Bower.

The Basics

The first thing to notice is that you’ll start getting autocomplete for HTML attributes (e.g., ng-app) as well as autocomplete for JavaScript symbols (e.g., angular.module). For faster autocompletion, try typing “na” to quickly filter to ng-app or “nc” for ng-controller. WebStorm does character matching against complete words to help you select your desired autocomplete as quickly as possible.

Also, hit F1 over any directive to quickly view document. You can click the up arrow to jump to the online docs as well.


Lastly, you’ll get completion for matching braces, so when you type {{ the matching }} will automatically be inserted.

Continue reading

Posted in Cool Feature, Screencast, Tutorials | Tagged | 54 Comments

Welcome WebStorm 8.0: AngularJS support, spy-js, multiple selections, Grunt and more

Please welcome WebStorm 8.0!.
This major update adds support for some of the most trending web technologies and brings new tools to improve your development experience.


Highlights in WebStorm 8.0 include:

  • Advanced AngularJS support. WebStorm now provides smart AngularJS specific code completion, refactoring, navigation and quick access to documentation.
  • Spy-js, a JavaScript tracing tool. Spy-js makes tracing and profiling JavaScript easy in any browser.
  • Multiple cursors and selections will help you edit your code faster, especially if you are used to this feature in other editors.
  • Integration with Grunt, a JavaScript task runner and Bower, a package manager for the web.

Other important updates included in WebStorm 8.0 are:

  • New Live Console in JavaScript and Node.js debugger.
  • Support for CucumberJS test framework.
  • Improvements in the support of JavaScript modules: RequireJS, AMD and EcmaScript 6 Harmony modules.
  • Up-to-date support for LESS 1.7, improved performance for JavaScript and TypeScript, and much more.

Read more about what’s new in WebStorm 8.0 and download the IDE for your platform.

WebStorm 8.0 is a free update for everyone who purchased their license after March 26, 2013.

Develop with pleasure!
JetBrains WebStorm Team

Posted in Release Announcements | 46 Comments