PhpStorm 7 Web Toolkit Series – npm, Karma, istanbul

PhpStorm 7 Web Toolkit Series - npm, Karma, istanbulUpcoming PhpStorm 7 release brings some new JavaScript features. We now have a built-in Node.js Package Manager that we can use to search for packages from npm. There’s also brand new support for the Karma JavaScript unit testing framework (and code coverage using istanbul). The JavaScript debugger has been redesigned and comes with many new features such as a live DOM inspector.

Curious? Let me take you on a tour. Tipping the guide is always appreciated by leaving your comments below.

This functionality is available in IntelliJ IDEA, PyCharm, WebStorm, PhpStorm and RubyMine. Karma & istanbul are also available in AppCode.

This functionality is available in IntelliJ IDEA, PyCharm, WebStorm, PhpStorm and RubyMine. Karma & istanbul are also available in AppCode.

Node.js Package Manager (npm)

We can make use of the built-in Node.js Package Manager which can be found under Project Settings | JavaScript | Node.js. We can see a list of previously installed packages and see if new versions are available for download. Through the Available Packages dialog, we can search for packages available from npm and specify which version of a package should be installed.

Node.js Package Manager (npm)

JavaScript Unit Testing and Code Coverage with Karma and istanbul

The AngularJS team has developed Karma, a simple and flexible tool for executing JavaScript tests. PhpStorm now includes full support for this framework and allows us to choose between JSTestDriver and Karma for running unit tests. Have a look at the WebStorm blog for more information.

Test results are shown in the Run panel for Karma. We can navigate from the test result to its code, check statistics for the tests execution and make HTML reports from it. And if we specify istanbul code coverage settings in the Karma configuration file, we can get a report of the coverage of our JavaScript code during a test run as well. Istanbul will provide us with a clear picture of which parts of our code are tested and which parts aren’t.

JavaScript Unit Testing and Code Coverage with Karma and istanbul

Improved JavaScript Debugger

Performance of the built-in JavaScript Debugger has been improved, as well as functionality.

  • Live Edit allows us to see all the changes that we make in our HTML or CSS files instantly in the browser, without reloading the page. The workflow to get started with Live Edit has been improved and can be used for HTML and CSS. Note that Live Edit is only available by configuring and running a JavaScript Debug Session.
  • The debugger has a new Elements tab which shows the live DOM of the page, including elements that were added with JavaScript.

Improved JavaScript Debugger

  • Variables view now shows values in the same format as the editor does, making them easier to read. Variables are now grouped into local, closure and global scopes and are separately grouped by functions. And last but not least: the __proto__ object and its properties are now visible as well.

A demo video and more detailed information about these features is available from the WebStorm blog.

Let us hear your thoughts in the issue tracker, through the comments below or in our forums!

Develop with pleasure!
– JetBrains PhpStorm Team

About Maarten Balliauw

Maarten Balliauw is a Developer Advocate at JetBrains, working on .NET tools. He focuses on .NET, Azure, web technologies and application performance. Maarten is a frequent speaker at various national and international events. In his free time, he brews his own beer. Follow him on Twitter or check his personal blog.
This entry was posted in Cool Feature and tagged , , , , , , , . Bookmark the permalink.
  • user

    “The latest PhpStorm 7 release” umm WAT?:)

    still not released 😛

    • Mikhail Vink

      Well, technically we had v7 Public Preview version release about a month ago. But final stable to be released very soon. I’ve tuned a sentence a bit to avoid confusion.


  • Jakub S.

    Staph, just release it already! :)

    • Pete C

      Ditto! Let it loose!

    • Mikhail Vink

      It’s very close :) Stay tuned!

  • Valery

    You planed optimize array indexes code hints?
    I realy need that….

    In eclipse PDT you always see ALL indexes on code in array hints.

    But in phpStorm its not work:

    $test['TEST'] = array(
    'TEST2' => '',
    'TEST3' => ''

    $test2 = $test;
    $test2['|'] //ctrl+space and no suggestions :(

  • Jonny Scholes

    Heya – I bought phpStrom a week ago. These new features look great – will I have to pay to upgrade?

    • Maarten Balliauw

      PhpStorm license includes one year of free product upgrades since the purchase date, including even major version upgrades.

  • aoopvn

    I don’t like the way it show me for “choose declaration” for my nodejs project, it does not make any sense.
    It just show “(Nodejs Dependencies for)” for some cases for module which has that method/function!
    I prefer the old way in previous version ! Just show the path/to/file -> it’s easy to jump to where I want to go or maybe you should change to something like “Nodejs Dependencies for ‘module name’“ where the ‘module name’ is the module which has that function/method.
    Thanks a lot for other awesome work!

  • Mike Erickson

    Looking for the Create Karma Configuration when right clicking on karma.conf.js file using PHPStorm 7 but I don’t see any testing features in there? I know the video that John did is using WebStorm, but the title “PhpStorm 7 Web Toolkit Series – npm, Karma, istanbul” implies that it should also be working with PHPStorm?

    Don’t see any related settings (as far as I can tell) in Preferences to enable this either?