VScodeの拡張機能「Debugger for Chrome」でブレークポイントが機能しない

Question

いつもお世話になっております。

標記の件につきまして、質問させていただきます。

現在、Windows10Pro 64bit上で、Docker for Windowsをインストールして開発を行っています。

エディタはVisual Studio Code(ver.1.41.1)を使っており、デバッグのために拡張機能として
「Debugger for Chrome(ver.4.12.3)」をインストールしました。

React(ver.16.12.0)を使い始めたのですが、react-scripts(ver.3.3.0)の
create-react-appコマンドを使って、最初に構築される雛形のスクリプトに対して
ブレークポイントを設定してデバッグを開始したところ、
赤い丸印がグレーになってそちらにカーソルを合わせると

Breakpoint set but not yet bound

というメッセージが表示されて、ブレークポイントで処理が止まりませんでした。

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

console.log('test1');
console.log('test2');

serviceWorker.unregister();

スクリプト自体はブレークポイントの確認をするために2箇所で「console.log」を入れていますが、
それ以外は初期の雛形のままのシンプルなもので、以下URLにアクセスすることで問題なく表示できています。

http://localhost:3000/


以下から詳細になりますが、Chromeの拡張機能の方の設定ファイルは以下のように記述しています。

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "runtimeArgs": ["--remote-debugging-port=9222"],
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

また、スクリプトの方の「package.json」は以下のようになっています。

// package.json
{
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-scripts": "3.3.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

コンパイルも問題なく完了して、以下のコマンドでサーバも正常に立ち上がります。

npm run start

この段階ではVScodeで設定したブレークポイントは赤印のまま問題ないように見えます。

しかし、VScodeでデバッグの開始ボタンを押すと、Chromeの別ウインドウが立ち上がって
ページ自体は正常に表示されるのですが、ブレークポイントの赤印がグレーになって、
そこで止まらずにコンソールに「test1」「test2」が続けて出力されてしまいます。

いろいろと原因調査したところ、nodeの起動時に「--debug」というオプションを付ければ
よさそうなところまでは何となく分かったのですが、

node --debug

　
react-scriptsの方では内部でどのようにnodeを起動させているのか分かりませんでした。

こちらについていくつか調べていた時に以下のサイトが見つかりました。

https://create-react-app.dev/docs/debugging-tests/

こちらを参考にして、package.jsonのscriptsに「test:debug」を追加してみました。

// package.json

    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
        "eject": "react-scripts eject"
    },

そして、コマンドを入力したところ以下のようなメッセージが表示されました。

root:/var/www/test# npm run test:debug

> test@0.1.0 test:debug /var/www/test
> react-scripts --inspect-brk test --runInBand --no-cache

Debugger listening on ws://127.0.0.1:9229/20a8af2c-ed6e-4ea4-8ace-339d6bd91ac1
For help, see: https://nodejs.org/en/docs/inspector

この状態でVScodeのデバッグを開始すると、Chromeが立ち上がってブレークポイントの赤印が
グレーになるのは変わらず、今度はページの方が正常に表示されませんでした。

# curl -i http://localhost:3000

curl: (7) Failed to connect to localhost port 3000: Connection refused

CURLでチェックしたところ、サーバ自体が正常に立ち上がっていないようです。

package.jsonに追加した「react-scripts --inspect-brk test --runInBand --no-cache」に
問題があるかと思われ、react-scriptsのソースを追ってみましたが、
nodeの「--debug」オプションを付与できるような箇所は見つけられませんでした。

つきましては、react-scriptsを利用したスクリプトで、VScodeとChromeの拡張機能を使って
ブレークポイントが機能するデバッグを行う方法について、何かアドバイスがございましたら
よろしくお願いいたします。