Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Breakpoints do not bind when debugging localhost url using WSL

オープン
#344 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
linux, node.js, typescript, vscode, webpack

調査の方向性

WSL から提供される TypeScript webpack プロジェクトで、提供された VS Code Firefox 起動構成を使用して問題を再現し、localhost URL とネットワーク URL を比較します。まず、Firefox デバッグアダプターが URL のマッチング、source maps、pathMappings をどのように処理するかを調査します。localhost URL のデバッグ時にブレークポイントがバインドされ、既存のネットワーク URL の動作が引き続き機能していれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug remote development windows

I have a typescript webpack project running on WSL serving on the following addresses:

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.23.198.163:8080/

I can access both addresses, but debug breakpoints will not bind when accessing the page through the localhost url. When I restart the debug session using the network url, the breakpoints do bind. This is an issue not only for network access reasons, but because certain web APIs cannot be accessed in insecure contexts (e.g. crypto.subtle)

This is only an issue when serving from WSL. When running the project from a normal windows environment both urls work fine.

The Chrome debugger does not have this issue with WSL.

This issue is only with breakpoints in vscode. The browser debugger works fine. Source maps are being loaded.

{
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "name": "firefox",
            "url": "http://localhost:8080",
            // "url": "http://172.23.198.163:8080",
            "webRoot": "${workspaceFolder}",
            "skipFiles": [
                "<node_internals>/**",
                "**/node_modules/**"
            ],
            "pathMappings": [
                {
                    "url": "webpack://<my-cool-project>/src",
                    "path": "${workspaceFolder}/src"
                }
            ]
        },
        {
            "name": "chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "skipFiles": [
                "<node_internals>/**",
                "**/node_modules/**"
            ]
        }
    ]
}
firefox developer edition
version: 119.0b2 (64-bit)
node version: 18.18.0
WSL version: 1.2.5.0
Kernel version: 5.15.90.1
WSLg version: 1.0.51
MSRDC version: 1.2.3770
Direct3D version: 1.608.2-61064218
DXCore version: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows version: 10.0.22621.2134
主要言語
TypeScript
スター
445
フォーク
77
PR マージ指標
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

firefox-devtools/vscode-firefox-debug のほかの issue

firefox-devtools/vscode-firefox-debug の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。