ReactJS project with Javascript Debug config: Chrome plugins (React and Redux Dev Tools) not showing up in Chrome instance launched

By default, a debugging session starts in a new window with a custom Chrome user data. This is done to run Chrome with --remote-debugging-port argument, as a port for debugging can't be opened after browser is started with default profile.

 To open a Chrome instance with your familiar look-and-feel and extensions instead, you can configure Chrome in WebStorm to start with your user data, see Starting a debugging session with your default Chrome user data for details. Note that, when using the specified user data, you will need to make sure to close all browser instances using this data before starting the debugger, it won't connect otherwise

Thanks.  I followed the instructions and it still doesn't work.  The one step I was unsure about was "Save your Chrome user data anywhere on your machine." -- I simply gave the directory where the default user data was stored, I didn't copy the data anywhere else.   Please see attached images.

When I hit 'run' in the tool bar it opens with my user data.  When I hit debug, it opens the 'anonymous' Chrome instance, like before.

One question: do I need to close all running Chrome browsers before launching the debugger?  That's what the docs seemed to say.  I did that, but it still didn't work. 

Use custom user data directory field in Browser options is expected to point to user data directory (like ~/Library/Application Support/Google/Chrome, without profile name), not profile directory (like ~/Library/Application Support/Google/Chrome/Default)

>do I need to close all running Chrome browsers before launching the debugger?

Yes, you do

@Elana Pogorelova

I have a custom instance of Chrome that always launches with my data and ```--remote-debugging-port``` enabled. Can I configure Webstorm to attach to this already-running instance for a js debug session instead of starting a new one as above? 

No, as the IDE can't know what port the browser is listening on.

The only way to attach to a running instance is using the JetBrains Chrome Extension (by installing it as described in Installing the JetBrains Chrome Extension  and enabling Use JetBrains IDE Support extension for debugging and Live Edit in Settings | Build, Execution, Deployment | Debugger | Live Edit. But note that it doesn't work reliably with recent Chrome versions

Would it be feasible to allow the user to set the debug port in Webstorm and/or know in advance what port Webstorm will use? My script, for example, runs Chrome w 

--remote-debugging-port=9222

Or is this behavior achievable in Firefox?

please vote for https://youtrack.jetbrains.com/issue/WEB-38923

>Or is this behavior achievable in Firefox?

no, it's not

All this part works perfectly. You need to add your Chrome user data to your browser configuration. Type in your Chrome browser chrome://version, copy the Profile Path. In your IDE settings > Tools > Web Browsers and Preview > choose Chrome and click on the edit icon, mark “Use custom user data directory” and paste the path of your profile. After you have done that, close all browser instances and run JavaScript Debug with http://localhost:3000 for example. I'm recommending to run npm script with BROWSER=none, so that it does not open the browser every time, because you will use JavaScript debugger. Sometimes you need to log in to your Google account, but only for the first time. The only thing that doesn't work for me, no matter what I do, is initiating tracing through IntelliJ instead of through the browser. Clicking on a segment of code after configuring the project path and editor name does nothing, even if I am not using the debugger.

The only thing that doesn't work for me, no matter what I do, is initiating tracing through IntelliJ instead of through the browser. Clicking on a segment of code after configuring the project path and editor name does nothing, even if I am not using the debugger.

Not sure I've got what you mean, please could you share a video recording of the issue?