n-Archives.net

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

Table of Contents

前のページ   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

 

Submit your comment
Name:
Comment:
Submission type:



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