13

今年の MSBuild カンファレンスと、Terminal 1.x、winget、およびその他の追加機能の発表の後、新しいラップトップ (Surface Book 3 または MacBook Pro など) を購入する前に、Windows 10 をもう一度テストしたいと思いました。 ）。

問題

WSL2 と Visual Studio Code を使用して Windows 10 の Chrome で Web アプリをデバッグするときに、ブレークポイントが機能しません。デバッグ セッションを実行すると、Breakpoint set but not yet boundというメッセージが表示されます。

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

マイセットアップ

BootCamp に Windows 10 Pro がインストールされた最新バージョンの MacOS を実行する MacBook Pro。

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

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

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

アプリケーション

アプリケーションはデフォルトの Create React 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 React App エディターのセットアップ ドキュメント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 - デバッグ セッションを実行するとどうなりますか?

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

残念ながら、ブレークポイントは無視され、Visual Studio Code 内ではブレークポイントが塗りつぶされていない円として表示されます。表示されるメッセージはBreakpoint set but not yet boundです。

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

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

Win10 - Firefox は動作します

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

ブレークポイントは最初、エラーUnverified Breakpointを示していました。これをクリックすると、構成に を追加するウィザードが表示されましたpathMappings。

launch.jsonWindows 10 で使用されている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/srcWSL2 Ubuntu 内のアプリの場所であることに注意してください。MacOS Firefox のセットアップは同じですが、pathMappings.

結論

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

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

4

4 に答える 4