ブレークポイントが機能しないWindows10およびWSL2のVisualStudioCodeを介したChromeでのReactアプリのデバッグ

今年のMSBuild会議と、Terminal 1.x、winget、その他の追加機能の発表の後、新しいラップトップ（Surface Book3またはMacBookPro ...それが問題です）を購入する前に、Windows10に別のテストを実行したいと思いました。 ）。

問題

WSL2とVisualStudioCodeを使用してWindows10上のChromeでWebアプリをデバッグする場合、ブレークポイントが機能しません。デバッグセッションを実行すると、「ブレークポイントは設定されていますが、まだバインドされていません」というメッセージが表示されます。

MacOSでデバッグする場合、まったく同じアプリが問題なく動作します。

私のセットアップ

BootCampの下にインストールされたWindows10Proで最新バージョンのMacOSを実行しているMacBookPro。

Windows 10には、Ubuntu20.04を実行するWSL2があります。ターミナル1.xがインストールされ、Linuxコマンドラインにアクセスするために使用されます。

Visual Studio Codeは最新の1.45.1安定版リリースであり、Windows 10上のWSLリモート開発拡張機能（0.44.2）が含まれています。VSCodeはcode .、プロジェクトディレクトリ内で実行することにより、WSL2内から起動されます。

Chrome拡張機能のデバッガーは4.12.8です

アプリケーション

このアプリケーションはデフォルトのCreateReact Appであり、ブレークポイントを割り当てるための小さな変更のみが含まれています。

私は実行することから始めます：

npx create-react-app sandbox

次にsrc/App.js、ブレークポイントテストとして使用するために、いくつかの任意の変数と割り当てを簡略化して追加しました。

App.jsファイルの内容。

import React from 'react';
import './styles/main.css';

function App() {
  const test = true;
  let temp = 9;
  temp = 10;
  return (
    <div>
      <h1>Breakpoint test</h1>
      <p>Did it work?</p>
    </div>
  );
}

export default App;

constとlet作成行にブレークポイントを設定し、の再割り当てを行いtempます。

Create ReactAppエディターのセットアップドキュメントでlaunch.json推奨されている私のコンテンツ。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Win10-デバッグセッションを実行するとどうなりますか？

を使用npm run startしてCreateReact Appを実行し、Launch Chromeデバッグ構成を実行すると、期待どおりにChromeが自動的に開きます。

残念ながら、ブレークポイントは無視され、Visual StudioCode内ではブレークポイントは塗りつぶされていない円として表示されます。表示されるメッセージはブレークポイントが設定されていますが、まだバインドされていません。

MacOS-デバッグセッションを実行するとどうなりますか？

Chromeが開き、コントロールがVisual Studio Codeに戻り、ブレークポイント情報が表示されます（変数データ、コールスタックなど）。

Win10-Firefoxは動作します

興味深い側面ですが、Firefoxのデバッグは機能します。Firefoxのデバッグセッションを実行する場合、ブレークポイントがトリガーされる前に最初のページの読み込みを更新する必要があります。

ブレークポイントは最初、エラーUnverifiedBreakpointを示していました。これをクリックすると、ウィザードがpathMappings設定にを追加するように求められました。

launch.jsonWindows10で使用されているFirefoxの構成は次のとおりです。

    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
          {
             "url": "http://localhost:3000/home/rando/dev/sandbox/src",
             "path": "${workspaceFolder}/src"
          }
      ]
    }

これ/home/rando/dev/sandbox/srcは、WSL2Ubuntu内のアプリの場所であることに注意してください。MacOS Firefoxのセットアップは同じですが、がありませんpathMappings。

結論

この段階では、追加の変更は必要ないことを示唆しているVisual Studio Code WSLのドキュメントにもかかわらず、パスマッピングを別の方法で設定する必要があると結論付けることができます。

StackOverflow、助けてください。あなたは私の唯一の希望です。