Is webstorm able to debug webpack application in firefox

I opened https://github.com/prigara/debugging-webpack this github in webstorm and configured firefox remote debug. But I can only add breakpoint in bundle.js. Adding breakpoint in any other file doesn't work. I didn't find an instruction to setup webpack application debug in firefox. Thanks in advance.

8 comments

The answer is 'no':(

FireFox debugging support is very limited - you can only debug raw javascript (no sourcemaps) on a built-in webserver. So debugging applications bundled with webpack won't work, as such apps use sourcemaps to map source code to the code run in VM.

Please follow https://youtrack.jetbrains.com/issue/WEB-30010 and https://youtrack.jetbrains.com/issue/WEB-2337 to be notified on any progress with these tickets.

1

Hi Elena,

Thanks for your answer.

Then what is the lowest Chrome version which supports source map debugging? Does Chrome support remote debugging(i.e. running Chrome and Webstorm in different machines)? 

0

chrome has to be run on the same machine as webstorm (but web server can be run anywhere)

Chrome API changes from version to version, old Chrome versions may be incompatible with current Webstorm version, but i can't tell what is the lowest supported one

1

Does that mean the Chrome Webstorm used to debug has to be launched by Webstorm(so that connection between them can be established)?

And does the word "remote" in "firefox remote debug" mean not launched by Webstorm?

0

>Does that mean the Chrome Webstorm used to debug has to be launched by Webstorm(so that connection between them can be established)?

 

When debugging with Chrome Debugging Protocol, WebStorm runs Chrome with the --remote-debugging-port option. It is not possible to pass this option to running Chrome instance, that' why debugging is only possible if Chrome is launched from WebStorm.

When debugging with JetBrains Chrome extension, WebStorm attaches to already running Chrome instance that has the extension installed, so it's not necessary has to be started from the IDE.

 

>And does the word "remote" in "firefox remote debug" mean not launched by Webstorm?

 

No, it just means that WebStorm connects to FireFox using its remote debugging capabilities

1

Hi Elena,

Thank for your reply.

Is there any documents about debugging with JetBrains Chrome extension and attaching Webstorm to an already running Chrome instance? I've installed Chrome extension but not able to get this attachment working. Thanks in advance.

0

I have a webpack application but I'm not able to install a late version of Chrome in my system. Is there any idea about how to debug this application from Webstorm?

0

To debug with extension, you need to activate Live Edit as it's decribed in http://helpserver.labs.intellij.net/help/webstorm/2018.1/live-edit-in-html-css-and-javascript.html, Activating Live Edit

>I have a webpack application but I'm not able to install a late version of Chrome in my system. Is there any idea about how to debug this application from Webstorm?

Client-side applications bundled with webpack can only be debugged with Chrome.

0

Please sign in to leave a comment.