Step-through debugging in Webstorm

Hi

Is there an up to date guide on getting step-through debugging in Webstorm (2019.2) working?

I'll be honest, debugging with WS has always been very hit or miss for me: Previously i've only been able to get it to work by starting things in a very specific order (and even then it's been very temperamental). Also  the role of the JB webstorm plugin has always been unclear - i had read in some release notes that it was no longer required, and yet, i'd certainly never been able to get it work without. 

Now i'm using Webpack however, and i can never get anything to break so i can step through, and its now rather critical that i be able to debug properly. So:

- do i need the JB plugin?

- do i need to run with specific browser?

- i'm using devtool: 'source-map' in my webpack config... is there something else required?

- can i use webpack-dev-server as the command?

- What should 'Debug ...' do (it doesn't seem to do anything but run it for me). Do I need to have another run configuration to start some debugger beforehand? (this was the only way previously i could get things to break).

My apologies if this is all clear somewhere. I have searched and found links, but many either don't work for me, or seem to be outdated.

 

Thanks so much for any help!

 

 

 

5 comments
Comment actions Permalink

> do i need the JB plugin?

Do you mean JetBrains IDE Support Chrome extension? No, you don't need it (I'd actually recommend turning it off in Settings | Build, Execution, Deployment | Debugger | Live Edit as it's unstable and not up-to-date)

>do i need to run with specific browser?

Yes, it should be Chrome

> i'm using devtool: 'source-map' in my webpack config... is there something else required?

Normally not; to debug an app bundled with webpack, ensure that the source maps are enabled in your webpack.conf.js, specify the URL your app is running on in the JavaScript debug configuration and you’re ready to go.

>can i use webpack-dev-server as the command?

sure you can

Please see https://blog.jetbrains.com/webstorm/2018/01/how-to-debug-with-webstorm/ for information about debugging in Webstorm.

0
Comment actions Permalink

HI 

Thanks Elena - have certainly read the article you posted above.

 

Can you clarify a couple of points? 

1. How do you force Chrome to launch? (I mostly work on a Mac, and it pretty much always loads Safari)

2. Where is the "javascript debug" configuration you refer to?

 

Steve

 

0
Comment actions Permalink

>How do you force Chrome to launch? 

You have to select it in the JavaScript debug configuration used for debugging. See Run/Debug Configuration: JavaScript Debug

Please see also https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html#debugging_js_on_external_web_server (this link is available in the article BTW)

In general, you can't expect the debugger to work unless you start your app with a debug configuration; just opening a default browser and loading your app in it won't start the debugger

0
Comment actions Permalink

ok - Thanks Elena. I have got it to stop now inside my code, though it still seems very flakey. It also stops at weird places (where i don't have breakpoints), but some improvement at least. However couple of observations:

- when paused in the debugger in the IDE every line that I am using a private field with is labelled "SyntaxError: Private field '#<fieldname>' must be declared in an enclosing class which means it's not evaluating any of those fields. Looks like bug to me.

- it looks like you can't see variables held by the super class (really one class). Hovering over them doesn't work and they aren't showing in the variables view

thanks for your help!

Steve

 

 

0
Comment actions Permalink

Please can you share a sample project I can use to recreate the issues?

0

Please sign in to leave a comment.