Debugging JavaScript with WebStorm 2017.3

We have some good news for everyone who is using WebStorm to debug client-side JavaScript apps in Chrome!

The first big news is that starting with Chrome 63, you can now use Chrome DevTools and WebStorm debugger at the same time.

Second, with WebStorm 2017.3 you no longer need an additional Chrome extension to debug apps in WebStorm.

Debugging in WebStorm and in Chrome DevTools at the same time

If you’ve ever tried to open DevTools in the browser while having a debugger opened in WebStorm, or vice versa, you saw that the WebStorm debugger immediately disconnected.

That happened because both WebStorm and DevTools are using the same debug protocol that did not support multi-client debugging. For many years, this Chromium issue was one of the most popular on their tracker. Well, now it’s finally fixed in Chrome 63!

This means that now you can use both the DevTools debugger and the WebStorm debugger at the same time, having their best features at your command.

For example, you can debug your app using WebStorm where you can put the breakpoints right in the source code, and then use the DevTools Elements panel to inspect DOM and styles, or its powerful Network panel to get insights into network performance.

Debugging with Webstorm and Chrome at the same time

Stepping through the code is synchronized between DevTools and WebStorm. Once a breakpoint is hit, you can use the step and resume actions in either tool – both tools will show the execution point in the code and update the call stacks and the variables view.

Easy start with JavaScript debugger

As of WebStorm 2017.3, you no longer have to install JetBrains’ Chrome extension to debug your client-side apps in the IDE.

To debug the app, all you have to do now is create a new JavaScript debug configuration and specify the URL your app is running on. Then put the breakpoints in the code and start the debug configuration. WebStorm will open a new instance of Chrome (with the remote debugging on) and seamlessly attach to it.

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 Cool Feature and tagged . Bookmark the permalink.

21 Responses to Debugging JavaScript with WebStorm 2017.3

  1. PC says:

    This is so cool! Will the same be available on IDEA?

    • Ekaterina Prigara says:

      Yes, it works the same in IntelliJ IDEA with Chrome 63.

      • Nate says:

        This is amazing!

        I have IntelliJ 2017.3.3 Build 173.4301.14 and it does not seem to be working, it still searches for the browser plugin.

        I have confirmed that Webstorm works, so it’s not a Chrome issue.

        Is there a different version of IntelliJ that I should be using?

  2. Exist the possibilty to eval objects in console like chrome?

    On type name var always show ‘object’ word. And hold mouse pointer on it and then wait for emergent info takes a lot of time.

    Exist a shortcut for see it ?

    • Ekaterina Prigara says:

      You can evaluate expressions right in the editor during the debug session. The action is called Quick evaluate expression: the shortcut on macOS is Alt-Cmd-F8 and on Windows and Linux it’s Alt-Ctrl-F8.
      Is that something you were looking for?

  3. Antonio says:

    Do you know if this works across sourcemaps too?

  4. Louis says:

    It sounds awesome, thanks! Will it work with the React Native Debugger?

  5. Yaroslav Admin says:

    Is it possible to attach with debugger to running Chrome instance instead of starting a new one? When I click on Debugger icon in WebStorm it starts new Chrome instance. But I would like to debug code already running in my main Chrome window.

    • Ekaterina Prigara says:

      Chrome needs to run in a remote debug mode, that is why a new instance is started.
      You can use JetBrains IDE Support Chrome extension, with it WebStorm will be able to connect to a running instance (for that you will also need to check Update application in Chrome in Preferences | Build, Execution, Deployment | Debugger | Live Edit).

  6. Julian says:

    Thanks for this.

    I’ve still got the problem that Chrome (Linux) starts with the wrong profile. Even after following your other guides. Chrome always opens without any profile I got.

  7. lmame says:

    That is very cool… It even works for unit tests (karma), it is something I was waiting for a long time!

  8. nenti says:

    Really nice feature. Can you make this work with react-native-debugger aswell? Having the posibility to set breakpoints and inspection inside webstorm while debugging react-native would be a major productivit booster of not requiring to switch back and forth between tools, finding the correct source files and refreshing the app for the testcase.

Leave a Reply

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