いちいちvar_dump()とかechoとかするのって疲れるよね

この記事は戦い Advent Calendar 2022の2日目の記事です。

対象読者

XAMPP + Visual Studio Codeで開発を行っている人

XAMPP、Visual Studio Codeのインストールの説明はここでは行いません。インストールが済んでいることを前提に進めます。

イントロダクション

定期ゲーを作る際、レンタルサーバーで公開するためにPHPを使って作る方が多いと思われます。そんなあなた、こんな悩みはないでしょうか？

var_dump()とかechoとか使って変数の中身を見るの、めんどい──

プログラムで何らかの不具合が起きた際、怪しい変数の中身を確認してバグの原因を探ることが多いと思われるのですが、そのためにいちいち見たいタイミングの場所にvar_dumpやechoを仕込み、実行してみて、表示を確認して、正しいかどうかチェックをするという手順を踏むのは相当に面倒です。

そんなときに使えるツールがあります。その名もXdebugです。

Xdebugって何？何ができるの？

XdebugとはPHP用のデバッグツールです。これをVSCodeと併用することで任意の地点での変数の中身を確認することができます。

一行ずつ実行することができるので、ここは違った、じゃあ次の怪しい地点にまたvar_dumpを置き直して……とする必要もありません。これがあるのとないのではデバッグの効率が段違いなので、おすすめです。

Xdebugの入れ方

ではXdebugの入れ方について解説していきます。少し長いですが、やること自体は単純です。

まずは今回の作業用フォルダーを作成しましょう。XAMPP Control PanelからExplorerを選び、開いたフォルダーからhtdocsを開きます。

次にhtdocsの中に適当なフォルダーを作成します。今回はtestとしましょう。これが今回の作業用フォルダーです。

VSCodeで作った作業用フォルダーを開きます。VSCodeを起動し、上部メニューのファイル＞フォルダーを開くより先程作ったtestフォルダーを開きます。

すると、「このフォルダー内のファイルの作成者を信頼しますか？」というようなダイアログが出るので、「はい、作成者を信頼します」を選択します。ここではいを選ばないとデバッグができなくなる可能性があるので注意してください。

フォルダーを信頼モードで開いたら「phpinfo.php」のようなファイルを作成し、以下の内容を入力してください。

<?php phpinfo(); ?>

作ったファイルを開きます。XAMPP Control PanelからApacheを起動します。

起動したらhttp://localhost/test/phpinfo.phpにアクセスしてみましょう。以下のようなページが出ればOKです。このページは後で使うので開いたままにしておいてください。

次はXdebugをダウンロードします。https://xdebug.org/wizardにアクセスしましょう。テキストボックスがあると思うので、先程出力したphpinfoのページをCtrl+A→Ctrl+Cなどで全コピーして貼り付け、「Analyse my phpinfo() output」ボタンをクリックします。

すると、入れた内容から自動的に適切なXdebugのバージョン等を判別してくれるので、ガイドに従ってダウンロードしましょう。

以降は基本的にInstructionsの内容に従って進めます。エクスプローラーからC:/xampp/php/extを開き（もしMove the downloaded file to ...の記載内容が違う場合はそちらを開いてください）、ダウンロードしたファイルをその中に放り込んでphp_xdebug.dllにリネームします。

次にC:/xampp/php/php.iniを開き（こちらも記載内容が違う場合はInstructionの記載に従ってください）、一番下の行に以下の内容を追記します。VSCodeで利用するための設定も加えているため、ここだけInstructionの記載と少し違うので注意してください。

xdebug.mode=debug
xdebug.start_with_request=yes
zend_extension = xdebug

そしてApacheをリスタートします。XAMPP Control PanelからApacheをstopし、startを押し直してください。

これでXdebugの導入が完了しました。次はVSCodeにXdebugを利用するための拡張を導入しましょう。左メニューから拡張機能を選び、検索欄に「PHP Debug」と入力して出てきた拡張をインストールします。候補はいくらか出てくると思うのですが、作者がXdebugで公式マークがついているものが今回インストールするものです。

インストールしたら左メニューから"実行とデバッグ"を選び、「launch.jsonファイルを作成します」を押し、出てきたメニューからPHPを選択してください。自動でデバッグ用の起動構成ファイルを作成してくれます。

これでデバッグ機能の準備が整いました！お疲れ様です。

Xdebugの使い方

デバッグを実行したい際は"実行とデバッグ"を開き、上部のプルダウンからListen for Xdebugを選択して▷を押します。起動するとVSCode下の部分がオレンジになるはずです。これでデバッグモードになりました。

デバッグモードに入るとphpファイルの各行番号の横がクリックできるようになります。試しに押してみると、赤い●が表示されるようになるかと思います。

試しにこの状態で該当のphpファイルのページにブラウザからアクセスしてみましょう。上記の例であればhttp://localhost/test/index.phpですね。アクセスするとページの読み込みが途中で止まり、VSCode側は以下のように変化しているはずです。

このように、デバッグモード中に赤い●を設定しそのページにアクセスすると、赤い●を設定した行のところで処理を一時停止し、該当の行が実行されるときの変数状態などを表示してくれます。この赤い●のことをブレークポイントといいます。

さらに、ブレークポイントを使って一時停止した後は1行ずつ実行することもできます。のボタンをクリックしてみてください。変数がどのように変わっていくのかが一目で分かるはずです。この機能をステップオーバーといいます。

これでいちいち怪しい変数の怪しい場所全部にvar_dump()やehcoを置く必要がなくなりました。便利ですね！他のボタンについても主要なものを解説しておきます。

続行。次のブレークポイントに当たるまで処理を続ける（もしそれ以降ブレークポイントがなければ処理が終わるまで続ける）

ステップイン。次の行に移動する。ただし、関数があった場合、関数の中へと入っていく。（上のステップオーバーの例ではadd関数の中には入らなかったが、ステップインの場合はadd関数の中でどうなっているかも追いかけられる）

停止。デバッグモードを停止する。

これで解説は以上となります。デバッグがあると開発効率が段違いなので、ぜひXdebugを導入してみてください。

----

技術とかいろいろ