【VSCode】JavaScript（ブラウザ）デバッグでブレークポイントで停止しない時の対処

VSCodeでブラウザ上で動作するJavaScriptをデバッグするとき、ブレークポイントで停止してくれないということがあります。
localhostのままなら動作するけれど、XAMPPのバーチャルホストでドメインを設定した場合などは停止しないですね。

こんな時の対処法をお伝えします。

JavaScriptのデバッグでブレークポイントで停止しないのは、URLとファイルのパスが一致しないことが原因の一つです。

JavaScriptが実行されるのはブラウザです。
そのためVSCodeは、ブラウザにブレイクポイントなどの指示を出します。

しかしブラウザが把握しているのは、ＵＲＬです。
VSCodeはソースファイル名をＵＲＬに変換してから、ブラウザに指示する必要があるのです。

この時、ブラウザが把握しているＵＲＬとVSCodeが指示したＵＲＬが一致しないと、ブレイクポイントは無効になります。

ＵＲＬへの変換はデバッガ起動時のURL等から類推している（と思われる）のですが、実体と異なるものになることがあるのです。

ブレークポイントで停止しないときは、launch.jsonで"pathMapping"を定義します。

"pathMapping"はオブジェクト形式で、キーがURL、値がファイルシステム上のパスです。

次のような記述になります。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://テストドメイン.com/test.html",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "http://テストドメイン.com":"C:\\test2"
            }

        }
    ]
}

URL上の構造と、ファイルシステム上の構造が異なる場合も、"pathMapping"で対処できます。

例えば、C:\javascript にスクリプトが保存されていて、http://テストドメイン.com/js にマウントしたいときは次のようになります。

"http://テストドメイン.com/js":"C:\\javascript"

さらに"pathMapping"を使うと、異なるドメインでもデバッグできるようになります。

こんな感じ↓
"http://異なるドメイン.com":"C:\\フォルダ名"

状況に合わせて、パターンを定義していきましょう。