会社という「体」は色々な要素で構成されています。  「顔」であるホームページ作成、「手足」となるスタッフを効率良く動かすための「神経信号」となる「共有ツール」、「エネルギー」である資金を管理するための「会計ツール」etc...  そんな「体をメンテナンス」についてお手伝いをするのが、私たちの務めです。
VisualStudioCode + XAMPP + XDebug でデバッグ環境構築メモ

VisualStudioCode + XAMPP + XDebug でデバッグ環境構築メモ

Webでのデバッグと言えばphpStormやNetBeans使ってみてましたけど、毎度上手くデバッグ設定できず心折れていました。
が!今回はスムーズにできたし、何より「無料で」構築できるのが素晴らしいです。昔のMicrosoftからはとても考え付きませんね(笑)

 

【動作環境】


・Windows10 (Pro)
・VisualStudioCode 1.51.1
・XAMPP v3.2.4
  →PHP7.4が入っているバージョンです。

 

【前提条件】


・XAMPPがC:\直下にインストール済みであること。
・webルートディレクトリは変更していません。
  →httpd.confは変更を加えていない状態。

 

【構築手順】


1.環境に合った適切なXdebugの準備
  1)c:\xampp\htdocs配下に [phpinfo.php] を作成し、配置する。

<?php
    phoinfo();
 

  2)ブラウザで、localhost/phpinfo.phpを実行する。
  3)ブラウザに表示された phpinfo の内容を何も考えず [ctrl+a] → [ctrl+c] で全部コピーする。
  4)https://xdebug.org/wizard に接続、コピー内容をペーストし、「Analyse my phpinfo() output」ボタンをクリックする。
  5)ダウンロード対象のDLLが「Instructions」に表示されるので、クリックしダウンロードする。
  6)ダウンロードしたDLLを、C:\xampp\php\extへコピーする。

2.PHPとXdebugの関連付け
  1)c:\xampp\php\php.ini をバックアップしておく。
  2)c:\xampp\php\php.ini をテキストエディタ等で開き、以下を最後部に追記する。 

[xdebug]
zend_extension=C:\xampp\php\ext\【上記1.でDLしたDLLのファイル名】
xdebug.idekey=VSCODE
xdebug.client_host=localhost
xdebug.client_port=9003
xdebug.mode=debug
xdebug.start_with_request=1

※私の環境では [php_xdebug-3.0.0-7.4-vc15-x86_64.dll] でした。
※Xdebugのポート、Ver3.0ではデフォルト9003とのこと。それ以前は9000または9001で確認。

3.VSCodeの下準備
  1)C:\【サインインユーザー名】\AppData\Roaming\Code\User\settings.json をバックアップしておく。
  2)上記ファイルを開き、以下の記述を追記・保存する。

  // php debug の設定
  "php.validate.executablePath": "C:\\xampp\\php\\php.exe"
 "php.executablePath": "C:\\xampp_hayakawa\\php\\php.exe"
 "php.validate.run": "onType"

  3)画像を参考に、VSCodeの拡張機能をインストールする。


   ①をクリック。
   ②で拡張機能を検索。
   ③に対象が表示される。以下をインストールする。
   ・Japanese Language Pack(1.51.2)
   ・PHP Debug(1.13)
   ・PHP Extension Pack(1.0.2)
   ・PHP Intelephense(1.5.4)
   ・PHP IntelliSense(2.3.14)
   ※2020/12月現在では、画像のバージョンが目安。
  4)VSCodeを再起動する。

4.VSCodeとXdebugの関連付け
  1)画像を参考に、[launch.json] ファイルを作成し関連付け。

   ①をクリック。
   ②「launch.jsonファイルを作成します」をクリック。
   ③作成位置はC:\xampp\htdocs配下です。
    C:\xampp\htdocs\.vscode\launch.jsonとなればOK。
  2)[launch.json]を開き、以下構文を追記・保存する。

"configurations": [
    {
        "name": "Listen for XDebug",
        "type": "php",
        "request": "launch",
        "port": 9003,
        "log":true
    },
    {
        "name": "Launch currently open script",
        "type": "php",
        "request": "launch",
        "program": "${file}",
        "cwd": "${fileDirname}",
        "port": 9003,
        "stopOnEntry": false,
        "log":true
    }
]



5.デバッグ実行を試す
  1)テスト用プログラムを [test.php] を作成する。
   変数の変遷など確認できるようなのが良いかと。

<?php
    for( $test = 1; $test < 10; $test++){
    echo "test script line ".$test."<BR>";
    }

  2)ブレークポイントfor文に設定する。
  3)「Launch currently open script」 を試す。

   ①をクリック。
   ②で「Launch currently open script」を選択、左の緑三角をクリック。
   ③デバッグが実行され、左ペインの「変数」部分に $test の値がインクリメントされていく事を確認。
  4)「Launch currently open script」 を試す。
   ①をクリック。
   ②で「Listen for XDebug」を選択、左の緑三角をクリック。
   ③ブラウザで http://localhost/test.php を実行する。
   ④デバッグが実行され、左ペインの「変数」部分に $test の値がインクリメントされていく事を確認。

 

【注意】
1)XdebugのVer3.0とそれ以前では、php.ini にて設定する項目名に変更がある。詳しくは公式サイト参照。
2)デバッグが上手く動作されない場合、「PHPとXdebugの紐づけが正しいか」と
 「XdebugとVSCodeの紐づけが正しいか」を切り分けて確認する。
 判断するには、ログを出力するように設定すると良い。
3)[httpd.conf] の設定で、ポートは80番のみ利用設定でOK。


参考URL:
https://qiita.com/hitotch/items/7b2895f9822ded3fa7db
https://qiita.com/naoyukik/items/ef83fd9f59228694556d

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください