WebStorm 2018.2 EAP, 182.2949: JavaScript coverage

Ekaterina Prigara

The fourth WebStorm 2018.2 Early Access build is now available!

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or if you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.

Here are some of the highlights of WebStorm 2018.2 EAP #4 (182.2949.6).

JavaScript Code Coverage

You can now find unused JavaScript (or TypeScript) code in your client-side app thanks to the new Code Coverage feature.

Run your app in the browser and then see the report in WebStorm showing how much code in every file and folder was used.

The great thing is that the coverage will be shown for your source files and not for the compiled code that was actually run in the browser (as long as the source maps are available).
Here’s how it works:

    • Create a new JavaScript debug configuration by selecting Run – Edit configurations…
    • Specify the URL your app is running on and save the configuration.

javascript-debug-configuration

    • Now click Run with Coverage.

run-with-coverage

  • Once your app opens in Chrome, wait till the page is loaded if you want to know what code was executed during the page load, and then stop the configuration in the IDE. If you want to see the coverage report for some specific features of your app, use these features in the browser and then stop the configuration.

The coverage report will now open in the Coverage tool window: look at the Project view for info about the coverage of files and folders. Meanwhile, if you look at the left gutter in the editor, you will see green and red markers next to some lines. Green means that the line was executed, and red means it was not. And if you click on the market, you’ll see how many times this particular block of code was executed.

coverage-report-with-editor

In the example above, we see that the togglePast method is marked with red because we haven’t clicked the link that shows the past events.

Update: The coverage report now also includes CSS files, but only in the project that doesn’t use webpack. Unfortunately, the coverage for the Sass, SCSS and Less files is not supported right now.

Test files in the Tests scope

Now, test files whose names follow common patterns like *.test.js or *.spec.js are now automatically added to the default Tests scope. You can select this scope in the Project view to see the test files available in the project. Or you can use it to configure the use and severity of inspections.

tests-scope-in-project-view

tests-scope-in-inspection-profile

WebStorm Team

Comments below can no longer be edited.

13 Responses to WebStorm 2018.2 EAP, 182.2949: JavaScript coverage

  1. splintor says:

    June 10, 2018

    What about TypeScript coverage?

    • Ivan Saveliev says:

      June 10, 2018

      Hi, this was mentioned:

      “You can now find unused JavaScript (or TypeScript) code in your client-side app thanks to the new Code Coverage feature.”

    • Ekaterina Prigara says:

      June 11, 2018

      The coverage report will be shown for the TypeScript files if your project uses source maps – the IDE will use them to map the code executed in the browser to the actual source code.

      • Shmulik Flint says:

        June 11, 2018

        For some reason, this didn’t work for me. I only saw coverage for HTML files.

        • Ekaterina Prigara says:

          June 11, 2018

          What kind of project do you have? Is it an Angular project created using Angular CLI? How your project is built? Do you have “sourceMap”: true option in your tsconfig.json file?

          • Shmulik Flint says:

            June 11, 2018

            Yes, it is an angular project, created using Angular CLI, and I have “sourceMap”: true in my tsconfig.json.

            • Ekaterina Prigara says:

              June 11, 2018

              Can’t reproduce that… Do you use the ng start or build task before running coverage? What angular-cli version do you use? Thanks!

          • Shmulik Flint says:

            June 11, 2018

            I run “ng serve” in an external command window, and my JavaScript Debug Run Configuration simply opens http://localhost:4200.
            I use ng-cli 1.7.4.

            • Ekaterina Prigara says:

              June 12, 2018

              Thanks for the additional info. We reproduced the problem with the app generated using this Angular CLI version. The coverage report should work better in the upcoming EAP build, but there’re still some problems that we need to address – we have logged them as https://youtrack.jetbrains.com/issue/WEB-33288

  2. Azriz Haziq Jasni says:

    June 13, 2018

    Hi, great post really like it.

    And by the way i would like to request a small features which is “scroll from source keymap”. Usually i need to click ‘scroll from source’ at my sidebar which delay my productivity :D. I would like to have a keymap for that.

    I already go to preferences > keymap > type in the search box ‘scroll from source’ and didnt find any for that.

    • Ekaterina Prigara says:

      June 13, 2018

      Hi,
      The action you are looking for is called Select in Project View. You can assign a shortcut to it in Preferences | Keymap or use it via the Select in popup which can be invoked using Alt-F1.

  3. Paul Binns says:

    June 13, 2018

    Is there any way of switching off the green highlighting of tests in the project list? Its very distracting and not necessary when using the Material UI theme

    • Ekaterina Prigara says:

      June 13, 2018

      Sure, you can change the color in Preferences | Appearance and Behavior | File Colors.