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.

Q: Are these features available in other IntelliJ-based IDEs?
A: Yes, all new features are available in IntelliJ IDEA 13.1, PhpStorm 8 EAP, RubyMine 6.3 and PyCharm 3.4 EAP and come either bundled or available as a free plugin.

Q: How did John get a list of li tags?
A: WebStorm provides support for Emmet, which you can read more about on their website. Type Emmet abbreviations and then press Tab to expand the abbreviation to HTML tags or CSS.
For example, ul>li*10 would expand into the list of 10 li elements inside the unordered list.
You can see more examples in WebStorm in this video.

Q: How is spy-js different from the JavaScript debugger?
A: While spy-js allows you to better understand your code and the way it’s executed, you still need the JavaScript debugger to set breakpoints and execute your code step-by-step.
To learn more about spy-js and its features, please read this detailed post in our blog.

Q: What is the best way to learn about basic WebStorm features?
A: A good starting point is to watch WebStorm video tutorial which consists of 10 short videos on WebStorm basics. Another suggestion is to watch a recording of one of our previous webinars “WebStorm Tips and Tricks”.

If you have any questions, please feel free to ask in comments.

Develop with pleasure!
– JetBrains WebStorm Team

Comments below can no longer be edited.

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

  1. Avatar

    David says:

    April 29, 2014

    In the demo from John, he has the html file including javascript from the bower_components directory. The IDE was able to index the html and link to functions in controllers/services. Does the indexing work if your HTML file is including a minified/bundled version of your source code (with the inclusion of a source map of course)?

    If not what is the recommended workflow when you are dealing with minified code? Do you use a grunt task to swap out the include tags in your html to minified when you do a production build?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      April 30, 2014

      In case of AngularJS you need to have angular.js file in your sources or as library, and both minified and not-minified versions are valid. Each file from you project is indexed to make it possible to resolve all dependencies between files.
      Workflow mostly depends on your needs. You may refer to the CDN link in your HTML for production, and have the same file as JavaScript library – for highlighting/resolving/etc.

  2. Avatar

    George Ivanov says:

    April 30, 2014

    Great intro to AngularJS support and multi-line editing. Do you have or planning to make a talk about advanced debugging in AngularJS – debugging scopes, debugging real-time inject issues, routing etc? It’ll be very useful for all of us using WebStorm for production code based on AngularJS when we have realtime production issues.

  3. Avatar

    Ag says:

    May 14, 2014

    But spy-js currently is not available as a plugin for other IDEA products, isn’t it?

  4. Avatar

    arussel says:

    May 23, 2014

    Is it possible to use spyjs on a debug session ? I can run it on any site/url, but when I try to use it on http://localhost:63342/ (the session started in debug mode), I’m unable to capture any events.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      May 23, 2014

      No, spy-js and JavaScript debug configurations are incompatible. Are you sure that you need to use spy-js while debugging? Basically, these 2 tools are for one goal – code debugging.
      One more thing, just to let you know, if you want to capture events with spy-js, you need to start spy-js first and then open/reload the website (not in a debug mode).

  5. Avatar

    Jaime says:

    July 7, 2016

    Thank you for sharing this great post.
    Check this one as well…
    “AngularJS – When JavaScript Met MVC”