MENU

VisualStudioCode

JavaScript

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

更新日:2022/09/20

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

 

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

 

結論

 

まずは結論から。

 

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

 

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

 

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

 

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がブラウザに指示を送る必要があります。
ブラウザはファイルのパスではなくてURLで判断するので、VSCodeはソースファイルのパスをURLに変換します。

 

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

 

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

 

/test/test.js

 

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

 

 

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

 

/test.js

 

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

webRoot を変更する

 

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

 

ファイルパスと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で複数のポートや複数ドメインを設定しているときなども、この方法でデバッグできますね。

スポンサーリンク

記事の内容について

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

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

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

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

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

 

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

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