WebStorm 2018.2 EAP, 182.2949: JavaScript coverage

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , . Bookmark the permalink.

13 Responses to WebStorm 2018.2 EAP, 182.2949: JavaScript coverage

  1. splintor says:

    What about TypeScript coverage?

    • Ivan Saveliev says:

      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:

      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:

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

        • Ekaterina Prigara says:

          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:

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

          • Ekaterina Prigara says:

            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:

            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:

            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:

    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:

      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:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *