PhpStorm + Homestead + Xdebug

雖然 PHP 開發常使用 dd 除錯大法
不過當問題比較複雜的時候，還是會需要 Xdebug 來協助

不過每次設定  Xdebug 都大費周章，還不一定成功
後來體悟到因為不了解運作的流程，設定起來都會漏東漏西的

所以這篇文章先簡單講一下 Browser、 Xdebug 與 PhpStorm 是怎麼溝通的
有個概念後，再講如何設定

本篇作者的作業系統是使用 Windows 10 ，虛擬機是使用 VirtualBox

Browser、 Xdebug 與 PhpStorm 溝通過程

上圖的 1 那邊，是一般瀏覽網頁會產生的，如果加上特製的參數去觸發 Xdebug 的話(通常是利用 Extension 達成)，會再產生 2 的連線

由於是 php-fpm 主動往外送，所以要設定目標的 IP 與 Port，而 PhpStorm 也要開啟接收資料 Server (也就是上圖的 PHP Debug Server)

Xdebug

首先，先啟用 php-fpm 上的 Xdebug

(註：這邊假設使用 Homestead 裡最新的 PHP 版本)

sudo phpenmod xdebug

接下來設定 xdebug.remote_host ，告訴 php-fpm 要送資料到 PhpStrom 的 PHP Debug Server

sudo vim /etc/php/7.3/fpm/conf.d/20-xdebug.ini

zend_extension=xdebug.so
xdebug.remote_enable = 1

xdebug.remote_connect_back = 1

xdebug.remote_host = 10.0.2.2

xdebug.remote_port = 9000

xdebug.max_nesting_level = 512

紅字的部分是這次額外加的，IP 的部分可以填 Windows 的 IP

或是在 PHP 中抓 Client 的 IP 來填

設定完成後，重啟 php-fpm

sudo systemctl restart php7.3-fpm 

PhpStorm

接下來設定 PhpStorm

這一步是要讓 PhpStorm 要怎麼處理來自 php-fpm 的 debug 資訊

在上圖中新增一個 Server

紅色框框填上 Host 和 Port

Host 填當初在 Homestead.yaml 中 sites > map 的值

Port 請填 80

接著藍色框框那邊告訴 PhpStorm 檔案的對應

因為 php-fpm 是在 Ubuntu 的作業系統下執行，PhpStrom 不曉得實際上是 Windows 的哪一個檔案，基本上請參考 Homestead.yaml 的 folders 設定

Browser

接下來要在 Browser 裝 Extension，讓送出去的 request 可以觸發 Xdebug

各家 Browser 對應的 Extension可以參考下列網址：

https://www.jetbrains.com/help/phpstorm/browser-debugging-extensions.html

開始Debug

首先先啟用 PhpStorm 的 Debug server

在你想要程式暫停的地方設定中斷點 (在行號右邊空白處左鍵點一下)

到你要 Debug 的網頁，啟用 Extension 的 Debug 按鈕
接著按下 F5 重新整理

回到 Phpstrom，可以看到程式停在剛剛設定中斷點的地方

補上軟體版本
Homestead v8.3.2
laravel/homestead box 7.2.1

參考資料

https://laravel.com/docs/5.8/homestead#debugging-and-profiling