また旅

日々のこと、画面の中でのこと (今はIDCFクラウド、KUSANAGI、WordPress、Vagrant及びCodeIgniter).

ブログ

VagrantでCentOS 7でXdebugでデバッグ PhpStorm編

前回の続きです。PHP 7をインストールした環境が前提となってます。

 

まずは、仮想マシンにログインしてApacheを起動して下さい。

sudo systemctl start httpd

仮想マシンの起動時に自動で起動するには下記コマンドを入力してください。

sudo systemctl enable httpd

状態の確認は下記コマンドです。正常時は「Active: active (running)」が表示されます。

 

問題なければ、仮想マシンを作成時にVagrantfileに設定したアドレスにブラウザでアクセスして下さい。例えば「http://192.168.1.43」などです。「Testing 123..」などと書かれた画面が表示されると思います。

 

続いて、Vagrantfileのある場所に作成したhtmlフォルダの中にtest.phpファイルを作ってください。内容は下記の通りです。

<?php
echo 'test';

 

ファイルを作ったら先ほどブラウザでアクセスしたURLの最後に「/test.php」を足して再度アクセスして下さい。(例:http://192.168.1.43/test.php)

今度は「test」と左上隅に表示されたと思います。

 

それではPhpStormでデバッグするための設定を行います。インストールなどの説明は省略します……。下記のページで作ったブックマークレットが必要です。とりあえず今回使うものは下に張り付けときます。

Xdebug & Zend Debugger bookmarklets generator for PhpStorm
https://www.jetbrains.com/phpstorm/marklets/

デバッグスタート

javascript:(/** @version 0.5.2 */function() {document.cookie='XDEBUG_SESSION='+'PHPSTORM'+';path=/;';})()

デバッグストップ

javascript:(/** @version 0.5.2 */function() {document.cookie='XDEBUG_SESSION='+''+';expires=Mon, 05 Jul 2000 00:00:00 GMT;path=/;';})()

 

それでは今度こそPhpStormの設定です。とりあえず起動してください。

File→Open Directoryで先ほどのhtmlフォルダを選択してOKして下さい。

File→SettingsでLanguages & Frameworks→PHP→Serversと進んで下さい。

緑色の+(プラス)ボタンを押してください。Nameはなんでもいいです、そのままでも。Hostに仮想マシンに設定したアドレスを入力して下さい。(例:192.168.1.43 ※今回はhttp://は無しです。)

Use path mappingsにチェックを入れて、今開いてるhtmlフォルダのパスが表示されますので、その右の方(小さい四角にペンみたいな小さなアイコンがあります。)をクリックして下さい。入力欄になるので下記を入力してOKして下さい。

/var/www/html

 

 

Run→Edit Configurationsを選択して下さい。右側にあるDefaultsをダブルクリックか左に付いてる三角をクリックして展開して下さい。PHP Remote Debugを選択して下さい。

Serversを先ほど設定したのに変えて、Ide Keyに「PHPSTORM」と入力してOKして下さい。

ちょっと分かりにくいかもですが画面左端のhtml(フォルダのアイコンが付いてます。)を展開して下さい。下に作ったtest.phpが表示されますのでダブルクリックして下さい。

右側にファイルの中身が表示されますので、「echo 'test';」の行をクリックしてCtrl+F8を押して下さい。行の左側に赤丸が表示されます。これはここでプログラムを一旦停止しますという印です。Ctrl+F8の代わりに赤丸のある部分をクリックしても付けられます。また再度Ctrl+F8またはクリックで消えます。

PhpStorm最後の作業は画面右上にある「受話器に駐車禁止マークに虫」なアイコンをクリックして下さい。虫眼鏡の左のやつです。駐車禁止マークが消えて、話してますみたいな感じになります……

 

では、ブラウザでtest.phpにアクセスして下さい。(例:http://192.168.1.43/test.php)

……今はまだ、何も起こりません。もしブックマークレットを作ってたら、デバッグスタートの方を選択して下さい。作ってなければ、F12を押して、IEならコンソール、ChromeならConsoleタブを開いて、これまた分かりにくいですが「>」の右側にデバッグスタートの内容を張り付けてEnterして下さい。IEは一番下の灰色のとこです。

これで再度test.phpにアクセスするかF5を押すとどうでしょう!?

PhpStormに何か変化があるはずです。ない場合はどっかの手順で間違っていると思われます。お手数ですが見直して下さい。

 

デバッグ開始に成功した場合はプログラムが一時停止しますので、ブラウザは読み込み中のままになり、PhpStormは画面左端に縦に並んでる実行と停止のボタンがそれぞれ緑色と赤色になります。(通常はグレーアウトしてます。)

緑色の実行ボタンの右のDebuggerタブを選択して、$_COOKIEや$_SERVERを展開してみて下さい。初体験だとなんじゃこりゃースゲーってなる、はず。たぶん。

 

デバッグをやめたい場合は、ブックマークレットでデバッグストップを行う。PhpStormで付けた赤丸を取る。「受話器に虫」をクリックする(駐車禁止マークが付く)。のいずれかの操作を行って下さい。

 

なんか、えらい長くなってしまいました。タイトルのVagrantとCentOS 7はあんまり関係なかったな……

 

-ブログ