WebStorm 2019.1 EAP #6: new debug console, completion for npm scripts

WebStorm 2019.1 Early Preview build #6 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out the previous EAP blog posts.

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


Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2019.1 EAP #6 (build 191.5849.24). For the full list of issues fixed in this update, see the Release Notes.

New debugger console

We have completely re-implemented the debugger console in the JavaScript and Node.js debug tool windows. This console shows you stack traces and everything that was logged in your code (e.g. using console.log()). You can use this interactive console to evaluate arbitrary JavaScript statements – just start typing them in the input at the bottom of the console panel.

Here are some of the new features and improvements that we’ve implemented. You can debug this demo file in WebStorm 2019.1 EAP to see all these features in action.

  • The objects are now nicely displayed using a tree view.
    Objects in debug console
  • Stack traces are now collapsed by default.
  • Warnings (console.warn()), errors (console.error()), and info (console.info()) messages now have different icons and background colors to make them easier to notice.
  • You can filter out any type of log messages using the filter icon on the left side of the console panel.
    Console messages
  • You can now see the log messages styled using CSS and the %c marker.
    CSS styling for messages in debug console
  • The log messages grouped together using console.group() and console.groupEnd() are now displayed as a tree.
  • If you’re using console.groupCollapsed(), the output will be collapsed by default.
    Groups in debug console

We would really appreciate your feedback on the new console. Please share your experience in the comments or report issues on youtrack.jetbrains.com/issues/WEB.

Completion for npm scripts

When adding new scripts to the package.json file, WebStorm now provides suggestions for available commands. You can see a list of commands provided by the installed packages (from the node_modules/.bin folder):

Code completion for npm scripts

After typing node, the IDE will offer completion for folders and files that you can run. And after typing npm run, you’ll see a list of tasks defined in the current file. Cmd/Ctrl-click on the task name will take you to its definition in the same file:

Completion for npm scripts

Version range tooltip for dependencies

Another improvement related to the package.json file is a new tooltip that shows what range of versions could be installed when running npm install or yarn install. Press Cmd/Ctrl and hover over the version to see the information.

Semver info

TypeScript 3.3 and 3.4

We have updated the bundled version of TypeScript to 3.3.

To get ready for the TypeScript 3.4 release, we’ve supported the new syntax features planned for this release.

Please report any issues on our issue tracker. And stay tuned for the next week’s update!

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.

16 Responses to WebStorm 2019.1 EAP #6: new debug console, completion for npm scripts

  1. Ihor Halchevskyi says:

    Is there already a release date for WS 2019.1?


  2. Helio Alves says:


    Is it normal that in 2019 we do not have the create command-line launcher in Tools?


    • Ekaterina Prigara says:


      Have you installed the IDE using the Toolbox app? Then that’s correct that you don’t see this action – the launch scripts are generated and managed by Toolbox.
      If it’s not the case, please let us know what OS you are using.

      • Helio says:

        You are right, I did installed it through Toolbox app. Do you know how I can create a script to start Webstorm from the command line through Toolbox?


      • Dean says:

        hmm yeah this is a bit annoying,

        calling webstorm from command line now points to the old location,

        doing triple-shift, then typing command line tools, results in it greyed out

        ticking the options in the tools then uninstalling+redownloading+reinstalling looks like it doesn’t “hook up to the shell” as expected

        • Ekaterina Prigara says:

          Sorry, I’m not sure I follow the steps you’ve made. Is the problem that after installing WebStorm 2019.1 the shell script still points to the previous WebStorm version?

          • Dean says:

            Yep typing webstorm into shell reports that version 183 no longer exists at the old location.

            I saw a comment about trying to re-call the “create command lines shortcut” by calling either from the command-pallet or by giving it a keyboard shortcut, however it doesn’t load up the prompt anymore.

            And on the toolbox downloader widget, it appears to have an option to setup the shell scripts path for it, but doesn’t appear to work as easy or as expected

          • Ekaterina Prigara says:

            Can you please send the Toolbox logs (click on the gear icon and then on the Show log file button at the bottom of the window) to our colleagues at the Toolbox team toolbox-support@jetbrains.com

  3. Helio Alves says:

    Will il be still available in the 2019 but it has only been removed from the EAP?

  4. Helio says:

    You are right, I did installed it through Toolbox app. Do you know how I can create a script to start Webstorm from the command line through Toolbox?


    • Ekaterina Prigara says:

      Sorry for the delayed reply. Please check that script generation is on in Toolbox – click the gear icon in Toolbox and find Generate shell scripts. Thanks!

  5. tareqD says:

    LOVING the new debugger. Just had to come up here and say it.

  6. Tobias Feil says:

    Please make it so when logging an object, it shows its properties already in the output like it does in chrome. There is never a case where I wouldn’t need this… otherwise I wouldn’t log the object. Thank you!

Leave a Reply

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