TOPページ ▶ 開発環境/ツール ▶ IDE/エディター ▶

【VSCode】PHPでのコード作成とデバッグ手順(JS対応)

更新日：2023/02/06

Visual Studio Code(VSCode)でPHPを使ってプログラム開発を行うの必要な準備からコード作成、デバッグまでの流れをまとめてみます。

ここではブラウザ上で動作するJavaScriptもデバッグできるように設定します。

VSCodeのインストール方法については、次のページを読んでみてください。
■【VSCode】Visual Studio Codeをインストールしてみる

このページの目次

1PHP環境の準備
PHP本体をインストール
Xdebugのインストール
Webサーバーを用意
PHP Debugのインストール
PHP Intelephenseのインストール
2プロジェクトの開始：フォルダを開く
3ターミナルでPHPを実行
4コードの作成
5構文のチェック
6デバッグの準備
launch.jsonの作成
PHP DebugをWebサーバーとして使う場合
XAMPP等をWebサーバーとして使う場合
7デバッグの方法

PHP環境の準備

VSCodeを使ってPHPプログラミングを行う場合、次のような環境を構築することになります。

PHPを実行するのはWebサーバーです。
そしてＰＨＰの拡張機能のXDebugが、VSCodeのPHPデバッガ―とポート経由で通信をします。

つまり、次の機能を用意します。

PHPを処理（実行）できるWebサーバー
PHP本体
XDebug
VSCode拡張機能のPHPデバッガ―

さらに、XDebugとPHPデバッガ―間でポート通信できるように設定をおこないます。

PHP本体をインストール

まずはPHP本体をインストールします。
ただし、XAMPPなどのWebサーバーが既にインストールされている場合は、サーバー内のＰＨＰを使用できます。

インストールする場合は、Windowsなら次のページからZipをダウンロードして適当なフォルダを作って展開します。

■https://windows.php.net/download/

全部で４種類あります。
OSが64bitなら、x64 Thread Safe版を選びましょう。

コマンドプロンプト等でPHPを実行する予定があるなら、環境変数PATHにインストールしたフォルダを含めます。

方法はこちら。
■Windows10で環境変数を追加・変更する方法
Windows11は知らない・・・

他のＯＳは、ネットで調べてみてね！

Xdebugのインストール

Xdebugをインストールします。

インストール方法は、こちら↓
https://xdebug.org/docs/install

Windowsの場合は次のページからダウンロードします。

■https://xdebug.org/download/historical

ＰＨＰ本体のバージョンと一致するもので、alpha版ではない最新バイナリをダウンロードします。
TSはThread Safeの略です。

ダウンロード先はどこでもいいのですが、PHP本体フォルダ内に ext という名前の拡張モジュール用フォルダがあるので、そこに入れるのが一般的です。
次に、PHP本体フォルダ内の php.ini を開いて、Xdebugの設定を記述するのですが…
Xdebugのバージョン3と2では、内容が異なります。

Xdebugのバージョン3系

[XDebug]
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9003
zend_extension = c:\php8.1\ext\php_xdebug-3.1.5-8.1-vs16-x86_64.dll

PHPのバージョン7.1以前は2系です。

Xdebugのバージョン2系

[xdebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_port = 9000
zend_extension = c:\php8.1\ext\php_xdebug-3.1.5-8.1-vs16-x86_64.dll

ポート番号はデフォルト値を記述しています。
zend_extensionは、ダウンロードしたXdebugのフルパスを入力してください。

Webサーバーを用意

XAMPPなどのWebサーバーが既にインストールされている場合は、そのサーバーを使用できます。

Webサーバーが無い場合は、次項のPHP DebugがWebサーバーの機能を持っているので用意しなくても大丈夫です。

なおPHP DebugのWebサーバーは、ドキュメントルートを動的に設定できます。
XAMPPなどのWebサーバーは固定なので、プロジェクトの状況に合わせて使い分けるといいでしょう。

PHP Debugのインストール

次にPHP Debugをインストールします。
PHP Serverと同じように、VSCodeの拡張機能パネルからインストールしてください。

インストールしたら、次の項目を設定します。

項目	内容	値
PHP › Debug: Executable Path	PHP本体のパス	setting.jsonで編集 c:\php\v8.1\php.exe等

項目

内容

値

PHP › Debug: Executable Path

PHP本体のパス

setting.jsonで編集

c:\php\v8.1\php.exe等

PHP Intelephenseのインストール

これはやってもやらなくても、どちらでもいいです。
デバッグには影響しません。

VSCodeは標準でPHPコードの補完機能がありますが、PHPの最新バージョンに対応していないなど少し不便な点があります。
そこで標準機能を無効にして、拡張機能の「PHP Intelephense」をインストールします。

同じような拡張機能に「PHP IntelliSense」があります。
どちらも同じような使い勝手ですが、「PHP Intelephense」はPHPのバージョン指定できるので古いバージョンで開発をする時などは便利です。
いつも使っている関数が、古いバージョンでは存在しないことが良くありますからね。

インストールしたら、次の項目を設定します。

項目	内容	値
PHP › Suggest: Basic	組み込み補完機能を有効にするか	無効にする（チェックを外す）
PHP › Validate: Enable	組み込み検証機能を有効にするか	無効にする（チェックを外す）
Intelephense › Environment: PHP Version	PHPのバージョン指定	8.1.0等

プロジェクトの開始：フォルダを開く

VSCodeはフォルダー単位でプロジェクトを管理します。
実際にはVSCodeではプロジェクトという言葉を使用しません。
その代わりにワークスペースという言葉を使用します。

まずは、次の手順でファイルを保存するフォルダーを開きます。
あらかじめ作成しておくといいですね。

メニュー：ファイル(F)　の「フォルダーを開く」を選択
フォルダーを選択

フォルダーを開くと、次のようにVS Codeのエクスプローラーにフォルダー名が表示されます。

ターミナルでPHPを実行

VSCodeのターミナルでPHPコマンドを実行させたいときは、環境変数PATHにPHP本体のパスがセットされている必要があります。

パスがセットされていなかったり、プロジェクト単位でPHPのバージョンを変更したい時などは、ターミナル起動時のパスを変更します。

パスの設定については、次のページを読んでみてください。
■【VSCode】ターミナル起動時のパス（PATH）を変更する方法

Windowsのコマンドプロンプトなら、次のように記述します。

設定例：settings.json


    "terminal.integrated.defaultProfile.windows": "Command Prompt",

    "terminal.integrated.profiles.windows": {

        "Command Prompt": {
            "path": [
                    "${env:windir}\\Sysnative\\cmd.exe",
                    "${env:windir}\\System32\\cmd.exe"
            ],
            "env": {
                "PATH":"c:\\php\\v8.1;${env:path}"
            },
            "args": [],
            "icon": "terminal-cmd"
        }
    },

これで環境変数PATHにPHP本体へのパスが含まれます。

コードの作成

次の手順で、新しいファイルを作成します。

メニュー：ファイル(F)　の「新しいテキストファイル」を選択
表示された画面の1行目にある「言語の選択」をクリック
表示された言語の選択画面から、目的のプログラミング言語を選ぶ
メニュー：ファイル(F)　の「保存」を選択し、名前を付けて保存する

最後の保存は、コード入力後でも問題ありません。
ただ、左側のエクスプローラーに表示されないので、ファイル構成を把握しにくいです。
最初に保存したほうが使いやすいと思います。

今回は、次の２つファイルを作成しました。

test.php


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

test.js


console.log( "aaa" );

php と js の両方にブレークポイントを設置してデバッグで停止するかどうか確認するのが目的なので、内容は適当です。

構文のチェック

VS CodeはPHPとJavaScriptの構文のチェック機能が組み込まれています。

今回はPHPについては組み込み機能を無効にして、PHP Intelephenseがチェックしています。

VS Codeのフッターバーの左端を見ると、現在のエラーや警告の数が表示されています。
そこをクリックすると、問題パネルが表示されます。

上の画像は今回作成したコードと異なりますが、イメージとしては伝わると思います。

構文エラーは問題パネルを見ながら修正していきましょう。

デバッグの準備

VSCodeのデバッグを行うには、まず launch.json で構成を定義します。

launch.jsonは初期状態では存在しません。
次の手順で作成します。

launch.jsonの作成

左端にあるアクティビティーバーの「実行とデバッグ」をクリック
phpファイルを表示
launch.jsonファイルを作成しますをクリック

これで、PHPデバッグ向けの launch.json が作成されます。
launch.jsonには、次の３つの構成が定義されています。

構成名	内容	設定ポイント	備考
Listen for Xdebug	XDebugからのメッセージを受信開始	"port":php.iniで指定したポート	ブラウザは別途表示させる
Launch currently open script	現在表示しているPHPを実行	"program":実行するPHPファイル	コマンドラインでの実行
Launch Built-in web server	PHPの組み込みサーバーを起動してブラウザ表示	"port":php.iniで指定したポート "uriFormat":ブラウザで表示するURL "action":起動するブラウザ規定"openExternally"、Crome"debugWithChrome"、Edge"debugWithEdge"	"runtimeArgs"の"localhost:0"は PHP組み込みサーバーのポートを指定していて0はランダム。

構成名

内容

設定ポイント

備考

Listen for Xdebug

XDebugからのメッセージを受信開始

"port":php.iniで指定したポート

ブラウザは別途表示させる

Launch currently open script

現在表示しているPHPを実行

"program":実行するPHPファイル

コマンドラインでの実行

Launch Built-in web server

PHPの組み込みサーバーを

起動してブラウザ表示

"port":php.iniで指定したポート
"uriFormat":ブラウザで表示するURL
"action":起動するブラウザ規定"openExternally"、Crome"debugWithChrome"、Edge"debugWithEdge"

"runtimeArgs"の"localhost:0"は

PHP組み込みサーバーのポートを
指定していて0はランダム。

この設定だけでもデバッグできるのですが、使いやすいように少し改良してみます。

PHP DebugをWebサーバーとして使う場合

PHP DebugをWebサーバーとして使う場合は"Launch Built-in web server" の構成を使用します。

この構成を実行するとセッションが二つ起動するのですが、片方を停止してももう一方が残ってしまいます。

そこで、次のように構成を変更します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Built-in web server",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.start_with_request=yes",
                "-S",
                "localhost:5000"
            ],
            "program": "",
            "cwd": "${workspaceRoot}",
            "port": 9003,
            "presentation": {
                "hidden": true,
            }
        },
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:5000/test.php",
            "webRoot": "${workspaceFolder}",
            "presentation": {
                "hidden": true,
            }
        },
    ],
    "compounds": [
        {
            "name": "デバッグ開始",
            "configurations": ["Launch Built-in web server","Launch Chrome"],
            "stopAll": true
        }
    ]
}

"Launch Built-in web server"は"serverReadyAction"でブラウザを表示していますが、削除しました。

かわりにブラウザ表示を行う定番構成の"Launch Chrome"を追加しています。
この構成の"url"はポート番号を指定する必要があるので、"Launch Built-in web server"の"localhost:0"を適当なポートに変更しています。

"compounds"は、複数の構成を同時に起動させるための定義です。
この中の"stopAll"は停止ボタンでセッションを停止したときに、残りのセッションを停止させるかどうかを指定します。

"presentation"は、デバッグ構成の選択一覧で非表示にしています。
これによって"デバッグ開始"のみが表示されるので、分かりやすくなります。

XAMPP等をWebサーバーとして使う場合

PHPの組み込みサーバー以外を使用するときは"Listen for Xdebug" の構成を使用するのですが、別途、ブラウザを起動する必要があります。

面倒なので、ブラウザ起動も構成に含めます。

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

WebサーバーのドキュメントルートをVSCodeで開いている時は、この構成でデバッグできます。

しかしドキュメントルートのサブフォルダや、実行時に同期させるなどで全く異なる階層を開いている時は、"pathMappings"(PHPの時)または"pathMapping"(JSの時)プロパティでパスを一致させる必要があります。

２つ挙げたけど何が違うのか…最後に"s"があるかどうかです。
一致させて欲しかった。

今回はWebサーバーのドキュメントルート d:\xampp\htdocs で、VSCodeのフォルダは外部にあるケースを想定します。

XDebugからの情報は、「d:\xampp\htdocs\test.php のブレークポイントで停止」という具合なので、これをVSCodeのフォルダに変換できるように設定します。

この時の"Listen for Xdebug"は次のようになります。

      {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "presentation": {
                "hidden": true,
            },
           "pathMappings": {
                "d:\\xampp\\htdocs":"${workspaceRoot}"
           }
        },

一方JSですが、これはブラウザとの通信となり内容はＵＲＬです。
「http://localhost/test.js のブレークポイントで停止」という具合ですね。
この場合はVSCodeの内部でうまい具合に変換してくれます。
そのためマッピング指定は必要ありません。

ポート指定していたライドメインを使用している時などは上手い具合に変換してくれないことがあるので、"pathMapping"を設定しましょう。

デバッグの方法

最後にデバッグの方法をお伝えします。
画像のコードが今回作成したものと異なりますが、イメージは伝わると思います。

行番号の左側をクリックすると、ブレイクポイントを設置できます。
再度クリックすると、ブレイクポイントを削除できます。

ブレイクポイントで停止したら、変数などの値を確認できます。

デバッグコンソールを開くと、JavaScriptのconsoleメソッドで出力した内容を確認できます。
デバッグコンソールは、メニュー：表示で開くことができます。

ブレイクポイントからの再開は、デバッグツールバーの最初のアイコン（続行）をクリックします。

他のボタンは、次のような意味があります。

ステップオーバー：次のコードに進む
ステップイン：関数・メソッド内に入る
ステップアウト：関数・メソッドから出る
再起動：最初から始める
停止：デバッグを停止する

更新日：2023/02/06

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

TOPページ ▶ 開発環境/ツール ▶ IDE/エディター ▶

記事の内容について

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

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

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

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

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

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