やっとできた BreakPoint (Docker Atom)

# phpでブレークポイントを貼りたい

docker(docker-compose)を使っていて、phpのローカル環境を使って構築しているのですが、
ブレークポイントが貼れたら楽になるんだろうなぁと思ってました。

ググってみると、qiitaなどでやり方が書いてあるのでやってみるのですが、なかなかうまくいかない。
空いてる時間を見つけて、ちょっとやってみる→諦める→やってみる→諦める→やってみる→できた！！
とちょっと苦戦したので、私がつまずいたところを交えながら書いていこうと思います。

## 環境
Docker version 17.03.0-ce, build 60ccb22
(たぶん、 **Docker for Mac**を使用しています。)
docker-compose version 1.11.2, build dfed245
PHP 7.0.14

nginx + php-pfm　で作成

## 手順

### ポート番号(9000)の解放

以下の「- 9000:9000」の部分です。

``` docker-compose.yml
services:
  web:
    build: docker/nginx
    ports:
      - 80:80
      - 9000:9000
```

ポートを(9001に)変えたい場合は、「9001:9000」とすればよいですよ。

### **php.ini 追記**
Dockerfileと同じ階層にmy.iniファイルを作成(拡張子が「.ini」ならファイル名はなんでもOK)

<font color="red">ここでremote_hostをlocalhostではなく、自分のIPアドレスにすること！</font>

``` my.ini
[xdebug]
xdebug.remote_enable=1
xdebug.remote_host=[IPアドレス]
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true
```
「xdebug.remote_autostart」は常にデバッグ情報を送り続けます。ローカル環境ならよいでしょう。
xdebug.remote_autostartはオフにする場合は、idekeyやブラウザの拡張機能を云々する必要があります。(リモートのサーバなどはオフにしましょう。)

「zend_extension="/usr/lib/php/extensions/no-debug-non-zts-20121212/xdebug.so"」←こんなやつは必要ありませんでした。たぶんこれは、localhostの場合。

下の設定はDocker for Macの場合は入れてはいけないらしいです。

```
xdebug.remote_connect_back=1 <---　これはダメ これはlocalhostの場合(?)
```

IPアドレスはMacのネットワーク設定から調べてください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/151491/2f7692c6-a0b0-8c78-eca6-14eb7e20445e.png" width="50%">

DHCPにしてるとIPが変わりますが、
エイリアスをきることで変更不要にすることも可能。(が、私はしない。)

[※ docker 17.06からは「docker.for.mac.localhost」というドメインが使えるそうです。](https://docs.docker.com/docker-for-mac/networking/#per-container-ip-addressing-is-not-possible)



### **xdebug**
Dockerfileに以下を追記(peclがある前提)
my.iniファイルを読み込ませる。

``` Dockerfile
RUN pecl install xdebug && docker-php-ext-enable xdebug

ADD ./my.ini /usr/local/etc/php/conf.d
```

修正が完了したら、dockerをbuildしてください。

## **Atomの設定**
まず、「php-debug」のパッケージを入れる。
環境設定->Install　から 「php-debug」で検索するとでてくると思います。

php-debugの設定を2つ(Pash MapsとServer Address)変更する。

#### **Path Maps**
[リモートパス];[ローカルパス] のように書きます。例↓
`/var/www/html;/Users/m-kushima/git/test_project`

**ローカルパスはフルパスで書いてください。**
最初は「~/git/test_project」と書いてました。フルパスでないとどこかわからないですよね。

※　設定はAtomで一つしかもてないようですなので、ディレクトリを変更する場合はいちいち変更しないいけないみたいです、多分。

#### **Server Address**
上のmy.iniに書いたIPアドレスを指定してください。

※ 「docker.for.mac.localhost」の場合は、編集しなくてよいはずです。

##### ポートを変更したら、Atomの設定も変更しましょう。


## あとはブレイクポイントを貼るだけ！

php-debugのパッケージを入れてからAtomの左下あたりに、以下のボタンができています。
クリックすると

<img src="https://qiita-image-store.s3.amazonaws.com/0/151491/ea0ec4f0-a1df-1c8a-e343-4e1c5a3cbb3c.png" width="50%">

下の方に以下のようなものがでてきます。これが出てきている間だけ監視しているようです。
(ここでエラーが出る場合は、IPアドレスがおかしいです。)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/151491/373d104c-0c42-b3bd-a0ed-1e17c22ef7df.png)


#### ブレイクポイント貼り方

ソースの左側にクリックすると青い<font color="#1a97ff">●</font>ができれば貼れてます。
(若干押しにくいです。入力部分のすぐ左になります。)

<img src="https://qiita-image-store.s3.amazonaws.com/0/151491/47cfac01-05cd-8000-48cb-aa2db35363c4.png" width="50%">

ブラウザでアクセスしてみると、

|<img src="https://qiita-image-store.s3.amazonaws.com/0/151491/ac37ef26-f4e4-f525-b68d-ad5b17755274.png" width="50%;">|
|:-:|

↓Atomに移動してきます！(こうなれば成功！)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/151491/f6da8968-557d-7b45-680c-efe64557ab4b.png)

| 名称 | 説明 |
|:-----------|:------------|
| Continue | 続ける |
| Step Over | 1行ずつ進める(次の行が関数のときは、その関数は最後までいく) |
| Step In | 1行ずつ進める(次の行が関数でも、1行ずつとかそんな感じ。) |
| Step Out | 現在の関数から抜け出す(そんな感じ) |
| Step Stop | 止める |
| Stack | ソース(行数)が表示される |
| Context |　変数が見れる。「▶︎」をクリックすることによりネストを開く。(上限やネストの深さの設定がある。) |
| WatchPoints | デバックしたい変数を入力すると教えてくれる。 |
| BreakPoints | 張っているブレイクポイントの場所を表示 |



## 参考サイト
https://qiita.com/masch/items/1b51e3fd503f574347f9
https://qiita.com/neronplex/items/785c9df4328608f8544d
https://qiita.com/Y-Kanoh/items/a317ceeaca16e96e0a3e