MENU

VisualStudioCode

JavaScript

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

更新日:2022/09/21

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

 

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

 

このページの目次
  1. 原因
  2. 対処法

原因

 

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

 

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

 

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

 

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

 

URLへの変換はデバッガ起動時の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:\\フォルダ名"

 

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

 

 

 

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

OFUSEを設置してみました。
応援いただけると嬉しいです。

このサイトは、リンクフリーで大歓迎です。