Spy-js: WebStorm secret service

Introduction

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 , , , , | 20 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.

node-webkit

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.

Local

Head over to http://angularjs.org, click the download buttons, then move the angular.js script into your project.

CDN

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.

image04

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

Bower

If you have http://bower.io/ 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.

image03

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 | 49 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.

WS8_banner

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

WebStorm 8.0 Release Candidate

We are in the homestretch with the WebStorm 8.0 release. And right now we’d like to introduce WebStorm 8.0RC, shipping not only enhancements and fixes, but also a new feature – Grunt console!

WebStorm 8.0RC is available for download on the WebStorm website, where you can also find the list of all new features with description and screenshots. You can also look through the release notes.

We would highly appreciate your feedback and bug reports on our issue tracker.

One on the new features of WebStorm 8 that we haven’t mentioned before is Grunt integration. If you are using Grunt as a task runner for your project, try Grunt console: it allows you to browse through the list of  tasks defined in your projects and quickly run any task or group of tasks by simply double-clicking it.

grunt-blog-noshadow

 You can download WebStorm 8.0RC from the website. Please note that this RC build requires an active WebStorm license or is available for 30 day evaluation.

Develop with pleasure!
- JetBrains WebStorm Team 

Posted in Early Access Preview | 18 Comments

WebStorm 8 Beta (build 134.1503)

We are on the way to the release of WebStorm 8. Today we are making the beta version available for download.

You can find download links on the website or WebStorm EAP page. This build is free and can be used for 30 days, no active subscription is required. Please give us the feedback on YouTrack.

In this update we improved the new features and fixed some known issues with them (see the Release Notes). You can have a look on the list of the main new features and screenshots on our website.

Develop with pleasure!
- JetBrains WebStorm Team 

Posted in Early Access Preview | 4 Comments

WebStorm 8 EAP (build 134.1361): multiple selection

Today WebStorm 8 EAP update brings a feature that was very anticipated and we are really excited to introduce it: multiple selection!

And that’s not the only thing you should be excited about in this update:

  • new batch of improvements and fixes in AngularJS support
  • spy-js now allows you to trace web sites on your mobile devices
  • new Live console in JavaScript and Node.js debugger that allows you to enter commands and code
  • CucumberJS support.

You can find download links on WebStorm EAP page. This build is free and can be used for 30 days, no active subscription is required. Your feedback is very welcomed on YouTrack. You can look through the release notes.

Let’s have a closer look.

Continue reading

Posted in Early Access Preview | 27 Comments

[Webinar Recording] Node.js Development Workflow

The recording of our February 20th webinar with Adron Hall, Node.js Development Workflow, is now available on JetBrains YouTube Channel.

In this webinar you will learn the basics for working with Node.js web projects in WebStorm. Adron shows how you can run and debug a Node.js app and test it with Mocha.

We received quite a few questions during the webinar and would like to address here the most frequently asked questions and those we didn’t have a chance to answer during the webinar.
Continue reading

Posted in Screencast, Webinar | 7 Comments

Running and debugging Node.js application

Updated on June, 18 2014

Let’s continue our series of posts and tutorials on Node.js development in WebStorm.
Our first post covered the basic WebStorm configuration for working with Node.js projects. Now let’s move on to running and debugging Node.js apps both locally and remotely.

Running Node.js app locally

WebStorm allows you to run Node.js application locally on your machine: you should create a Node.js Run/Debug configuration for the file you need to execute and click Run.

To create a new Run/Debug configuration, click Edit configurations in the top right corner of the IDE window, or in the main menu Run. Click Add new configuration and seleсt Node.js type.

In this new Run/Debug configuration, specify the path to the JavaScript file that needs to be executed. For example, for a simple Express web app it should be a file that configures and starts the web server.

You can also add any parameters you need to pass to node (Node parameters input) or to your application (Application parameters input) on the start.

node-rdc

Update: Starting with Express 4.0 file www.js in bin folder needs to be executed to start the app. When creating a new Express web application in WebStorm 8.0.2 or higher, the required Run/Debug configuration will be created automatically.

Select this new configuration and click Run. The Run tool window with console will appear showing the app execution log.

runnode2

Continue reading

Posted in Tutorials | Tagged | 18 Comments