技術ブログ｜PHPデバッグが変わる！xDebugのセットアップと活用法ガイド

![note.：社員インタビュー (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/e88f357d-22a2-477d-af82-d29a49a53ec2.png)

# はじめに
ホスト環境とは別の環境で動作しているプログラムをデバッグすることをリモートデバッグといい、xDebugも基本的にはそれに当たります。

本記事はリモートデバッグをCentOS10+PHP8.2にて行う手順を示します。

# 前提
   -CentOS Stream 10(仮想マシンとして立ち上げる)
    -PHP8.2

# VMWareのダウンロードとインストール
https://support.broadcom.com/web/ecx#.

上記アドレスにアクセスし、アカウントを作成した後
Software→Mainframe Software→My Downloadをクリックします。

![①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/317bbaac-b41e-4b4b-b6e0-5b498fa95a00.png)


下記画像の Free Software Downloads available HEREをクリックします。

![②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/0d8626e9-b968-4ed4-8474-118ba0cdf495.png)


VMWare workstation Proをクリックします。

![③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/c94bb52b-2bd5-479c-b9e3-b84456089bbe.png)


OSを選択します。

![④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/c058ccb5-3441-441c-ab64-ba0837008a32.png)


ダウンロードボタンをクリックします。

![⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/017a75de-3dba-414a-8ffa-02d2e70b8a75.png)


インストールは別段問題なければNext->Next->Nextで大丈夫です。
# CentOSのイメージをダウンロードする
https://www.centos.org/download/

![⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/9dd834fe-5395-477b-ab07-cade1187ab27.png)


# 仮想マシンを作成する
メニュー[新規仮想マシンの作成]を押下します。

![⑦.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/a5f554bc-0ee5-4f6e-8c8e-2352e514fb77.png)


‘構成のタイプ’を’標準’にチェックを入れ次へを押下します。

![⑧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/ac9a711f-7f88-448a-a9d9-137cc712aeef.png)


‘インストーラディスクイメージファイル’から作成するOSのイメージを選択し、ハードディスク容量等を適宜設定し作成を完了します。

※GUIでのインストールを行う場合はグラフィックスメモリを64MB以上に、メモリを2GB以上に設定してください。

![⑨.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/1d56bfa5-d4e5-409a-840a-a624b9851f23.png)


‘マシンのパワーオン’を押下します。

![⑩.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/a4eaa3b2-b9cd-4731-ac93-bd9796b83a88.png)


Install CentOS Stream 10 にカーソルを合わせてEnterキーを押下します。

![⑪.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/d879c7bc-d98f-448d-a15b-852127f16dda.png)


日本語に対応しているので、ガイドに従ってインストールをしていきます。

![⑫.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/77dcdc25-4213-4c7b-ba32-e34090a83c44.png)


今回はPHPを動かすだけなので最小構成でインストールします。

![⑬.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/17d0049c-1cf5-4175-af94-226044d97e3d.png)


# 一通り下準備する
リポジトリの有効化
dnf config-manager --set-enabled crb
dnf install httpd://dl.fedoraproject.org/pub/epel/epel-release-latest-10.noarch.rpm
dnf install https://rpms.remirepo.net/enterprise/remi-release-10.rpm
dnf config-manager --set-enabled remi
yum update

…中略(AMPインストール)

# xDebugをインストールする
yum install -y php-pecl-xdebug

# php -v で確認 ※phpinfo()でも可
インストールされていれば以下が出力される
Zend Engine v...
with Xdebug v...
![⑭.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/17f6bc36-90f7-4720-a0cf-2c097472e435.png)


# ip addrコマンドでゲストOSのアドレスを確認
![⑮.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/cce124bd-2bec-473e-8838-e0aa4c92a05e.png)


# 設定ファイルを編集する
vi /etc/php.ini

以下を追記

zend_extention=xdebug.so
[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.discover_client_host=true
xdebug.client_port=9003
xdebug.client_host=xxx.xx.xx.xx ←ip addrで確認したIPアドレス

# IDEの設定を行う(VScode)
### PHPの拡張機能をインストールしておく
![⑯.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/e16ad308-ee3f-4ab9-9e61-53986c5ce27f.png)


### launch.jsonを作成する
サイドバーのデバッグを押下→launch.jsonの作成

![⑰.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/b8987826-b78e-4ca9-a77b-2363abb3f0bb.png)


### 下記を入力
```{
  "name": "Listen for Xdebug",
 "type": "php",
  "request": "launch",
  "port": 9003,            ←前述のphp.iniのポート設定と合わせる
  "pathMappings": {
   "/var/www/html": "${workspaceFolder}"
  }
}
```

![⑱.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/48f06e67-dfd7-4e8b-a5b0-5290d50d914e.png)


うまくいくと、以下のようにブレークポイントで停止します。

![⑲.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4093365/a7ee3c07-2a54-4004-b80c-9a2f7e37348b.png)


# おわりに
普段のデバッグから、500エラーなどでログすら吐かれない時まで役に立つと思います!

# 安心安全のホワイト高還元SESに転職を考えている方へ
新しい挑戦に踏み出すことは、人生において重要な一歩です。
転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つになるかと思います。
どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！
グラディートと一緒に誇れるエンジニアを目指しましょう！

■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）

株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/

株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/