VisualStudioCode

JavaScript

【VSCode】XAMPPでサブディレクトリ単位でのJSデバッグ

更新日：2022/09/20

XAMPP等のローカルWebサーバーのドキュメントルート内で、サブディレクトリ単位でプロジェクトを作成するケースがあると思う。

そこで実際に作業をしてみたのですが、JavaScriptのデバッグ時にブレークポイントで停止してくれませんでした。
解決方法を調査したので、お伝えします。

 

結論

まずは結論から。

launch.jsonの"webRoot"を、ドキュメントルートのファイルパスにすればＯＫ。

 

ブレークポイントが有効にならない

上手くいかなかったのは、ブレークポイントで停止しなかった点です。

VSCodeでドキュメントルートのフォルダを開いて、そこでソースを作成すると上手くいきます。

しかしドキュメントルート内に作成したフォルダを開いて、そこでソースを作成するとブレークポイントで停止してくれません。

次のような構造で、ソースを作成したとします。

C:\xampp\htdocs ← XAMPPのドキュメントルート
   ┣ .vscode
   ┃   ┗ launch.json ← ①
   ┗ test ← ドキュメントルート内に作成したフォルダ
         ┣ .vscode
         ┃   ┗ launch.json ← ②
         ┣ test.html ← URL: /test/test.html 
         ┗ test.js ← URL: /test/test.js

test.html と test.js は、次のように形だけの内容です。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<script src="/test/t.js"></script>
</head>
<body>
</body>
</html>

test.js


console.log( "aaa");

①と②のlaunch.jsonは、両方とも次のようになっています。

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

ドキュメントルート起点とした①はブレークポイントが有効になり、停止してくれます。
しかしサブディレクトリを起点とした②は次のようなエラーが裏側で出ていて、ブレークポイントが無効になっています。
Unbound breakpoint

これは、バインドされていないブレークポイントという意味になります。

 

URLとソースファイルのパスが一致しない

ブレークポイントが有効にならない原因は、URLとソースファイルのパスが一致しないからです。

ブレークポイントで一時停止させるには、VSCodeがブラウザに指示を送る必要があります。
ブラウザはファイルのパスではなくてＵＲＬで判断するので、VSCodeはソースファイルのパスをURLに変換します。

その時の起点になるのが、開いているフォルダです。

ドキュメントルートを開いている時の test.js は次のようにURL変換されます。
（httpとかlocalhostとかも含まれると思いますが、省略しています。）

/test/test.js

このURLは存在するので、ブレークポイントを設定できます。

サブディレクトリを開いている時は、test.js を次のようにURL変換します。

/test.js

このＵＲＬは、存在しません。
よって、ブラウザはブレークポイントを設定できないのです。

 

webRoot を変更する

サブディレクトリでブレークポイントを有効にするには、VSCode側でソースパスとURLを一致させます。

ファイルパスとＵＲＬ変換の起点は、launch.jsonの"webRoot"で指定します。

今回の例では、次のようになります。

"webRoot": "${workspaceFolder}/../"

つまり、ファイルパスの起点をドキュメントルートのフォルダに変更したわけです。

汎用性などを考慮しないなら、次のように直接指定でも大丈夫です。

"webRoot": "c:\\xampp\\htdocs"

これで、ブレークポイントで停止してくれます。

 

pathMapping を定義する

もう一つの方法として、"pathMapping"を定義する方法があります。

キーにURLを、値にフォルダのパスを指定します。

    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost/test/test.html",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "http://localhost/test":"${workspaceFolder}",
            }

        }
    ]

この方法を使うと、異なるドメインのスクリプトをデバッグできます。

    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost/test/test.html",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "http://test1.com/":"c:\test1",
                "http://test2.com/":"c:\test2",
            }

        }
    ]

二つのフォルダ（c:\test1とc:\test2）がワークスペースに追加されていて、それぞれのフォルダ内にtest1.comおよびtest2.comと同じスクリプトファイルが存在する場合、それらのスクリプトをVSCodeでデバッグできます。

XAMPPで複数のポートや複数ドメインを設定しているときなども、この方法でデバッグできますね。

更新日：2022/09/20

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

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

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

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

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

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

 

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