【Mac】XAMPP & Eclipse & XDebugにてPHPをデバッグ実行する方法

<!-- 
参考にしたサイト
・Rootパスワード変更
https://www.adminweb.jp/xampp/mysql/index3.html

・Eclipseでデバッグ
↓Win
https://rensrv.com/wp/xdebug/install-xdebug-on-eclipse/

↓Mac
https://www.aiship.jp/knowhow/archives/25695
-->
#前書き
Mac OS Catalinaにアップデート後、ずっと使用していた古いXAMPPが起動しなくなったのでこの機会にXAMPPを最新化しました。 筆者はXAMPP & Eclipseで開発をしているため、ついでにEclipseでデバッグする方法についても記載しています。

※ WindowsだとEclipseの中にXAMPP入ってたはずですが、Macだと別々なので少しややこしいですね

#本記事を作成した際の環境
OS : `mac OS Catalina Version 10.15.6`
XAMPP : `Version 7.2.32`
Eclipse : `Version 4.7 Oxygen`
XDebug : `Version 2.9.6`


#やること一覧
###① XAMPPのインストール
###② Eclipseのインストール
###③ Xdebugのインストール
###④ XAMPPのPHP環境にXdebugを設定
###⑤ Eclipseのデバッグ構成を設定


#① XAMPPのインストール
下記のサイトからMac版で最新のXAMPPをダウンロード＆インストールする
https://www.apachefriends.org/download.html
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/e3566261-d40c-d369-0665-f2fea7dd2a01.png)

#② Eclipseのインストール
1. 下記のサイトから最新版のEclipseを選択
https://mergedoc.osdn.jp/
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/e9148e1e-ab78-4b0d-3505-b30770815839.png)

2. **PHP**の**Mac 64bit**から**Full Edition**をダウンロード＆インストール
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/c5d7471b-48a1-2582-842c-55da8b150949.png)

#③ Xdebugのインストール
1. 下記のサイトから最新のXdebugをインストールする
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/05093410-6463-02f1-ca14-2650dd83025a.png)


2. ダウンロードしたXdebugファイルを解凍して、解凍したフォルダに移動

```
$ tar -xvzf xdebug-2.9.6.tgz
$ cd xdebug-2.9.6
```

&nbsp;
3. **xdebug-2.9.6**をコンパイル

```
$ phpize
```

&nbsp;
4. コンパイルに成功すると**configure**フォルダが作成されるので下記のコマンドを実行

```
$ ./configure
$ make
```

&nbsp;
5. **module**ディレクトリに、**xdebug.so**ファイルが作成されるので、下記のディレクトリに**xdebug.so**をコピーする
`/Applications/XAMPP/xamppfiles/lib/php/extensions`


#④ XAMPPのPHP環境にXdebugを設定
1. php.iniに下記の記述を追加<br />
ちなみにphp.iniのパスはこちら →  `/Applications/XAMPP/xamppfiles/etc/php.ini`

```
[xdebug]
zend_extension=/Applications/XAMPP/xamppfiles/lib/php/extensions/xdebug.so
xdebug.default_enable=1
xdebug.remote_autostart=1
xdebug.remote_enable=On
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.idekey=
xdebug.profiler_enable=On
```


&nbsp;
2. Apatchを再起動して**phpinfo.php**を確認すると、Xdebugが追加されています
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/ab39c293-8974-caca-d5a2-652fd01800f8.png)

#⑤ Eclipseのデバッグ構成を設定
1. パースペクティブにて**PHP**を選択、デバッグから**デバッグの構成**を選択
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/e123ae60-464e-0fcb-d723-29c37a7d13d6.png)


2. **PHP Webアプリケーション**を右クリックして、**新規**を選択
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/b11e80fc-5324-fc68-dcbb-6c0312590ff4.png)

3. **サーバー**から**新規**を選択 
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/7268330c-76a3-19da-a478-0c5a728d6338.png)

4. 下記のように設定して完了ボタンを押下
サーバー名 : `任意の名前`
ベースURL : `http://127.0.0.1`
文書ルート : `/Applications/XAMPP/xamppfiles/htdocs`
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/9814855a-4a45-5d7a-4209-22d67ff1472a.png)

5. **PHP サーバー**に先ほど作成したサーバーを選択して、**ファイル**に対象のプロジェクトを選択
※ ファイルはデバッグ実行時に起動するファイルを設定しているだけなので、とりあえずindex.phpが無難

6. **デバッガー**から、**構成**を選択
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/3dc5b719-94a1-69de-574d-18b22659160a.png)

7. **デバッガー**から**XDebug**を選択
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/e8cb81d4-80fe-09e0-4839-095f50dad729.png)

8. **名前**に任意の名前を設定しておく
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/29e06c13-24ab-e028-1063-c5a197a6f50f.png)

9. **適用**を押下
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/bf01cfe8-c7aa-6f49-7520-0b48279a150a.png)

10. 作成したデバッグ構成を実行
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/32403c28-c430-989e-d08f-df362335ea4c.png)

デバッグポイントに止まります
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676215/ccc90b80-a29e-6215-30fc-e764d215ab20.png)