Attach IDE debugger to current chrome which opened by react-scripts (chrome --remote-debugging-port)

Created by: salehi186

Description

What are you reporting? How to attach IDE debugger to current chrome which opened by react-scripts

Expected behavior

in hot development , you want to debug your code in your favorite IDE without leaving the IDE

Actual behavior

It is possible to set default browser by 'process.env.BROWSER; ' -

openBrowser.js line 20

function openBrowser(url) {
  // Attempt to honor this environment variable.
  // It is specific to the operating system.
  // See https://github.com/sindresorhus/opn#app for documentation.
  const browser = process.env.BROWSER;
.
.
}

• but you can not set --remote-debugging-port or other parameters for browser.

As I have seen react-scripts used "opn" library which support the arguments too.

// specify app arguments 
opn('http://sindresorhus.com', {app: ['google chrome', '--incognito']});

It helps developer to attach their IDE debugger to the opened chrome.

for example in vscode by this lunch configuration can attach to process instead of lunch new one:

{
    "name": "Chrome",
    "type": "chrome",
    "request": "attach",
    "port":9228,
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
   }

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): npm ls react-scripts
2. node -v: v7.7.1
3. npm -v:4.1.2

Then, specify:

1. Operating system: Linux
2. Browser and version: Chrome

By doing this, you're helping the Create React App contributors a big time! Demonstrable issues gets fixed faster.