TypeScript+Next.jsのフロントエンドをVSCodeでブレークポイントデバッグする設定

プロジェクトのフォルダ構成例

myapp
├── .vscode
|   ├── launch.json
|   └── tasks.json
├── Dockerfile
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
|   └── ...
└── tsconfig.json

設定

package.json

{
  "name": "myapp",
  "version": "0.1.0",
...
...
...
  "scripts": {
    "dev": "npx next dev",  <-- devでnextを起動する設定が "なければ" 追加
...
...
...

.vscode/tasks.json

{
{
  "version": "2.0.0",
  "tasks": [
    {
...
...
...
    }, 
    ↓↓↓↓↓↓ これを追加 ↓↓↓↓↓↓
    {
      "type": "shell",
      "command": "npm run dev",
      "label": "next: dev",
      "detail": "react-scripts start",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "^$"
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Compiling...",
          "endsPattern": "Compiled .*"
        }
      }
    }
  ]
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
...
...
...
    }, 
    ↓↓↓↓↓↓ これを追加 ↓↓↓↓↓↓
    {
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "next: dev",
      "name": "Launch Chrome for frontweb debug",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/./*": "${webRoot}/*"
      }
    }
  ]
}

余談

        "webpack://_N_E/./*": "${webRoot}/*"

を↓こうするとダメだった
VSCode側のソースコードとブレークポイントがリンクしない

        "webpack://_N_E/./*": "${webRoot}/src/*"

実行

起動

実行とデバッグ で Launch Chrome for frontweb debug を実行する

> myapp@0.1.0 dev
> npx next dev

  ▲ Next.js 13.5.6
  - Local:        http://localhost:3000

 ✓ Ready in 1385ms

とVSCodeのターミナルに表示されたら http://localhost:3000 をブラウザで開く（※そのブラウザウィンドウはもう使用しない）

そうするとこう続いた後、

 ○ Compiling / ...
 ✓ Compiled / in 9.1s (14126 modules)

VSCodeのフッターがオレンジ（実行中状態）になり、

別個にまっさらのChromeウィンドウが別個に http://localhost:3000 で起動する

このChromeウィンドウを操作すれば、VSCode側のソースコードにブレークポイントを仕掛けたところで処理を止めたりできるようになる

終了

VSCodeのターミナル上で Cmd + c (Ctrl + c)