How Do I Make WebStorm Use Firefox Developer Edition when launching debugger?

How do I set up a configuration that will launch "C:\Program Files\Firefox Developer Edition\firefox.exe" when I hit the debug symbol on the WebStorm toolbar?

I'm using WebStorm 2017.2.1 EAP, which should have whatever purports to be the "latest and greatest" features of WebStorm.

Here's what I have tried so far that does not work:

1. Click Run / Edit Configurations ...

2. Click "+" symbol in pop-up window's toolbar

3. Choose JavaScript Debug from the list of choices.

4. Name: Angular4

5. URL: http://localhost:4200/

6. Browser: click the "..." symbol since Firefox Developer Edition is NOT A CHOICE (but should be) in the dropdown listbox.  This is where things go wrong.

7. Click green "+" symbol on the right-hand side of the "Web Browsers" pop-up window, because, once again, Firefox Developer Edition is NOT A CHOICE (but should be) in the listbox of choices already defined.  Things go from bad to worse at this point.

8. The now duplicated choice is Chrome (not a generic one that allows me to choose).   With heavy sigh, I continue on...

9. I click the "pencil icon" to try to fix the bad default choice that WebStorm has made, but discover that instead of a FULL FEATURED configuration editor that includes the ability to point to a SPECIFIC BROWSER, I'm only allowed to change the command line options.

At this point I've traversed a multi-level pop-up window sequence (not the best UI design I might add) only to find that I've reached a dead end.

 

1
9 comments

You can't use JavaScript Debug run configuration to debug in FireFox - only Chrome is supported.

For FireFox debugging, you need using FireFox Remote configuration (see https://www.jetbrains.com/help/webstorm/2017.2/debugging-javascript-in-firefox.html).

  •  In FireFox, turn on Enable remote debugging
  • hit Shift + F2 or choose Developer | Developer Toolbar to open Developer Toolbar (https://developer.mozilla.org/en-US/docs/Tools/GCLI).
  • Enter listen 6000 in there, you should get a message 'Listening on port 6000' as confirmation that it was successfully executed.
  • Open your page URL in FireFox, start debugging with FireFox Remote run configuration
  • When (if) prompted, allow incoming connection
  • Choose the URL to debug from the list of currently open URLs



Note that FireFox debugging is very limited as compared to Chrome - for example, no sourcemaps support is provided (https://youtrack.jetbrains.com/issue/WEB-2337)

1

Elena: 

Look again at the subject line: it says "Firefox Developer Edition", not "Firefox".

So, while your answer is great for someone looking to use "regular Firefox", it does not apply to my situation: which is a question about the totally brand new, "Firefox Developer Edition", which does not have the same, as you put it, "very limited" debugging capabilities that the old "regular Firefox" had.

At what point can I expect JetBrains to embrace the (as I previously stated) totally brand new Firefox Developer Edition for use in debugging Angular 4.x applications?

-2

We don't plan to invest in providing special support for Developer Edition, sorry.

But, I believe, you can use FireFox Remote run configuration to debug in it.

 

>"Firefox Developer Edition", which does not have the same, as you put it, "very limited" debugging capabilities that the old "regular Firefox" had

 

By limited debugging capabilities I meant limited support for FireFox, not capabilities of the browser itself

1
Avatar
Permanently deleted user

I've just been having the same problem trying to use an alternate browser installation (which is setup as my Default) on stock 2017.2.  The JS Debug config fools you into thinking you can use the FF-based browser configuration if it's your default:

The dropdown list doesn't show any other options though, and if I Debug it complains about not finding 'chrome'.

Also, all of the help pages and even the in-IDE description for the JS Debugger plugin say or imply that JS Debug configurations work with both Firefox and Chrome.  If you aren't going to support FF properly then that is very disappointing, but you should at least fix your documentation!

Also should note that I couldn't get FF Remote to work either.  WebStorm connects to the browser OK but the Debug window shows nothing, and it doesn't do anything if I set a breakpoint.  Not experienced enough to know if it's due to the mentioned sourcemap issue (AngularCLI/TypeScript app) or something in the setup.

 

1

>The JS Debug config fools you into thinking you can use the FF-based browser configuration if it's your default:

FF will be used if you press Run; for debugging, Chrome will be used regardless of chosen browser

>Also, all of the help pages and even the in-IDE description for the JS Debugger plugin say or imply that JS Debug configurations work with both Firefox and Chrome. 

Please can you specify what help pages you refer to? Please provide links.

as for plugin description, this plugin indeed provides support for debugging in Chrome -based browsers (via JavaScript Debug run configuration) and FF (via Firefox Remote), so there is nothing wrong plugin description

 

>Not experienced enough to know if it's due to the mentioned sourcemap issue (AngularCLI/TypeScript app) or something in the setup.

Angular Typescript app is compiled to raw JavaScript and bundled by webpack, so it can't be debugged without sourcemaps. Thus debugging in FF won't work, you need Chrome

-1

Hi Frederick P. Morrison, I was trying to do the same today! good idea but after reading this posts... I resolved this in a simple solution :) copying the path in the FF dev browser and it worked for me.

0

IntelliJ Ultimate 2021.2 Build #IU-213.5744.223, built on November 27, 2021 here.

  • Both Run and Debug, for an .html file, always open Chrome.
  • Run opens Chrome under one of my profiles.
  • Debug opens Chrome under what seems to be a completely ephemeral profile.
  • There is no indication that Debug will always launch Chrome, even if that is the case.

The lack of transparency here is concerning.

 

0

Debugging is only supported in Chrome and browsers of the Chrome family, as it's stated in Help. So, when you start the app with the run/debug configuration, the IDE will try to open Chrome (or, if it can't be found in the browsers list in Preferences | Tools | Web Browsers and Preview, the first listed Chromium-based browser will be used) .

 

If you don't need to debug your application and just like to preview your page in certain browser, try using the browser bar in editor upper right corner to open the page in the browser of your choice

0

So.... I think it would be fair to say the comments/responses were a bit sharper than really needed, which probably contributed to poor communication. We all want more features, JB cannot develop everything all at once, let's just get over that bit.

However, one thing that is lost in this discussion (probably because Elena was feeling attacked) is that it is very true that from a user perspective, if I am configuring the debugger, I am being led to believe I can setup any browser I want. I made the same mistake and lost a lot of time too trying to figure that out, before I landed here. I'm 99% sure I'm not the only one. Users are programmers and developpers who on average are decently technical persons. If a bunch of them interpret the UI in a certain way, well, possibly that the user flow isn't great.

0

Please sign in to leave a comment.