誰でも簡単！PHPのデバッグ環境の整え方（ステップ実行可能）【VisualStudioCode】

どうも皆さんこんにちは。システムチームのSDでございます。

皆さん、PHPのデバッグってどうしてますか？
var_dumpやprint_r、はたまたechoを使うというのでも十分な場合はあるでしょう。
しかし、実装が複雑になってくるとやはりステップ実行でデバッグしたくなってくるものです。

そこで今回は「誰でも」「カンタン」に出来るをテーマに、PHPのデバッグ環境構築方法をご紹介していこうと思います。

※エディターとしてVisualStudioCodeを使用します。
※当環境のphpバージョンは 7.2.10です。
（デバッガーの機能を使うにはphp7.0以上必須です。）

Xdebugのインストール

まずはPHPのデバッグツールであるXdebugをインストールします。
下記のサイトにアクセスしてください。

https://xdebug.org/wizard.php

ターミナルを起動し、 php -i を実行して出力をすべてコピーしておきます。
（ターミナルの起動はWinキー + R でファイル名を指定して実行⇒「cmd」と入力するなどで実行できます。）

そのコピー内容を↓のページの入力欄に貼り付け、「Analyze my phpinfo() outputs」ボタンを押します。

その情報をもとWebページがあなたのシステムに最適なバージョンのXdebugと、
その適用手順を案内してくれます。

まず１．に推奨バージョンのダウンロードリンクが貼られているのでダウンロードします。

そして２．にパスが書いてあるので、そのフォルダにダウンロードしたXdebugを移動します。

最後に３．ですが、php.iniというphpの起動設定が書かれたファイルの編集をする必要がありますので、
次の項目で見ていきましょう。

php.iniファイルの編集

上記にもある通り、Xdebugのパス情報をphp.iniに追記する必要があります。
ただし、それだけでは動かないので以下のように追記してください。

[xdebug]
zend_extension = C:\xampp\php\ext\php_xdebug-ほにゃらら 　//xdebugのフルパス

xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_connect_back = 1
xdebug.remote_port = 9001　//9000で設定しているサイト様もありますが、こちらの環境では動かないので9001にしています。

[xdebug]

zend_extension = C:\xampp\php\ext\php_xdebug-ほにゃらら　//xdebugのフルパス

xdebug.remote_enable = 1

xdebug.remote_autostart = 1

xdebug.remote_connect_back = 1

xdebug.remote_port = 9001　//9000で設定しているサイト様もありますが、こちらの環境では動かないので9001にしています。

追記する場所はわかりやすいようにphp.iniファイルの末尾でいいでしょう。

Visual Studio Codeのインストール

デバッグ機能を使うために、今回はVisualStudioCodeを利用します。

https://code.visualstudio.com/

上記のWebページからダウンロードしましょう。

ダウンロードが終わったらVisualStudioCodeを実行しましょう。

Visual Studio Codeの日本語化

起動出来ましたか？
しかし言語はデフォルトでは英語なのでこのままだとわかりづらいですね。
そこで拡張機能をインストールして日本語化しましょう。

画面左メニューから「拡張機能」タブをクリックし、「Japanese」と検索。
「Japanese Language Pack for Visual Studio Code」をインストールしエディタを再起動すれば日本語化されます。

PHP IntelliSense、PHP Debugのインストール

上記と同じ手順で拡張機能から検索し、
PHP InteliSense、PHP Debugの二種の拡張機能をインストールしてください。
インストールした後、これらの設定などは特に必要ありません。
インストールが完了したらエディタを再起動してください。

launch.jsonの編集

いよいよデバッグの設定をします。
まずあらかじめに「ファイル」からデバッグ対象のプロジェクトフォルダを開いておいてください。

その後、左サイドメニューから「デバッグ」を開き歯車ボタンを押します。
作成するファイルの種類を聞かれるので「PHP」を選択してください。

プロジェクトのルートディレクトリに「.vscode」フォルダが作られ、その中にlaunch.jsonが生まれます。

それを以下のように編集してください。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
     "name": "Listen for XDebug",
     "type": "php",
     "request": "launch",
     "port": 9001,
     "pathMappings": {
     "（ドキュメントルートのフルパス。階層は「\\」で表記してください。）": "${workspaceRoot}"
      }
    }
  ]
}

{

// IntelliSense を使用して利用可能な属性を学べます。

// 既存の属性の説明をホバーして表示します。

// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"name": "Listen for XDebug",

"type": "php",

"request": "launch",

"port": 9001,

"pathMappings": {

"（ドキュメントルートのフルパス。階層は「\\」で表記してください。）": "${workspaceRoot}"

}

]

}

「ドキュメントルートのフルパス」というのはデバッグ対象のフォルダのパスです。
それに使われている「\（バックスラッシュ）」を二つに重ねてください。
例えば、デバッグ対象のフォルダのパスが
「 C:\xampp\htdocs\PHPDebugTest 」
だとします。
その場合は、
「 C:\\xampp\\htdocs\\PHPDebugTest 」
という風に記述してください。