Webアプリ ホームページ PHP VSCode

dd()の事態は終わった。これからはブレークポイントの時代だ

この記事は設定方法、確認方法の記事になります。 PHPのvscodeでのDebugeの仕組みを知りたい場合はこちらをご覧ください。 vscodeでphpで動くアプリのdebugができるわけ->comming soon
📖 目次

今回の目標

vscodeでDebugを可能にする

手順

  • vscodeに拡張機能PHP Debugを入れる
  • PHPに拡張ライブラリXdebugを入れる
  • PHP Debugの設定ファイルを書く
  • Xdebugを有効にする

設定開始

1.vscodeに拡張機能PHP Debugを入れる

vscodeとxdebugの関係
拡張機能追加画面を開きPHP Debugをインストールしてください。 インストール後はPHP Debugが有効になっていることを確認してください。

2.PHPに拡張ライブラリXdebugを入れる

次はphp側の設定になります。 詳しくは上記リンク記事に記載しますがphpアプリケーションでのデバッグはPHP DebugとXdebugの間で行われますので、忘れずにインストールしてください。
Xdebugのホームページはこちらから☞
こちらはphp側の拡張機能です。 アプリを実行するphp側に入れることでVSCode側からのお願いをキャッチすることができるようになります。
Xdebugはphpの拡張機能ですので自分が使用しているphpのバージョンに合わせたものをダウンロードする必要があります。
php -v
を実行し、自分の使用しているphpのバージョンを確認してからダウンロードします。 Xdebugダウンロード画像 私はこちらからファイルをダウンロードしてインストールを試みました。
ダウンロードページ
ダウンロードしたときにセキュリティが云々といわれ段ロードが完了しない場合があります。 その場合はブラウザのダウンロードの箇所からダウンロード下ファイルの詳細を開き削除ではなく保存を選択してください。 ダウンロードが完了します。
その後自身のphpが置かれているディレクトリを確認し、そのディレクトリの下にあるextフォルダにダウンロードしたDLLファイルを配置してください。
ファイル配置場所
where php
ファイルの配置が完了しましたらphpへの拡張機能の追加は完了です。

3.PHP Debugの設定ファイルを書く

次にVSCode側にデバッグを開始するときはPHP Debugを使用してくださいという設定を書きます。 今回設定を追加するファイルですが.vscodeフォルダ以下のlaunch.jsonというファイルに追加してください。 ファイルがまだ存在していない人はデバッグタブから「launch.jsonファイルを作成します。」というリンクがあるのでそちらをクリックし作成します。
ファイル作成のリンク ファイルの内容
自動で作成するといろいろ書かれますが今回使うのはこの部分のみとなりますので消しても問題ありません。
{ "name": "Listen for Xdebug", "type": "php", "request": "launch", "port": 9003, "hostname": "127.0.0.1" },
ホストにはローカルホストを設定します。 ポートにはデフォルトポートである9003を使用し、Xdebug側に設定するポートと同じポートと同じことを確認してください。
ここが食い違ってしまうとXdebugが間違ったポートに返答を返してしまいVSCode側でいくら待てども帰ってこないということになります。

4.Xdebugを有効にする

残り手順はあと1つになります。 phpでXdebugを有効にするためにphp.iniにXdebugの設定を追加します。 自分が使用しているphpの設定ファイルphp.iniは
php --ini
で確認してください。 このファイルの一番下に
[xdebug] zend_extension=php_xdebug-3.5.1-8.5-ts-vs17-x86_64.dll xdebug.mode=debug xdebug.start_with_request=trigger xdebug.client_port=9003 xdebug.client_host=127.0.0.1
を追加してください。
設定する内容ですが
  • 先ほどダウンロードしたDDLファイル。 このDLLファイルでXdebugを有効化するという宣言になります。
  • デバッグモードで動かしブレークポイント等のステップデバッグの機能を使用するという設定です。
  • デバッグを いつ開始するか の設定です。 普段は動かず、デバッグしたい時だけ有効になるため負荷が少なくなります。
  • VSCodeのポートです。PHP Debugのデフォルトポートは9003になります。ここを先ほど設定したVSCode側のポートを必ず同じにしてください。
  • VSCodeのホストです。

いざ実行

これでphpアプリケーションをデバッグする準備は整ったので実際に確認してみます。 まずいつも通りサーバーを立ち上げます。
php artisan serve
上記コマンドを実行してphp開発サーバーを立ち上げます。
私は開発サーバーを利用しているため上記コマンドを実行しました。 自分が使用しているサーバーを利用してください。 動かしている場合はphp.iniを変更したため、再起動を実行してください。
次にCSSを監視するため
npm run dev
を実行します。 この今まで通りの手順にプラスして先ほど登録したListen for Xdebugでデバッグを開始します。 vscodeとxdebugの関係 これでVSCode上のブレークポイントでプログラムの実行を止め、変数を除くことができるようになりました。
ちなみにデバッグを開始した状態で
netstat -ano | findstr 9003
を実行し9003ポートの状態を確認すると
TCP 127.0.0.1:9003 0.0.0.0:0 LISTENING 12345
の出力を確認できます。 これは9003ポートでVSCodeが接続を待っていることを示しています。
今回はphpアプリのデバッグの設定方法を記載しました。 ほかのVSCodeの拡張機能と違い少し手順がありますが ・何をしたいのか。 ・どうしてそれが実現できるのか をしっかりと理解すると、なぜこの設定が必要なのかがわかってきます。 少しでも誰かの理解になれたら幸いです。
具体的な設定だけではなくデバッグの仕組みについて下記事で説明しています。 もしよろしければ見てみてください。
vscodeでphpで動くアプリのdebugができるわけ->comming soon