【2022年版】Visual Studio CodeでPHP開発環境＋デバッグ作業でステップ実行できるようにする方法

どうも、白夜霧（@KiRi_Byakuya）です。

今回は「Visual Studio Code」でPHPの開発環境を構築して、ステップ実行など、デバッグができるようにするための設定の覚書。

1 Visual Studio Code（コードエディタ）でPHPの開発環境＋デバッグ環境を構築する大まかな手順
2 「Visual Studio Code」でPHPの開発環境を構築する
- 2.1 拡張機能「PHP IntelliSense」インストール
- 2.2 VSCode側の「基本設定（setting.json）」を編集する
3 「Visual Studio Code」でPHPのデバッグ環境を構築する
4 「Visual Studio Code」でPHPのデバッグで「ステップ実行」をやってみる。
- 4.1 VSCodeで「デバッグ構成ファイル」を作成
- 4.2 VSCodeでPHPをブレークポイントで止めてステップ実行する。
5 「ブラウザにPHPのソースコードが表示されてしまう」原因と解決方法

Visual Studio Code（コードエディタ）でPHPの開発環境＋デバッグ環境を構築する大まかな手順

手順

①VSCodeをインストール
②拡張機能「PHP IntelliSense」をインストール＆設定
③拡張機能「PHP Debug」と「PHP Extension Pack」をインストール＆設定
④デバッグ機能のブレイクポイント＆ステップ実行を確認

KiRi

①のインストール手順は省略します。

「Visual Studio Code」でPHPの開発環境を構築する

本記事では下記環境で開発環境を構築します。

OS：Windows 10 Home
Visual Studio Code Version：1.63.2
PHP 7.4.27 (cli) (built: Dec 14 2021 19:52:13) ( ZTS Visual C++ 2017 x64 )

私の場合、PHPは個別のインストールではなく、XAMPP（ザンプ）でインストールしています。

: 【2022年版】Windowsに『XAMPP』をインストールする方法と最低限の設定【無料】
Windowsに「XAMPP」をインストールするための手順と最低限の設定の覚書。
続きを見る

拡張機能「PHP IntelliSense」インストール

「PHP IntelliSense」をVSCodeにインストールする。

VSCode側の「基本設定（setting.json）」を編集する

基本設定「[Ctrl] + [Shift] + [P]→Open Setting(JSON)」を開く。

設定ファイル（JSON）に下記を追記する。


"php.validate.executablePath": "C:\\xampp\\php\\php.exe",
"php.validate.enable": false,
"php.suggest.basic": false,

設定は上から「php.exeのパス」「VSCode搭載のPHPコード検証機能を無効化」「VSCode搭載のIntelliSense機能候補提示の無効化」となります。

参考：PHP in Visual Studio Code

「Visual Studio Code」でPHPのデバッグ環境を構築する

拡張機能「PHP Debug」「PHP Extension Pack」をインストール

「PHP Debug」と「PHP Extension Pack」をVSCodeにインストールする。

VSCodeの基本設定にデバッグ用のPHPのパスを設定

設定ファイル（JSON）に下記を追記する。


"php.debug.executablePath": "C:\\xampp\\php\\php.exe",

PHP Debugを実行するためのDLLを取得

コマンドプロンプトでphp.exeのディレクトリを開いて『php -i | clip』を実行する。


php --version
PHP 7.4.27 (cli) (built: Dec 14 2021 19:52:13) ( ZTS Visual C++ 2017 x64 )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
php -i | clip

「php -i | clip」を実行しても何も表示されません。ですが、出力された文字列は自動的にコピーされている状態です。※メモ帳で「Ctrl＋V」を押すとわかります。

Xdebugの『Installation Wizard』に「php -i | clip」を実行して、自動的にコピーされた文字列を貼り付けて「Analyse my phpinfo() output」を押す。

「Analyse my phpinfo() output」を押すと、追加する必要のあるDLLのダウンロードリンクが表示されるので、リンクをクリックしてDLLを取得します。

php.iniを編集してDLLを追加

DLLをダウンロードしたページに格納先のディレクトリパスが記載されているので、それに従ってDLLを配置して下さい。

私の場合は「C:\xampp\php\ext」にダウンロードしたDLLをコピーしました。

ダウンロードページにはDLLを『「php_xdebug.dll」にリネームして下さい。』とありますが、変更しなくても問題ありません。

ダウンロードしたDLLのパスを「php.ini」の末尾に下記のように追記します。


[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug-3.1.2-7.4-vc15-x86_64.dll"

php.iniを編集して「PHP Debug」のリモートデバックを有効にする

次に「PHP Debug」の「3. Enable remote debugging in your php.ini:」に記載されている内容をphp.iniに追記します。

XDebugのバージョンによって追記する内容が異なります。XDebugのバージョンの確認は「phpinfo()」で表示されるPHPの設定画面で確認可能です。
XAMPPでPHPをインストールした人は、Apacheのダッシュボード画面からphpinfoを表示するリンクがあるので、確認して見て下さい。
XDebugのバージョンが表示されない場合は、php.iniに追記したDLLのパスが間違っている可能性があります。

私の場合は、バージョンがv3.1.2なので下記を追記しています。


[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug-3.1.2-7.4-vc15-x86_64.dll"
xdebug.mode = debug
xdebug.start_with_request = yes

これでVSCodeでステップ実行可能なPHPのデバッグが可能になります。

「Visual Studio Code」でPHPのデバッグで「ステップ実行」をやってみる。

使用するサンプルは、本記事の参考記事である下記から引用させて頂きますm(_ _)m

PHPプログラミングも快適に！ VS Codeの二大拡張機能

本記事ではXAMPPでApacheを起動してphpを実行しています。XAMPPのインストールと設定は、下記記事を参考にして下さい。

: 【2022年版】Windowsに『XAMPP』をインストールする方法と最低限の設定【無料】
Windowsに「XAMPP」をインストールするための手順と最低限の設定の覚書。
続きを見る

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>PHP sample page</title>
</head>
<body>
  <form action="hello.php" method="post">
    <p>
      Hello
      <input type="text" name="whom">
      <input type="submit" value="submit">
    </p>
  </form>
</body>
</html>

hello.php


<?php
date_default_timezone_set('Asia/Tokyo');
$d = getdate();
$h = $d["hours"];

if ($h < 6 && $h > 12)
  $msg = "Good morning!, ";
elseif ($h >= 12 && $h <= 18)
  $msg = "Good afternoon!, ";
elseif ($h >= 19 && $h <= 22)
  $msg = "Good evening!, ";
else
  $msg = "Good night!, ";

print($msg . $_POST["whom"]);

各ファイルの配置はこんな感じ。