新UIになったPhpStorm 2023.2でサクッとxdebugを試してみる

まえがき

毎回PhpStormでブレークポイントを使った設定の仕方を忘れてしまうので、phpinfoにブレークポイントを貼るシンプルな構成で試す手順メモを残しておく。

手順

Chrome拡張をインストールして設定する

インストール

https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

虫アイコンを右クリックしてオプションを設定する

IDE keyでPhpStormを選択

ターミナルでコンテナを起動しておく

$ cd ~/PhpstormProjects
$ git clone git@github.com:st1t/try-xdebug-phpstorm.git
$ phpstorm try-xdebug-phpstorm
$ docker-compose build
$ docker-compose up -d

PhpStormの画面を設定する

Edit Configurations...を設定

Add New ConfigurationからPHP Remote Debugを追加

Server設定を追加

赤枠の...から追加する

Serversでホスト機とDocker containerのpathをマッピングする

今回phpinfoを表示させるPHPファイルは、 {PROJECT_PATH}/docker/var配下にあるファイルなので、varディレクトリをマッピングしておく。

ConfigurationからServerとIDE keyを設定する

  • Filter debug connection by IDE keyにチェックを入れる
  • Serverを先程作成した設定を選択
  • IDE key(session id)にPHPSTORMを入力
  • Debugボタンを押して実行

phpinfoのページを表示してChrome拡張のDebugを有効にしておく

http://localhost/info.php を開いてからDebugを有効にしておく

phpinfoにブレークポイントを設定してアクセスしてみる