はじめに
さてここまで、PHPを開発するためにXampp、VisualStudioCodeをインストールしてきました。最後に作ったプログラムがきちんと意図するよう動いているか確認するためにVisualStudioCodeでデバッグできるように設定をしていきましょう。
デバッグをできるようにすると、目に見えないぐらいの速さで動いているプログラムを1行1行自分で進めながら正しく動いているか確認することが可能となります。どんなにできるプログラマでも必ず実施しながら開発、テストを行う作業なので必ず身に着けていきましょう。
環境
・OS：Windows10 Pro 64bit
・XAMPP:XAMPP for Windows 8.0.0
・VisualStudoCode:1.52.1
・xdebug:3.0.2
VisualStudioCodeの拡張機能をインストール
前の回でもインストールするものの一つとして取り上げてきましたが、ここでもきちんと手順を解説していきます。以下の手順でVisualStudioCodeでデバッグを行うための拡張プラグインをインストールしていきます。
画面左側の[拡張機能]アイコンをクリックし、検索ワードに「PHP」と入力するとプラグインの候補がリスト表示されます。
その中から「PHP Debug」を選択してインストールします。青色の[インストール]アイコンをクリックするとインストールが開始します。
XDebugの設定
VisualStudioCodeにPHP Debugのプラグインをインストールできたら次にPHPフォルダにXDebugを配置します。PHP Debug拡張プラグインのInstallationに書かれていることを実施していくのですが全て英語でわからない！っとなってしまうので、頑張って読むことも大事なのですがここでは一旦英語はさておき・・・以下の手順でXDebugを入手していきます。
赤枠の[XDebug installation wizard]をクリックするとブラウザが起動し、XDebugのサイトに遷移します。
ブラウザにて左のサイトにアクセスできたらしばしそのままにしておきます。
Xamppを立ち上げ、[Start]ボタンをクリックし、Apacheを起動します。Apacheが起動したら[Admin]ボタンをクリックし、Xamppのダッシュボードサイトにアクセスします。
画面上部のメニューにある[PHPInfo]のリンクをクリックし、PHPInfoを表示します。
PHPInfoのページを丸ごとコピーします。
サイト上で[Ctrl]＋[A]を押下し、全て選択した後に[Ctrl]＋[C]を押下することでページ全体のコピーが可能です。
先ほどアクセスしてしばし放置したXDebugのサイトのテキストボックスに、PHPInfoのページをコピーしたものを[Ctrl]＋[V]にて貼り付けを行い[Analyse my phpinfo() output]ボタンをクリックします。
PHPInfo()が分析され、OSやPHPのバージョンに適したXdebugのDLLがダウンロード可能となります。
赤枠の部分よりphp_xdebugをダウンロードしてください。
青枠の部分はphp.iniにzend_extensionの設定を加えてね！っということが書いてあります。
こちらについては以降で解説していきます。
ダウンロードしたDLLを「c:\xampp\php\ext」フォルダに配置します。
php_xdebugのDLLを指定フォルダに配置したらphp.iniへの設定追加を行います。
php.iniはC:\xampp\php配下に存在しているので、エディタもしくはVisualStudioCodeで開きましょう。
php.iniを開いたら末尾に赤枠の内容を追加します。[zend_extension]にはC:\xampp\php\extフォルダに配置した「php_xdebug-3.0.2-8.0-vs16-x86_64.dll」へのフルパスを記載します。
※php_xdebugは2.0系と3.0系で設定方法が異なります。自分のダウンロードしたdllのバージョンを確認して以下の該当する設定をphp.iniに行います。
以下今回のphp.ini末尾への追記内容
・php_xdebug-2.0系
[XDebug] xdebug.remote_enable = 1 xdebug.remote_autostart = 1 zend_extension = C:\xampp\php\ext\php_xdebug-2.0.X-X.X-vs16-x86_64.dll
・php_xdebug-3.0系
[XDebug] xdebug.mode = debug xdebug.start_with_request = yes xdebug.client_port = 9000 zend_extension = C:\xampp\php\ext\php_xdebug-3.0.2-8.0-vs16-x86_64.dll
※zend_extensionのフルパスには自分がダウンロードしたdllのファイル名を設定しましょう。
ここまで出来たらXamppでApacheを再起動します。ApacheのStopボタンを押してもう一度Startボタンを押しましょう。現在存在する多くのサイトではphp_xdebug-2.0系での設定が紹介されているものが多いため、php_xdebug-3.0にバージョンアップしたdllに対して、2.0系の設定をphp.iniに実施した場合、VisualStudoCodeでデバッグモードにはなりますが、ブレークポイントでプログラムが止まりません。phpinfoを確認しても、xdebugは有効になっていますが、「Step Debugger」がdisabledになっているかと思います。
VisualStudioCodeを立ち上げてデバッグできるかどうかを確認します。
VisualStudioCodeにて画面左側の[実行]アイコンをクリックし、右に表示される[launch.jsonファイルを作成します]をクリックすると環境の選択のところにドロップダウンリストにて候補が現れるので[PHP]を選択します。
launch.jsonが作成されます。作成される設定内容についてはこのままでＯＫです。
PHPがデバッグできることを確認する
launch.jsonが作成されたら、テスト用のPHPを準備しましょう。
C:\xampp\htdocsの配下にdebugtest.phpというファイルを作成し、以下のPHPのプログラムをまるっとコピーしてはりつけます。
debugtest.php
<?php echo "ここで止めてみよう"; ?>
debugtest.phpに左のとおりプログラムをコピーし上書き保存します。
画面上部のメニュー[ファイル]-[フォルダを開く]を選択します。
C:\xampp\htdocsのフォルダを選択し[フォルダの選択ボタン]をクリックします。
画面左のエクスプローラアイコンをクリックし、debugtest.phpを選択してダブルクリックし右側のエディタに開きます。
行数が表示されている部分の左側をクリックするとブレークポイント(ここでは赤丸)が表示されます。
画面上部のメニューより[実行]-[デバッグの開始](もしくはF5押下)をクリックします。
画面下部の青い部分が橙色になります。
以下のURLをブラウザに入力しアクセスします。
URL⇒http://localhost/debugtest.php
ブレイクポイントを設定した箇所でプログラムが止まればデバッグ成功です。
おめでとうございます。
F5を押してさらにプログラムを進めてみましょう。
ブラウザに「ここで止めてみよう」の文字が表示されます。
デバッグは基本的には以下の操作でプログラムを進めます。
F5・・・プログラムを最後まで実行
F10・・プログラムを１行ずつ実行
パソコンは普通に触れるが、プログラム書いたり開発したことがないといったレベルの方を対象とするぐらいの説明を実施してきましたが、ここまでのことが設定できれば、VisualStudioCodeの操作方法も少々身についてきたのではないでしょうか。
デバッグの操作はVisualStudioCodeのメニューで[実行]ー[デバッグの開始](もしくはF5)を押したときに表示される以下のデバッグメニューが画面上部に表示されるので、マウス操作でも、キーボードでもデバッグを行うことができます。
左から・・・
続行、ステップオーバー、ステップイン、ステップアウト、再起動、停止の操作を行えます。実際に動かして試してみてください。
以上で、PHPのデバッグについて一通り説明しました。これからプログラムを実装した後には必ずデバッグを行い、正しく意図する動きをしているか確認してプログラミングをしていきましょう。
↓↓作成したPHPを公開するサーバーの準備は以下で！
↓↓身に着けたスキルで職をゲット！まずは登録してみよう。どんな仕事があるのか知るのも重要！
