記事内に広告が含まれています。

Visual Studio Code + xampp で PHP デバッグ（サンプルあり）

2024年9月22日

xampp と Visual Studio Code を使った PHP デバッグの方法を紹介します。これから PHP で開発環境を整備する方にお勧めの内容になっています。サンプルアプリケーションも公開しています。

Visual Studio Code のインストール

下記 URL から、OS に対応する Visual Studio Code インストーラーをダウンロードし、インストールします。

Download Visual Studio Code - Mac, Linux, Windows

xampp のインストール

下記 URL から、OS に対応する xampp インストーラーをダウンロードし、インストールします。 ※ インストーラーのダウンロードに時間がかかるかもしれません。

XAMPP Installers and Downloads for Apache Friends

xampp コントロールパルの起動

xampp のコントロールパネルは、Windows であればデフォルトで下記のパスにインストールされています。

C:\xampp\xampp-control.exe

起動すると次の画面が表示されます。

Apache の起動

Apache コントロールパネル上の、Start ボタンをクリックして Apache を起動します。

Apache が起動すると、Apache が緑色でハイライトされます。

Apache が起動できない場合の対処方法

Apache が起動に失敗すると、Apache が赤色でハイライトされます。

また、ログに次のようなエラーメッセージが表示されます。

エラーメッセージ

[Apache] Problem detected!
[Apache] Port 80 in use by "Unable to open process" with PID 4!
[Apache] Apache WILL NOT start without the configured ports free!
[Apache] You need to uninstall/disable/reconfigure the blocking application
[Apache] or reconfigure Apache and the Control Panel to listen on a different port

[Apache] Port 80 in use by "Unable to open process" with PID 4! は、既に Port 80 番で他のプロセスが起動していることを示しています。多くの場合、World Wide Web 発行サービスを止めることで解消できます。

World Wide Web サービスの停止方法

キーボードショートカットの Windows + R を押下し、services.msc を実行します。

サービス画面上で「World Wide Web 発行サービス」を停止します。

Apache の起動再試行

再度 xampp コントロールパネルで Apache を起動します。

Apache の停止

後ほど解説する、Xdebug の有効化を行うため、起動している Apache を停止しておきます。

Apache を停止します。

Apache がハイライトされておらず、停止したことが分かります。

Xdebug のダウンロード・配置

Xdebug は、PHP でのデバッグを行うためのモジュール（DLL）です。開発環境にインストールされている PHP に対応するバージョンの Xdebug をダウンロード・配置するには、次の手順を踏みます。

  1. PHP がインストールされているフォルダに移動する
  2. コマンドラインを起動する
  3. コマンドラインで php -i | clip を実行する
  4. 利用する Xdebug のバージョン特定・ダウンロード
  5. Xdebug の配置

PHP がインストールされているフォルダに移動する

xampp のデフォルト設定で PHP がインストールされているフォルダは、C:\xampp\php になります。C:\xampp\php をファイルエクスプローラーで開きます。アドレスバーに cmd と入力し、Enter を押下します。

コマンドラインを起動する

C:\xampp\php をコマンドラインで開けていることが分かります。

ターミナルで php -i | clip を実行する

ターミナルで php -i | clip を実行します。実行結果はクリップボードに保存されます。ターミナルには何も表示されません。

利用する Xdebug のバージョン特定・ダウンロード

Xdebug Installation Wizard ページを開きます。

Xdebug: Support — Tailored Installation Instructions

クリップボードの内容をテキストエリアに張り付けて、「Analyse my phpinfo() output」ボタンをクリックします。

解析結果に遷移します。ページ下方に表示されているモジュール（DLL）のダウンロードリンクをクリックします。

Xdebug の配置

ダウンロードしたモジュールを C:\xampp\php に配置します。

Xdebug の有効化

php.ini に、次の記述を加え、Xdebug のデバッグ機能を有効化します。4 行目に、Xdebug モジュールへのファイルパスを記述しています。

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
zend_extension = "C:\xampp\php\ext\php_xdebug-3.3.2-8.2-vs16-x86_64.dll"
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003

Apache の起動

php.ini への編集が終わったため、再度 Apache を起動しておきます。

PHP Debug 拡張機能のインストール

PHP Debug をインストールします。PHP Xdebug は、Xdebug と Visual Studio Code を連携するための、Visual Studio Code の拡張機能です。

PHP Debug - Visual Studio Marketplace

デバッグ用 PHP アプリケーションの用意

xampp インストールフォルダ配下に、デバッグ用 PHP アプリケーションを用意します。

  1. アプリケーション用フォルダの作成
  2. index.php の作成
  3. launch.json の作成

アプリケーション用フォルダの作成

debug という名前のフォルダを作成します。

debug フォルダ上で右クリックし、その他のオプションを確認 をクリックします。

Code で開く をクリックします。

Visual Studio Code で debug フォルダを開くことができました。

index.php の作成

index.php を作成します。

index.php に、次のデバッグ確認用コードを貼り付けます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP デバッグテスト</title>
</head>

<body>

    <h2>ボタンをクリックします。</h2>
    <form method="POST" action="">
        <input type="submit" value="クリック">
    </form>

    <?php
    // フォームが送信された場合に処理を開始
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        // デバッグ用：h2 タグ出力処理でブレイクポイントを設定し、処理を止める
        echo "<h2 style='color:darkred'>ボタンがクリックされました！</h2>";
    }
    ?>
</body>

</html>

また、index.php 21 行目の左側をクリックし、ブレイクポイントを設定します。ブレイクポイントが設定できれば赤丸が表示されます。アプリケーションのデバッグ実行時、このブレイクポイントで処理を中断することができます。

launch.json の作成

デバッグタブを選択し、create a launch.json file をクリックします。

.vscode フォルダと launch.json が生成されていることが分かります。

ここまでで、デバッグ用 PHP アプリケーションの用意ができました。

index.php のデバッグ実行

デバッグタブで Listen for Xdebug を選択し、実行ボタンをクリックします。

ブラウザで http://localhost/debug/index.php を開きます。クリックボタンをクリックします。

Visual Studio Code の index.php 21 行目で処理が止まっていることが分かります。

F5 もしくは Continue ボタンをクリックします。

実行結果の確認

index.php 21 行目の処理が行われ、h2 タグに文字列が表示されました。

サンプルアプリケーション

debugダウンロード

debug.zip を解凍し、xampp のインストールフォルダ（デフォルトでは C:\xampp\htdocs）に配置してください。

まとめ

今回は、下記のように、環境設定やアプリケーションのデバッグ実行を行いました。手順は多いですが、一つ一つは簡単な設定となっています。環境構築の際には、本記事をご活用いただければと思います。

  • Visual Studio Code のダウンロード・インストール
  • xampp のダウンロード・インストール
  • Apache の起動確認
  • Xdebug のダウンロード・インストール・設定
  • PHP Debug 拡張機能のインストール
  • デバッグ用サンプルアプリケーションの実装
  • アプリケーションのデバッグ実行

-PHP