第8章 デバッグ方法を知っておこう

8.3 Eclipseのデバッガーを利用するデバッグ方法

前節では、画面に情報を表示するデバッグ方法を学習しました。本節では当スクール環境のEclipseに標準で組み込まれている、デバッガーを利用して行うデバッグ方法について解説していきます。

8.3.1 デバッグ練習用プログラムの準備

以下に示すプログラムを作成し、実際にEclipseによるデバッグを行います。
このプログラムは前章の7.1.3で作成したプログラムの内容を少し変更したものです。

■変更内容

①debugForm.php(元になったファイル:calcForm2.php)

  • 1~3行目にタイトル用変数$titleの処理を追加
  • 7行目の<title>タグの囲みの間に、ショートタグを利用して$titleを埋め込む処理に変更

②useDebug.php(元になったファイル:useFunction2.php)

  • 変更なし

デバッグ練習用プログラム

ソース・フォルダー: myproj_basic/ch08
パッケージ: debugForm.php
アクセスURL:http://localhost/myproj_basic/ch08/debugForm.php

debugForm.php

ソース・フォルダー: myproj_basic/ch08
パッケージ: useDebug.php
アクセスURL:debugForm.phpからの画面遷移でアクセスされる

useDebug.php

8.3.2 デバッグ練習用プログラムのデバッグ実行

デバッガーを利用してデバッグを行う、主な手順は以下のようになります。

  • Eclipseから対象のPHPファイルをデバッグ実行する。
  • ステップオーバーでデバッグ処理を1行ずつ進める。
  • ステップインで関数の内部へデバッグ処理を進める。
  • ブレークポイントを設定し、再開ボタンで任意の場所までデバッグ処理を進める。

Step1:デバッグを行いたいファイルを選択して、デバッグ実行を行います。

「debugForm.php」を右クリック > デバッグ(D) > PHP Webページ(1)を選択します。
実行時には1度だけ起動URLの確認が行われます。表示された場合は「OK」を選択して下さい。


図 8.3.1:デバッグ実行

Step2:パースペクティブ切り替えの確認からデバッグパースペクティブ画面を開く

※切り替えた画面が下図と異なる場合は、メニューバーから「ウインドウ > パースペクティブのリセット」を選択して下さい
Step1で「PHP Webページ(1)」選択後、ポップアップ画面の「はい」を選択します。


図 8.3.2:PHPデバッグパースペクティブ画面へ切り替え

■各ビュー画面の紹介

①デバッグビュー

現在デバッグが行われているプログラム状況を表示します。また、デバッグ処理を進めるためのボタンも上部に用意されています。


図 8.3.3:デバッグ処理アイコン

1. 終了した全ての起動を除去:デバッグ終了済みのプログラム状況を削除します。
2. 再開:次のブレークポイントまたは最後まで処理を進めます。
3. 停止:デバッグを中止します。
4. ステップイン:関数の処理内へデバッグ処理を進めます。
5. ステップオーバー:1行ずつデバッグ処理を進めます。
6. ステップリターン:ステップインで入った関数内から抜けます。

②変数ビュー

デバッグ中のプログラム内で存在している、変数とその値を表示します。フォーム画面からの入力データ(POST、GETなど)を確認することもできます。

③ソースコードエディタ

ソースコードを表示し、ブレークポイントの設定を行います。また、デバッグ中のソースコードならば、プログラムの処理位置やブレークポイントのマーク等も表示します。また、内部ブラウザで実行された画面も表示します。

④コンソールビュー

プログラムから表示されるメッセージを表示します。

⑤デバッグ出力とブラウザー出力ビュー

デバッグ出力はブラウザへ出力するHTML文章を、デバッグの進行に合わせて表示します。
ブラウザー出力ビューはWebブラウザに表示した場合の最終結果を表示します。

⑥パースペクティブ切り替え

デバッグ実行を行うと、自動で「PHPデバッグ」パースペクティブ画面に切り替わりましたが、初めの画面に戻したい場合は右端の「PHP」パースペクティブをクリックして戻す必要があります。
環境によっては、下図のようにPHPパースペクティブボタンが隠れている場合があります。右端の「>>」をクリックすれば表示することができます。


図 8.3.4:非表示パースペクティブの表示方法

Step3:デバッグ位置の確認を行う。

デバッグ実行で該当のソースコードが開かれると、最初の行で止まるようになっています。このプログラムの場合は2行目で止まり、行番号の左側に目印の矢印アイコン(下図の○囲み)が表示され、その行のソースコードの背景に色が付きます。
デバッグはPHPの処理の先頭で止まっており、2行目の処理は実行されていない状態です。


※最初の行で止まる設定は「ウインドウ > 設定 > PHP > デバッグ」の設定画面で変更可能です。
図 8.3.5:デバッグ実行は最初の行で止まる

Step4:ステップオーバーで処理を進めて、変数の値の確認を行う。

デバッグビューの「ステップオーバー」アイコン(下図の○囲み)を1回クリックします。
変数ビューの一番下に「$title」が追加され、代入された値「デバッグを利用しよう!」が確認できます。また、デバッグ処理を進めたことにより、次の7行目に矢印アイコンが移動しているのも確認できます。


図 8.3.6:ステップオーバーは次の処理の先頭へ進む

デバッグ処理の注意点

PHPデバッグ処理はPHPプログラムを対象にしているため、HTML文章では基本的に止まらないようになっています。ただし、例外として<select>タグでは止まるようになっています。

Step5:ステップオーバーで処理を進めて、デバッグ出力のHTML文章を確認する。

デバッグビューの「ステップオーバー」アイコン(下図の○囲み)を1回クリックします。7行目のPHPショートタグ前までのHTML文章がデバッグ出力ビューに表示されます。この時点では7行目のPHPプログラムが処理されていないため、処理位置は7行目のままです。
もう1度「ステップオーバー」アイコンを1回クリックします。7行目のPHPショートタグの処理が実行され、デバッグ出力ビューに「変数$title」の値が表示されたのが確認できます。さらに処理位置が次の12行目へ進みます。


図 8.3.7:デバッグ出力ビューの確認

Step6:再開ボタンで処理を最後まで進める。

7行目以降はHTML文章だけが残っているので、「再開」ボタン(下図の○囲み)を押して最後の処理まで進めます。※ステップオーバーで1行づつ進めても大丈夫です。
デバッグビューを確認すると最後まで処理を進めたため、デバッグが終了しているのが確認できます。またデバッグ出力を確認すると、最終結果のHTML文章も全て表示されています。


図 8.3.8:再開ボタンを押して最後まで処理を進める

ここまででdebugForm.phpのデバッグ処理を行うことはできました。さらにもう1つの「useDebug.php」の方もデバッグ処理を行っていきます。
デバッグを行う方法ですが、useDebug.phpを直接デバッグ実行しても、正しいデバッグ処理にはなりません。なぜなら、useDebug.phpはdebugForm.phpからの入力情報を元に動作するプログラムになっており、直接useDebug.phpをデバッグ実行してしまうとdebugForm.phpからの入力情報を受け取ることができないからです。
では、どのようにすればいいのかその方法は簡単です。これまでのStep6までの手順でdebugForm.phpのデバッグ処理は終わってしまいましたが、その実行処理で開かれた実行画面(ソースコードビュー内のhttp://…タブ)のフォームからデータを入力して送信(計算ボタン)を行えば、遷移先であるuseDebug.phpの先頭行からデバッグ処理が引き続き行われるようになっているのです。

では本当にuseDebug.phpへデバッグ処理が続けれるのか、次のStep7から確認して行きましょう。

Step7:デバッグ実行で開かれた実行画面から入力処理を行い、遷移先でデバッグ処理を再開する。

以下の手順で「useDebug.php」ファイルへデバッグを再開します。
①ソースコードビューから実行画面のタブを選択
②入力フォームに値を入力
③計算ボタンの押下


図 8.3.9:遷移先でデバッグ処理を続ける

Step8:遷移元からの入力情報が正しく送信されているのか変数ビューで確認する。

debugForm.phpはPOST送信のため、変数ビューでは$_POSTの左側の「+」マークをクリックします。展開された内容から、POST送信データの一覧を確認することができます。
GET送信だった場合は、$_POSTの2つ下にある$_GETの欄から送信データ内容を確認することができます。


図 8.3.10:変数ビューで送信データを確認する

Step9:ステップインを利用して、calc関数の中へデバッグ処理を進める。

ステップインボタンをクリックすると、関数内にデバッグ処理を進めることができます。また、関数内へデバッグ処理を進めたくない場合は、ステップオーバーすれば関数処理に入ることなく結果を確認できます。もしも、間違って関数内にデバッグ処理を進めた場合は、ステップリターンで呼び出し元へ直ぐに戻ることもできます。


図 8.3.11:ステップインで関数内へデバッグ処理を進める

Step10:calc関数が引数の情報で正しく動作するのか確認する。

ステップオーバーを1回クリックします。calc関数の引数情報は「$operator=’-‘」となっているため、elseブロックへデバッグ位置が移動します。もう1度ステップオーバーをクリックすると、引き算結果(33-9=24)を呼び出し先へ戻します。


図 8.3.12:関数内の処理デバッグ実行で確認する

Step11:最終実行結果とデバッグ出力内容を確認する。

再開ボタンを押して最後の処理まで進めます。ソースコードビューの実行画面タブをクリックして、その実行結果とデバッグ出力結果を確認します。


図 8.3.13:最終結果を確認する

Eclipseのデバッグ機能を使うと、処理の流れが1行単位で確認できます。また入力情報の送信有無やその値、さらには各変数の値も処理の状況に応じて確認することもできます。
また、今回のサンプルプログラムではバグがない状態で行っていますが、本来ならば何かバグが発生した場合に行うのがデバッグ作業になります。

Eclipseを使ったデバッグは大変便利ですが、ローカル環境(ご自身のパソコン)でしか利用できません。Webアプリケーションは、ローカルで動作させた場合とサーバへアップロードして動作させた場合で、結果が異なることがあります。サーバ内の環境でEclipseのデバッグを行うことはできないため、8.2節で学習した情報をメッセージ表示する方法で行う必要があります。
どちらか片方のデバッグ方法だけ覚えておくのではなく、状況に応じてデバッグ方法を使い分けれるように両方覚えておくことをお薦めします。

8.3.3 ブレークポイントの設定方法について

これまでサンプルプログラムでデバッグ処理の確認中には、ブレークポイントを利用する機会はありませんでしたが、ここでブレークポイントの設定方法とその使用目的について簡単に説明しておきます。

■ブレークポイントの設定方法

ソースコードの行番号の左側(下図の○囲み)をダブルクリックして設定を行います。成功すると青丸のブレークポイントアイコンが表示されます。


図 8.3.14:ブレークポイントを設定する

■ブレークポイントを使用する目的

ブレークポイントを設定してから再開ボタンを押すことで、その場所まで一気に処理を進めるためです。
今回のサンプルはソースコードの記述量が少ないので、ステップオーバーだけでも簡単に確認できます。しかし、規模が大きくなったソースコードではどうでしょうか。もしも、目的の場所まで辿り着くのに1000行もあったりしたら大変です。
効率良くデバッグ処理を行うためには、ブレークポイントを設定して行う方法も是非覚えておいて下さい。

NEXT>> 8.4 本章のまとめ