n-Archives.net
ホーム > 記事 > vscode > php-debug-with-xampp-xdebug-vscode

VSCodeを使ったPHPのデバッグ環境をWindows10に構築する方法(1/2)

初稿 2020.8.12／更新 2021.8.14
目次

前のページ   1    2   次のページ

 

VSCodeを使ったPHPのデバッグ環境はメチャクチャ便利です

当サイトは当初よりPHPをかなり駆使して作ってきたのですが、正直なところ、PHPのデバッグは、変数の内容を echo や var_dump などでブラウザに表示させてみる程度しかやっていませんでした。しかし、このところ、英語ページ対応など、いろいろとさらに複雑な仕組みを作り始めようとすると、さすがにデバッグの効率が悪くなってきました。一応、Visual Studio Code はファイルの編集に使っていたので、それを使ってPHPのデバッグができないかと思っていたら、やはりありました。というか、はるか昔からそのような仕組みはあったようですね。

変数の値を画面に表示させるデバッグ手法だけではなく、ブレークポイントを設定し、実行の途中で止めて変数の値やスタックトレースなどを確認できるようになります。このデバッグ方法は「step debugging」と呼ばれているようです。今回PHPデバッグ環境を構築して使ってみたところ、このstep debugging がかなり便利で、もっと早くからこのPHPデバッグ環境使っておけばよかったと後悔しています。

ただ、このデバッグ環境の仕組みを理解して構築し、使えるようになるまでにかなり時間がかかりましたので、今回その環境の構築について説明してみたいと思います。

 

今回構築した環境では以下のようなパッケージを使っています。

  • Visual Studio Code v1.59.0
  • XAMPP v7.3.29
  • Xdebug v3.0.4
  • PHP Debug v1.17.0

 

なお、最近 Xdebugが 3.X.Xにメジャーバージョンアップされ、設定方法が 2.X.X の時から変わっているのでご注意ください。 私自身ちょっとはまってしまったのですが、「PHP VSCode  debug」などで検索して出てくる情報は、現時点、Xdebug 2.X.Xをベースとした情報が多く、それをもとに設定すると、デバッグがうまく動作できないということになりますので、その点ご注意ください。

 

構築する環境の全体像

今回構築する環境の全体像を以下の図に示します。

 

通常のブラウズだけであれば、Chrome, Apache, PHP, DocumentRoot, (MySQL) までで環境はできるのですが、PHPのデバッグをしようとするとIDE(統合開発環境)であるVisual Studio Code のところまでが必要になります。今回は、1台のPCで一通りのデバッグが完結して行えるようにするため、上図の全てのパッケージを、同じPCにインストールします。

なお、上記全体像には MySQLも書かれていますが、本記事ではステップデバッグ環境構築を目的としているため、MySQLの詳細設定については記載していません。DBサーバもお使いの方は、ご自分で設定してみてください。

以下、いくつかのキーとなるパッケージや機能について解説します。

 

XAMPP

XAMPPは、Apache、PHP、MySQLなどを一括してインストールできる統合パッケージです。今回はWindows PC上にHTML/PHPコンテンツの開発環境を手早く構築することが目的なので、このパッケージを使います。図中の点線枠内の機能が提供されます。

XAMPPのホームページ：https://www.apachefriends.org

 

Xdebug

Xdebugは、PHPの拡張機能として組み込まれるデバッグエンジンです。これをインストールしておくと、PHP実行時に、ErrorやWarningが発生した時にブラウザ画面上にデバッグ情報を表示するなど、デバッグを支援する様々な機能を提供します。

その機能の一つとして、リモートデバッグという機能があります。異なるホストにあるVisual Studio Code などのIDE(統合開発環境)から、デバッグ操作を可能にします。（Xdebugでは、このIDEなどのデバッグ実行環境のことをクライアントと呼ぶようです。） ただ、今回構築する環境では、VSCodeも同じホスト内にインストールしますので、クライアントのホスト名はlocalhostと指定します。

Xdebugのホームページ：https://xdebug.org/

 

DBGP

Common Debugger Protocol。 統合開発環境にデバッグ情報を送信したり、統合環境側からデバッグを制御コマンドを送信するプロトコル。おそらく、ブレークした時点のコードの位置や変数の値を通知したり、ブレークポイントの設定、再開・停止などの実行制御を通信するプロトコルなのだと思います。

DBGPの仕様：DBGP - A common debugger protocol specification (Xdebug Document)

 

Visual Studio Code

VS Code は、コードを編集するエディタですが、それだけでなく、高度なデバッグ操作が可能なIDE(統合開発環境)でもあります。今回、VS Code を使ってPHPデバッグ操作を実現します。

Visual Studio Codeのホームページ：https://azure.microsoft.com/ja-jp/products/visual-studio-code/

 

PHP Debug

PHP Debug は、VS Code の拡張機能です。Xdebug と通信を行い、VS CodeでPHPの step debugging を実現します。

 

環境構築手順

環境の構築手順は以下の通りです。順を追って手順を説明します。

  1. XAMPPのインストール
  2. Xdebugのインストール
  3. VS Codeのインストール
  4. デバッグの実行(HTTPリクエストの送信)

 

XAMPPのインストール

まず、以下の記事を参考にXAMPPをインストールしてください。

記事：Windows10へのXAMPPのインストール方法

 

インストールが完了し、Apacheが動作することが確認出来たら、デバッグを行いたいWebサーバ環境を構築します。ご自身の環境の個別設定を行ってください。以下に私の場合の設定事例を記載しますので、参考にしてください。

 

httpd.con の修正

Apacheの基本設定を編集します。XAMPPコントロールパネルのApacheの行のConfigボタン → Apache (httpd.conf)  を選択して編集します。

多くの場合、httpd.conf の DocumentRoot の設定を変える必要があります。HTML/PHP のドキュメントが D:\path\to\htdocs 配下に作成されていると仮定した場合、httpd.conf を以下のように修正する必要があります。Directoryのオプションなどもカスタマイズしている場合、それも反映しておく必要があります。

DocumentRoot "D:/path/to/htdocs"
<Directory "D:/path/to/htdocs">

    :         (←必要ならオプション設定も変えておく)

</Directory>

上記だけでなく、個別に変えている設定があれば、全て反映しておきます。

 

httpd-xampp.conf の修正

XAMPPでは、ApacheのPHPに関する設定は、C:\xampp\apache\conf\extra\httpd-xampp.conf に設定されています。

XAMPPコントロールパネルのApacheの行のConfigボタン → Apache (httpd-xampp.conf)  を選択してファイルを編集してください。

 

一例ですので、必ずしも必要な設定ではありませんが、私の環境の場合、*.html のファイルにも PHP を記述できるようにするため、以下の設定を httpd-xampp.conf に追加しています。

<FilesMatch "\.html$">
    SetHandler application/x-httpd-php
</FilesMatch>

上記は私の例ですので必ずしも必須ではありません。他にもhttpd.confに個別の設定をしている場合は全て反映しておく必要があります。

 

Xdebugのインストール

PHPの拡張機能である、Xdebugをインストールします。

 

まず、phpinfoを表示させます。DocumentRootに、以下の内容だけの phpinfo.php というファイルを作成します。

<?php phpinfo(); ?>

 

ブラウザを起動し、localhost/phpinfo.php を参照します。すると以下のような phpinfoが表示されます。この画面で、Ctrl-A(全てを選択) を行った後、 Ctrl-C(コピー) を行っておきます。

 

 

ブラウザから、https://xdebug.org/wizard を参照します。画面中ほどにテキスト入力欄があるので、そこに、先ほどコピーした内容を貼り付け(Ctrl-V)て、「Analyse my phpinfo() output」ボタンをクリックします。

 

解析の結果が表示されます。あわせて、その後のインストールの手順が表示されます。

 

上記画面のInstructionsのところに記載されている手順を実行します。

  1. リンクをクリックして dll をダウンロードします。この時、Xdebugのバージョンを確認してください。上記例の場合 3.0.4 となります。

  2. ダウンロードした dll ファイルを C:\xampp\php\ext フォルダにコピーします。

  3. C:\xampp\php\php.ini ファイルに設定を追記します。上記画面に表示された内容と少し違いますが、php.iniファイルの最後尾に以下を追記してください。

[XDebug 3.X.X]
xdebug.mode=debug
xdebug.start_with_request=yes
zend_extension = "C:\xampp\php\ext\php_xdebug-3.0.4-7.3-vc15-x86_64.dll"

xdebug.mode=debug は、step debugging を有効にする設定です。

xdebug.start_with_request=yes は、ブラウザからの要求があった場合常に step debugging を開始する設定です。

zend_extension の設定は、Xdebug のインストールパスを記述します。

 

なお、Xdebug のバージョンが 2.X.X の場合は、以下のように追記してください。

[XDebug 2.X.X]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1 
zend_extension = "C:\xampp\php\ext\<xdebugのファイル名>.dll"

4. 設定が完了したら、Apaceを再起動します。Apacheが起動している場合、XAMPPコントロールパネルから、Apacheの Stopボタンを押し、再度、Startボタンをクリックして再起動します。

 

以上で、XAMPP, Xdebug のインストールまで完了しました。この後の、Visual Studio Codeの設定、デバッグの実行については、次の記事にて詳細を解説します。

 

 

前のページ   1    2   次のページ

 

Related Articles

 

コメントをお送りください
お名前：
コメント:
コメントの公開：



管理者より個人的に返信をご希望の方は、コメント中に必ずメールアドレスを記載してください。記載がないと返信できませんのでご注意ください。

If you want personal response from the author, please do not forget to write your email address in the comment. Otherwise, the author can not reply.

投稿されたコメントは手動で処理されるため、記事として登録されるまで１日程度かかります。

Submitted comments will be processed manually. So, please understand it will take about a day to publish your comment.

Preferred Language
Site Navi
Home
Software
nWOL: Wake on LANを使った遠隔PC起動管理ツール
Version 1.7.75 (2022/7/9)
RoboSync: RobocopyのためのGUIツール
Version 1.3.27 (2021/1/1)
Share
特集記事
新着記事