1. haruna-nagayoshi

    Posted

    haruna-nagayoshi
Changes in title
+PhpStormとXdebugでステップ実行 設定からPhpStormの機能まで
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,249 @@
+今月からXdebugを使い始めて、分かったことや分からないままのことをまとめました。
+
+※設定については、Dockerを利用している前提で説明します。
+PhpStormの機能については、PhpStormでステップ実行するならどんな環境でも参考になると思います。
+(InteliJについて書かれた記事も参考にしたので、JetBrainsのIDEを利用しているなら大体同じかもしれません)
+
+#### Dockerについて
+
+この一連の記事が分かりやすいので参考にしてください。
+[【Docker Compose】設定内容を1行ずつ理解しながらLaravel環境構築(PHP-FPM、Nginx、MySQL、Redis)](https://qiita.com/minato-naka/items/8b31d28823cabaa9487a#_reference-bf02d8091657f5545d6b)
+※とくに参考にした3番目の記事のみを貼っています。
+※分かりやすいので広まってほしい。
+
+## ステップ実行ができる状態にするまでの設定
+
+### 動作確認環境
+(なにを記載すれば十分なのかわからないので自分の実行環境を書けるだけ書いておきます)
+
+```
+Windows10 Pro
+Laravel 5.5
+Docker Desktop 2.1.0.1
+Docker 19.03.1
+Nginx 1.12.2 (dockerコンテナ上でnginxが動作)
+PHP 7.2 (dockerコンテナ上でphp-fpmが動作)
+PhpStorm 2019.2.1
+xdebug 2.7.2 (php-fpmコンテナにインストールする)
+```
+
+### XdebugをDockerコンテナにインストール
+
+Xdebugをインストールするためのコマンドを、`Dockerfile`に記載します。
+
+`Dockerfile`
+
+```dockerfile
+RUN pecl install xdebug \
+ && docker-php-ext-enable xdebug
+```
+
+### xdebugをPHPで有効にする
+php.iniにxdebugを有効にするための値を記載します。
+
+`php.ini`
+
+```php
+xdebug.idekey="PHPSTORM" // 識別しやすい値ならなんでもOK
+xdebug.remote_enable = On
+xdebug.remote_autostart = On
+xdebug.remote_connect_back = Off
+xdebug.remote_host = "host.docker.internal"
+xdebug.remote_port=9001 // 何番ポートでもOK
+```
+
+`xdebug.idekey`と`xdebug.remote_port`は、後述するPhpStorm側の設定で利用するだけなので、好きなkeyやポート番号を使います。
+
+他の項目が何を設定しているかについては、この記事を参考にしてください。
+[[PHP] Xdebug のリモートデバッグ、理解していますか?](https://qiita.com/castaneai/items/d5fdf577a348012ed8af)
+
+※`xdebug.idekey`や``xdebug.remote_port`をPreferencesで設定せずともXdebugを使えるらしいです。再現できず、正確な方法が分からなかったため今回は`xdebug.idekey`等を設定する方法で説明します。
+
+[PHPアプリ開発をPhpStormでスムーズに始められるよう、設定ファイルとドキュメントを用意する](https://devblog.thebase.in/entry/2019/08/22/110000)
+
+> PHPアプリリポジトリに docker-compose.yml を用意しておけば、Preferences を開いて設定しなくても、PhpStormでデバッグできました。
+
+### Dockerコンテナを起動する
+`Dockerfile` と`php.ini`を記述したら、Dockerコンテナを起動します。
+
+```
+$ docker-compose up -d
+```
+
+これで、Xdebugが有効になった環境が整いました。
+
+### PhpStormの設定
+次に、PhpStormでステップ実行を行うための設定をします。
+ここからは画像で説明していくので、 `Ctrl + Alt + S` で設定画面を開いてください。
+まず、先ほど`php.ini`に記載したポート番号を入力します。
+デフォルトの9000でもよいのですが、[メモ PHP docker xdebug](https://qiita.com/tttreal/items/59cd31c59b29e902e39f)によると、
+
+> なんでかXdebugがデフォルトで使うport:9000と、php-fpmがデフォルトで使うport:9000とが、被っているので、どちらかを変える必要がある
+
+そうなので、9001を指定しています。
+ポート番号が他のプロジェクトやツールと被らなければ、恐らく何でもいいと思います。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/f596d765-e643-437d-f47a-46956f8ec365.png)
+
+Serversの設定では、
+①Name, Host, Port, Debuggerを設定します。
+Name, Host は識別のための名前なのでどんな名前でもOKです。
+Portには先ほど設定した9001、
+Debuggerには、今回使うXdebugをセットしておきます。
+
+②Use path mappingsにチェックを入れます。
+
+③File/Directoryにはローカルのパスが書いてあり、
+Absolute path on serverには対応するDockerコンテナ側のパスを書きます。
+`docker-compose.yml`でマウントさせているパスが対応づけられていれば大丈夫だと思います。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/914233cc-1a3d-a624-0512-9e7cbc56ce79.png)
+
+ツールバーのこの部分から、`Edit Configuration...`をクリック。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/bf4b3656-f9a8-7212-833e-48182a6e7c5c.png)
+
+Run/Debug Configurations ウィンドウが開かれます。
++マークをクリックしてPHP Remote Debugを選択します。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/4e318e3a-2f6c-548b-0f12-6780d2131bd7.png)
+
+新規の設定ファイルが作成されます。
+
+①Nameには適当な名前を入力、
+②Serverには先ほど任意の名前をつけたServerを選択、
+③IDE keyにはphp.iniで記入した値を入力します。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/96bd11e6-4a46-2e12-5223-b7e34d7730cc.png)
+
+完成した設定ファイルをセットしたら、
+
+ ![the Debug button](https://pleiades.io/help/img/idea/2019.2/icons.actions.startDebugger.svg@2x.png) のアイコンをクリックして ![the Active Debugger icon](https://pleiades.io/help/img/idea/2019.2/debug_active.png) の状態にします。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/3fc47fda-9d6f-dcf0-15aa-608a0692d97d.png)
+
+デバッグしたい処理の任意のコードにブレイクポイントを設定します。(x行目を表す数字の右側をクリックでON/OFFできる)
+ブラウザでLaravelのアプリケーションを動かし、実際にその処理を走らせると、
+Incoming Connection from Xdebugというウィンドウが表示されるので、**Accept**ボタンをクリックします。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/976d0814-dd58-17bb-1665-f7ab77a5e995.png)
+
+すると、ブレイクポイントを設定した時点でプログラムが中断され、ステップ実行することができます。
+Debugウィンドウには、スタックトレース、リクエストで渡された値が表示されます。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/491e645d-a066-d826-c266-441b7a650177.png)
+
+### 参考
+
+[メモ PHP docker xdebug](https://qiita.com/tttreal/items/59cd31c59b29e902e39f)
+[PHPアプリ開発をPhpStormでスムーズに始められるよう、設定ファイルとドキュメントを用意する](https://devblog.thebase.in/entry/2019/08/22/110000)
+
+## PhpStormの機能
+ステップ実行をすると、ソースの深い部分まで簡単に追うことができます。
+Laravelやその他ライブラリの深い部分まで読むと、理解が深まったり、バグ解決の助けになります。
+
+### 基本
+ステップ実行では、StepIntoやStepOutボタンを押しながらソースを追ったり、式の評価をすることができます。
+PhpStormでステップ実行するときの基本的な使い方について、分かったことを説明します。
+Step〇〇の違いについては、実際に使うのが一番理解が早いと思います。(例になるコードを書く気力がなかった...)
+
+##### Step Over (F8) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/15f7dd24-363c-d316-3b50-99d729825779.png)
+現在の行から1つ先の行に移動する。
+現在の行で関数が呼び出されていても、その関数を呼び出さずに次の行に移動する。
+
+##### Step Into (F7) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/a2627174-9cc6-2be2-ca36-9606e72234be.png)
+現在の行から1つ先の行に移動する。
+現在の行で関数が呼び出されている場合、その関数の中に進む。
+
+##### Force Step Into (Alt + Shift + F7) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/b8ed36fe-9d00-ec77-7ea2-9e1066e3a174.png)
+`Step Into`はコンストラクタ関数や、`ClassLoader.php`などのどうでもいいところをスキップする仕組みがあるのに対し、
+`Force Step Into` の場合は、この設定を無視してスキップせずに全て実行出来る。つまり、`Step Into`よりも細かく見れる。
+
+設定画面のこの部分で追加できるらしいですが、まだまともに設定したことがないので割愛。
+デフォルトだと何も設定されておらず、その場合は`Step Into`と`Force Step Into` は同じ挙動...?
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/5184018a-0124-549c-56d2-c1ec418f9b3b.png)
+
+##### Step Out (Shift + F8) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/3a6b5b01-3890-bf0c-af4d-3fabe9ddd36c.png)
+現在の関数の1つ外まで移動する。
+`Step Into`で関数のなかに入ったあと`Step Out`すると、関数の呼び出し元に戻ることができる。
+
+##### Run to Cursor (Alt + F9) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/999ac372-25a4-92c7-484e-7cd453679728.png)
+カーソルが置いてある行まで実行し、カーソルが置いてある行で停止する。
+Vimのプラグインを入れている場合、恐らくインサートモード状態でないとカーソルとして認識してくれない模様。なのであまり使っていない。
+
+##### Evaluate Expression (Alt + F8) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/32cdcc24-93fd-13ea-5260-6d09a5c360f0.png)
+デバッグ中に「ここで別のメソッド呼ぶとどうなるんだろう」と思ったら、
+Evaluate Expressionボタンで、コードを動的実行した結果を見ることができる。
+改めてコードを記述して再度ステップ実行を開始する必要はない。
+
+Evaluate Expressionボタンを押すとウィンドウが開かれる。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/5587d2b5-f93f-110e-c206-fdb6886412b9.png)
+`Expression:` に評価したい式を入力し、`Evaluate`ボタンを押すと、`Result:`に結果が表示される。
+`Expression:` では入力補完が効いていて、インスタンスから呼び出せるメソッドやPHPの標準関数が補完される。
+画像の例では、使いこなせていない私が適当に**Evaluate**したのでerrorで怒られています。
+
+##### Resume Program (F9) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/5609d40d-5150-7e40-c365-d02806c39bb0.png)
+中断していたプログラムを再開する。
+さらにブレイクポイントを設定している場合は、そこで再度中断する。
+ブレイクポイントからブレイクポイントへ飛べるイメージ。
+
+### デバッグ中に変数の中身を書き換える
+DebugウィンドウのVariablesタブに表示された変数を右クリック→`Set Variable`
+で変数の値を書き換えられます。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/b23c6645-a3b9-cedd-ca33-ec38a62960cc.png)
+
+### デバッグ中に開かれたファイルを閉じたくない
+ファイルをいくつも開いた状態で新たにファイルを開くと、最初に開いていたファイルが勝手に閉じられます。
+ファイルのタブを右クリック→`Pin Tab` すると、勝手に閉じないようになります。(自分で閉じた場合は通常通り閉じます)
+`Pin Tab` はデバッグに限らずいつでも使えます。
+
+ステップ実行でプログラムを進めていくと該当ファイルが次々と開かれますが、
+「このファイル、後で読み直したい!」というときは`Pin Tab` しておけば、あとで読み返せます。
+
+↓Container.phpにピン留めのマークがついています。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/b9ec80a3-c96e-958e-5238-96aa1e967460.png)
+
+### 参考
+[式の評価](https://pleiades.io/help/phpstorm/2019.2/evaluating-expressions.html)
+[PhpStormのデバッグを使いこなす](https://qiita.com/Vexus2/items/333dbb0faf2d62777c9e)
+[IntelliJ IDEAのデバッガのstep over, step into, force step into, step out, drop frame, run to cursor 機能の解説](https://qiita.com/takc923/items/35979a3ae68c9ad890df)
+[AndroidStudioで覚えておくべきデバッグTIPS](https://qiita.com/FumihikoSHIROYAMA/items/e3159103ba2fba07e063)
+
+## 他にも機能がたくさんあるけど調べきれない
+使っていてわかったら書くかもしれない・・・。
+
+#### blade.phpでブレイクポイントを使う方法
+デフォルトだと、blade.phpでブレイクポイントを設定しても、デバッグできません。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/589761ec-7e12-134a-e7f7-300d4690ffa8.png)
+コードとして `xdebug_break();`を記述することで、ブレイクポイントの代用とするそうです。
+
+Laravel5.7までは、コンパイル済みのbladeテンプレートのほうを参照するらしい。
+[PhpStormの公式](https://pleiades.io/help/phpstorm/laravel.html)や[Laravel News](https://laravel-news.com/phpstorm-2019-1) で説明されている通り、Laravel5.8からはblade.phpに直接ブレイクポイントを設定できるとのこと。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253650/280cfaa3-e2a8-dc1c-89ef-80b805932fe6.png)
+
+#### ブレイクポイントの違い
+公式の説明によると、[ブレイクポイント](https://pleiades.io/help/phpstorm/using-breakpoints.html)には3種類あるらしい。
+
+#### JavaScriptもデバッグできる
+難しいjs書かないし、ブラウザの開発者ツールで十分なことが多いので需要はなさそう。
+Node.jsならNode.js、Vue.jsならVue.jsのためのデバッグツールが存在するんだとしたらそれらを使うほうがいいのかも。
+
+#### 虫単体のマークと、虫+電話のマークの違い
+全然わからない。
+ ![the Debug button](https://pleiades.io/help/img/idea/2019.2/icons.actions.startDebugger.svg@2x.png) ![the Active Debugger icon](https://pleiades.io/help/img/idea/2019.2/debug_active.png) は「the Debug button」「the Active Debugger icon」
+ ![start listening php debug connections](https://pleiades.io/help/img/idea/2019.2/php.icons.debug_listen_off.svg@2x.png) ![stop listening php debug connections](https://pleiades.io/help/img/idea/2019.2/php.icons.debug_listen_on.svg@2x.png)は「start listening php debug connections」「stop listening php debug connections」と呼ぶらしい。
+[PhpStormによるデバッグ: 基本ガイド](https://pleiades.io/help/phpstorm/debugging-with-phpstorm-ultimate-guide.html)や[PHP CLIスクリプトのデバッグ](https://pleiades.io/help/phpstorm/debugging-a-php-cli-script.html)を深く読めばわかるのかもしれない。
+
+今まで ![the Active Debugger icon](https://pleiades.io/help/img/idea/2019.2/debug_active.png) と ![stop listening php debug connections](https://pleiades.io/help/img/idea/2019.2/php.icons.debug_listen_on.svg@2x.png)両方をONにした状態でデバッグしていたが、
+
+記事を書くために改めて調べているうち、 ![the Debug button](https://pleiades.io/help/img/idea/2019.2/icons.actions.startDebugger.svg@2x.png) だけでデバッグ作動することに気づいた。
+
+ブラウザの拡張機能を使うときに、受信デバッグマークをListen状態にしておくのかも。
+
+#### [ゼロコンフィギュレーションデバッグ](https://pleiades.io/help/phpstorm/zero-configuration-debugging.html)
+公式ガイドに頻繁にでてくる。名前から察するに、「細かい設定いらずでデバッグできる」という意味?
+[PhpStormによるデバッグ: 基本ガイド](https://pleiades.io/help/phpstorm/debugging-with-phpstorm-ultimate-guide.html)
+公式だけでもこれだけ方法が書いてあるし、Qiitaなど個人の記事にもいろんなパターンがある。
+今回の記事で説明した設定手順がベターかどうかもわからない。
+
+#### Xdebugでテストコードを分析
+
+[Xdebugによるプロファイリング](https://pleiades.io/help/phpstorm/profiling-with-xdebug.html)
+テストコードをほぼ書いたことがないのでどんな機能かはわからない。
+
+
+[jquery-cropper](https://fengyuanchen.github.io/jquery-cropper/)で求めた座標・幅・高さの値をもとに、[Intervention Image](http://image.intervention.io/)で画像をトリミングする実装をしていて、それと同時にXdebugを使い始めました。
+`dd()`や`var_dump()`を書く必要がないので、Intervention Imageの中身や自分が書いたコードをデバッグするのがとても楽で感動しました。
+デバッグめんどうくさい...というひとは、ぜひXdebugで楽をしてほしいです。