【VSCode】PHP のデバッグ環境を準備する その3(PHP Debug 編)

この記事は約4分で読めます。
記事内に広告が含まれています

デバッグ画面とエディター画面

こんにちは、さち です。

普段、ウェブサイトを作るときは「Visual Studio Code(以下:VSCode)」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。

この VSCode で PHP をデバッグできる環境の準備として、前々回の記事で XAMPP、前回の記事で Xdebug の設定をしました。

今回は、一連の最後として VSCode の「PHP Debug」の設定をしていきます。

これで、VSCode で PHP をデバッグできる環境がついに完成します。

スポンサーリンク

準備する環境

VSCode で PHP をデバッグするために用意する環境を、もう一度おさらいしておきます。

これより便利な環境もあるかもしれませんが、今回はこの環境でいきます。

「XAMPP」の導入は前々回の記事で、「Xdebug」の導入は前回の記事で済んでいるので、最後のPHP Debug」を設定していきましょう

「PHP Debug」を設定する

インストール

  1. VSCode のアクティビティバーの「拡張機能Ctrl + Shift + X キー)」を開きます。
    拡張機能
  2. php debug と入力。作者が「Xdebug」のものをインストールします。(必要な場合は VSCode を再起動)
    PHP Debug

初期設定

  1. アクティビティバーの「実行とデバッグCtrl + Shift + D キー)」を開きます。
    デバッグ
  2. プルダウンメニューから「構造の追加」をクリック。
    構成の追加
  3. リストが表示されるので、「PHP: Listen for Xdebug」をクリック。
    PHP: Listen for Xdebug
  4. 「PHP Debug」と「Xdebug」を連携する設定が入力されました。
    launch.json

デバッグ方法

「PHP」ファイルを実際に実行して、デバッグしてみましょう。

操作手順

  1. VSCode で「PHP」ファイルを開きます。(保存済みの PHP ファイルを使用して下さい)
    エディター画面
  2. アクティビティバーの「実行とデバッグCtrl + Shift + D キー)」を開きます。
    デバッグ
  3. プルダウンメニューから「Listen for Xdebug」をクリック。
    Listen for Xdebug
  4. デバッグの開始F5 キー)」をクリック。
    デバッグの開始
  5. デバッグの操作パネルが表示されました。
    デバッグの操作パネル
  6. 行番号の左側をクリックして「ブレークポイント(デバッグのために処理を一時停止する場所)」を設定します。
    エディター画面
  7. ブレークポイントを設定した「行」に、「(赤い丸印)」が付きます。(保存済みの PHP ファイルでないとこの操作はできません)
    エディター画面
  8. XAMPP Control Panel」を起動します。
    XAMPP Control Panel
  9. Apache の「Start」ボタンをクリック。(Apache のように文字の背景がグリーンになれば正常に動作している)
    Apache Start
  10. ウェブブラウザーで、VSCode で開いている「PHP」ファイルを開いて実行します。(PHP の実行はドキュメントルート以下にあるファイルしかできない)
    ウェブブラウザー
  11. すると、VSCode 側でデバッグが開始され、最初のブレークポイントで処理が一時停止します。今回は6行目なので、5行目までの処理結果が「デバッグ」に表示されています。
    デバッグ画面とエディター画面
  12. デバッグの操作パネルの「続行」アイコンをクリックすると……
    デバッグの操作パネル
  13. 次のブレークポイントで一時停止します。9行目なので、8行目までの処理結果が「デバッグ」に表示されています。
    デバッグ画面とエディター画面
  14. さらにデバッグの操作パネルの「続行」アイコンをクリックすると、ブレークポイントはもう無いので、最後まで PHP が実行されます。
    デバッグの操作パネル

「PHP」ファイルを修正して再度デバッグしたい時は、手順「10」のウェブブラウザーで開いているページを更新するだけでOKです。

「操作パネル」の効果

デバッグの操作パネル

今回「操作パネル」では、一番良く使われそうな「続行」の機能しか使いませんでしたが、他の機能も簡単に説明しておきます。

ショートカットキー 機能
続行 F5 次のブレークポイントまで処理を続行する
ステップオーバー F10 次の行に進む。関数に遭遇したら、関数内には入らずに進んでいく。(=関数をステップオーバーする)
ステップイン F11 次の行に進む。関数に遭遇したら、関数内に入って進んでいく。(=関数にステップインする)
ステップアウト Shift + F11 関数内の処理を最後まで進める。(=関数からステップアウトする)
再起動 Ctrl + Shift + F5 デバッグを再起動する
停止 Shift + F5 デバッグを停止(終了)する

コメント

  1. 西原玉久 より:

    大変解りやすい説明をありがとうございます
    行番号の左側をクリックして「ブレークポイント(デバッグのために処理を一時停止する場所)」を設定します。

    この操作をしても赤い印が付きません
    どこか設定が間違ったからでしょうか?
    お忙しい所も申し訳ありませんがご指導いただけたら幸いです

    • 使用している PHP ファイルが新規作成されたもので未保存ではないでしょうか?

      デバッグ実行時に PHP ファイルの自動保存が行われるので、ファイルの保存場所が判明していないといけません。未保存のファイルだとデバッグが実行できず、赤い丸印でなく白い丸印になるようです。

      コメントを頂いてはじめて知ったので、記事にも簡単に追記しておきました。

  2. 匿名 より:

    めちゃくちゃ分かりやすかったです!
    ありがとうございました!

タイトルとURLをコピーしました