【EC-CUBE4】⑤EC-CUBE本体の開発環境を整える（Xdebug, PhpStorm編）

EC-CUBE4の環境構築続きです。
[【EC-CUBE4】①EC-CUBE本体の開発環境を整える（インストール編）](https://qiita.com/junpeko5/items/199af36a31a335a73d38)
[【EC-CUBE4】②EC-CUBE本体の開発環境を整える（GitHub Flow編）](https://qiita.com/junpeko5/items/8706a91452e85eef5109)
[【EC-CUBE4】③EC-CUBE本体の開発環境を整える（MYSQL,MailCatcher編）]
(https://qiita.com/junpeko5/items/3316b654b4b80ee59376)
[【EC-CUBE4】④EC-CUBE本体の開発環境を整える（Postgres,MailCatcher編）]
(https://qiita.com/junpeko5/items/ef572490c44da90eac59)

## 前提条件

- Mac
- .phpenvでphp7.2.8がインストール済み
- EC-CUBE4がローカル環境にインストール済み（<a href="https://qiita.com/junpeko5/items/199af36a31a335a73d38">【EC-CUBE4】①EC-CUBE本体の開発環境を整える（インストール編）</a>が終わっていること）

## 方針

- webサーバーはビルドインウェブサーバーを利用。


## xdebugのモジュールを有効にする


```
$ php -S localhost:8000
$ php -v
PHP 7.2.8 (cli) (built: Jun 19 2019 14:35:53) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.8, Copyright (c) 1999-2018, by Zend Technologies
    with Xdebug v2.7.1, Copyright (c) 2002-2019, by Derick Rethans
$ php -m
[Zend Modules]

```

`php -m`でXdebugのモジュールがなければ、エクステンションを有効にします。

まずは設定を確認します。

```
$ php --ini
Configuration File (php.ini) Path: /Users/<ユーザー名>/.phpenv/versions/7.2.8/etc
Loaded Configuration File:         /Users/<ユーザー名>/.phpenv/versions/7.2.8/etc/php.ini
Scan for additional .ini files in: /Users/<ユーザー名>/.phpenv/versions/7.2.8/etc/conf.d
Additional .ini files parsed:      /Users/<ユーザー名>/.phpenv/versions/7.2.8/etc/conf.d/xdebug.ini
```

```
$ vim /Users/<ユーザー名>/.phpenv/versions/7.2.8/etc/conf.d/xdebug.ini
```

xdebug.iniに以下を追記します。

```
[Xdebug]
xdebug.remote_enable=true
xdebug.remote_autostart = On
xdebug.remote_port=9001
xdebug.remote_host=localhost
xdebug.idekey = "PHPSTORM"
```

サーバーを再起動します。

```
$ php -S localhost:8000
$ php -m
[Zend Modules]
Xdebug
```

Xdebugのモジュールが表示されていればOKです。

## PhpStormの設定

### Preferences

Preferences > Languages & Frameworks > PHP より、CLI Interpreterを設定します。

下図のような感じです。

<img width="820" alt="スクリーンショット 2019-08-05 22.06.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166768/094062b1-98b1-42d3-db28-35eed7f6607c.png">

CLI Interpreterが設定されました。


<img width="989" alt="スクリーンショット 2019-08-05 22.05.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166768/58d1aebc-023c-02a5-a44b-0bbcdf2ef4d8.png">

次に、
Preferences > Languages & Frameworks > PHP > Debug より、Debug portを9001に設定します。

<img width="1002" alt="スクリーンショット 2019-08-05 22.07.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166768/dbe16274-dea7-c4ae-b288-82f25ca7a833.png">

Preferences > Languages & Frameworks > PHP > Servers より、下図のように設定します。

<img width="979" alt="スクリーンショット 2019-08-05 22.07.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166768/1a2e4911-e2bb-50c5-066b-08e2e1ad77ca.png">

### Edit Configurations

Edit Configurationsを設定します。

Run > Edit Configurations より、ServerとIDE keyを設定します。

<img width="1078" alt="スクリーンショット 2019-08-05 22.08.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166768/acb692c2-ff94-6cb4-aed9-f5c40087e7b8.png">


### 動作確認

PhpStorm右上の電話マークをオンにしてください。
その後、図のようにソースの左側にブレークポイントを張って、ブラウザで、画面遷移します。
処理が走ると、ブレークポイントで処理が止まります。
下図のようになれば、デバッグが成功しています。

<img width="1101" alt="スクリーンショット 2019-08-05 22.19.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166768/b1767670-64de-d499-a091-59cc51a6c7a6.png">


## 注意点

EC-CUBE４の管理画面からプラグインをインストールする際に、Xdebugが有効になっているとインストールに失敗します。

プラグインをインストールする際は、Xdebugを無効にしてから、インストールするようにしましょう。

## 次回

[【EC-CUBE4】⑥EC-CUBE本体の開発環境を整える（Codeception編）](https://qiita.com/junpeko5/items/f593f20adc19c4208f71)をお送りします。