[WSL] VS Code上でChrome DebuggerのブレイクポイントがUnverified breakpointとなりヒットしない

事象

ブレイクポイントをセットしても、Unverified breakpoint（未検証のブレイクポイント）となり、セットしたポイントでデバッグが止まりません。

TL;DR

この記事では、上記の事象を解消します。

環境

• WSL Ubuntu 16.04.6 LT

解決手順

launch.json内で、sourceMapPathOverridesでフォルダのマッピングを定義する必要があるようです。（こちらのオプションの詳細については調べていないため掘り下げません。）

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "trace": true,
            "sourceMapPathOverrides": {
                "/mnt/c/*": "C:\\*"
            }
        }
    ]
}

上記の例ではCドライブをマッピングしていますが、もしDドライブにWSLをマウントしているのであれば、 "/mnt/d/*": "D:\\*"となります。

参考文献