如何愉快的在PhpStorm中進行Xdebug斷點調試？

前言

• 若是你厭煩了 print_r 、 log 、 var_dump 這類一次調試一行的方式
• 若是你的業務複雜到一層又套一層，打 log 都救不了你的思路
• 若是你瞭解斷點調試，可是尚未在 PhpStorm 中配置過
• 若是你想在 前端 頁面 按菜單或按鈕 調用 API 時，斷點調試後端代碼
• 若是你想在 Postman 訪問 API 時，斷點調試後端代碼

參考文檔

如何愉快的在PhpStorm中進行Xdebug斷點調試： https://blog.csdn.net/RobotYa...
如何愉快的在PhpStorm中進行Xdebug斷點調試： https://segmentfault.com/a/11...
PHP xdebug 模塊下載： https://xdebug.org/download.php
PHP xdebug 模塊檢測和下載： https://xdebug.org/wizard.php
Xdebug helper 瀏覽器插件： https://www.crx4chrome.com/cr...
PhpStorm 本地斷點調試： https://blog.csdn.net/qq_2138...

---

PHP 安裝 Xdebug 模塊

Windows

• 這裏我用的是 Wamp3.1.0_x64，已經默認安裝了 php_xdebug
• 所以只須要在菜單的 php 拓展內將 php_xdebug 啓用便可
  
• 若是 沒有安裝 xdebug 或 phpstorm 提示 xdebug版本與php版本不符，則須要自行下載 xdebug
• 打開本地終端，執行 php -r 'phpinfo();'，複製終端輸出的全部 phpinfo 信息
• 訪問地址：https://xdebug.org/wizard.php ，粘貼 phpinfo 信息到輸入框，點擊按鈕進行分析當前 phpinfo 適配的 xdebug 版本，而後進行下載
• 檢測 phpinfo，並下載對應 xdebug 版本

• 查看 php.ini 的 xdebug 配置，確保 xdebug.remote_enable = On 啓用

  ; XDEBUG Extension
  [xdebug]
  zend_extension ="C:/Users/robot/Program/Wamp/Wamp3.1.0_64/bin/php/php5.6.31/zend_ext/php_xdebug-2.5.5-5.6-vc11-x86_64.dll"
  xdebug.remote_enable = On
  xdebug.profiler_enable = off
  xdebug.profiler_enable_trigger = off
  xdebug.profiler_output_name = cachegrind.out.%t.%p
  xdebug.profiler_output_dir ="C:/Users/robot/Program/Wamp/Wamp3.1.0_64/tmp"
  xdebug.show_local_vars=0

Linux

• 參考文檔

  • https://blog.csdn.net/u011250...
  • https://blog.csdn.net/woshiha...

• 下載 xdebug.tgz 安裝包

  • 下載地址：https://xdebug.org/files/

Ubuntu

• 參考文檔

  • https://www.cnblogs.com/jingj...

• 安裝 xdebug 模塊

  • sudo apt-get install php-xdebug

• 查看全部模塊

  • php -m

• 查找 xdebug 安裝後的擴展路徑

  • find /usr/ -name 'xdebug.so'
  • /usr/lib/php/20151012/xdebug.so

• 查找 php.ini 所在路徑

  • php -i|grep 'php.ini' 或 php -r 'phpinfo();'
  • 可能的位置 /etc/php/7.0/cli/php.ini 或 /etc/php/7.0/apache2/php.ini
• 編輯 xdebug 配置

[xdebug]
zend_extension="/usr/lib/php/20151012/xdebug.so"
xdebug.remote_enable=1
//xdebug.remote_handler=dbgp
//xdebug.remote_mode=req
//xdebug.remote_host=127.0.0.1
//xdebug.remote_port=9000

PhpStorm 配置 debug connections 服務

• 在工具欄中選擇 File -> setting

• 搜索關鍵詞 debug，選擇 Languages & Frameworks 下的 PHP -> Debug

  • 配置默認 端口 9000
  • 取消強制中斷

配置與調試

• 多種調試配置方式：本質都是在 cookie 中自動添加 XDEBUG_SESSION=PHPSTORM

  • 使用 瀏覽器 Xdebug Helper 插件設置 idekey，用 debug 啓動訪問時，而後 cookie 會自動添加 XDEBUG_SESSION

  • 使用 請求體 request 中設置 XDEBUG_SESSION_START=PHPSTORM 請求參數，而後 cookie 會自動添加 XDEBUG_SESSION

    • 在請求的 URL 後追加，如 http://localhost:500/api/TestQ/xdebug?XDEBUG_SESSION_START=PHPSTORM
    • 在請求的 body 中追加，如 request.body.XDEBUG_SESSION_START=PHPSTORM
  • 使用 PhpStorm 配置 Debug Configuration 與 Servers ，用 PhpStorm debug 啓動訪問時，URL會自動追加 XDEBUG_SESSION_START 請求參數，而後 cookie 會自動添加 XDEBUG_SESSION

---

瀏覽器 Xdebug Helper 插件方式

優缺介紹

• 優勢：

  • 無需 PhpStorm 配置 Debug Configuration 與 Servers

  • 只要配置一致的 idekey=PHPSTORM 或在 cookie 中添加 XDEBUG_SESSION=PHPSTORM

    • Xdebug Helper 配置 idekey=PHPSTORM 後，在啓用 debug 模式時，會自動在當前訪問 url 所在域名（如 localhost:500）下的 cookie 中添加 XDEBUG_SESSION=PHPSTORM
    • 前端 只須要任意頁面啓用 Xdebug Helper 的 debug 模式便可，原理如上（但要確認你的 client request 攜帶的 cookie 能夠正確到達 server request
    • Postman 只須要指定域名（如 localhost）的 cookie 中添加一次 XDEBUG_SESSION=PHPSTORM 便可
    • PhpStorm 中只需開啓 Listening Debug Connections（就是頂部路徑欄中右邊那個小電話圖標）

• 缺點：

  • 須要安裝 Xdebug Helper

安裝 Xdebug helper 插件

• 下載 Xdebug helper 插件的 crx 文件，在瀏覽器擴展程序中拖放安裝便可
• 配置插件選項，在插件上右鍵菜單選擇「選項」，配置 idekey 以下

啓用測試斷點調試

• PhpStorm

  • 在 PhpStorm 中啓動你的 小電話
  • 設置斷點
  • 瀏覽器 URL / 前端 URL（啓動 Xdebug helper 插件的 debug 模式 ）
  • 而後訪問你的調試文件 或者 API 地址

• Postman URL

  • 在指定域名（如 localhost）的 cookie 中添加一次 XDEBUG_SESSION=PHPSTORM

• 前端 node.js / express.js 等

  • 按上面的邏輯，應該是在 cookie 中添加 XDEBUG_SESSION=PHPSTORM，如 response.cookie('XDEBUG_SESSION', 'PHPSTORM');
  • 我這裏用的是 node.js + express.js 直接在 app.js 中全局注入了 XDEBUG_SESSION 的 cookie
  • 雖然瀏覽器控制檯的 Application 也顯示 XDEBUG_SESSION 的 cookie 被正確寫入
  • 而後後臺 API 卻沒有收到該 cookie，因此 PhpStorm 的 debug 也沒有生效，緣由待查……

---

請求體 request 中經過 XDEBUG_SESSION_START 請求參數 方式

優缺介紹

• 優勢：

  • 無需安裝 Xdebug Helper
  • 無需 PhpStorm 配置 Debug Configuration 與 Servers

• 缺點：

  • 須要在 request body 或 當前 URL 後追加 XDEBUG_SESSION_START=PHPSTORM 請求參數

PhpStorm 配置 debug connections 服務

• 與前文一致

啓用測試斷點調試

• PhpStorm

  • 與前文一致

• 瀏覽器 URL / 前端 URL

  • 關閉 Xdebug helper 插件，即切換到 Disable 模式；或者直接卸載
  • 在當前訪問的 URL 後追加 ?XDEBUG_SESSION_START=PHPSTORM

• Postman URL

  • 在當前訪問的 URL 後追加 ?XDEBUG_SESSION_START=PHPSTORM

• 前端 node.js / express.js 等

  • 在 request body 中追加請求參數 XDEBUG_SESSION=PHPSTORM，如 request.body.XDEBUG_SESSION_START='PHPSTORM'

---

PhpStorm 配置 Debug Configuration 與 Servers 方式

優缺介紹

• 優勢：

  • 無需安裝 Xdebug Helper
  • 無需在 request body 或 當前 URL 後追加 XDEBUG_SESSION_START=PHPSTORM 請求參數

• 缺點：

  • 須要在 PhpStorm 中配置 Debug Configuration 與 Servers
  • 配置完 PhpStorm 後，須要點擊右上角的 甲殼蟲 圖標，獲取調試用的 XDEBUG_SESSION_START=session_key

在 PhpStorm 中配置 Debug Configuration 與 Servers

• 點擊右上角，選擇 Edit Configurations
• 點擊 + 號，新增一個 PHP Web Page
• 點擊 Server 右邊的那個 ... ，先新建一個 Web 服務
• 而後點擊右上角的 甲殼蟲 圖標，獲取調試用的 XDEBUG_SESSION_START=session_key
• 複製這一對 XDEBUG_SESSION_START=12850,以後就是和《請求體 request 中經過 XDEBUG_SESSION_START 請求參數 方式》介紹的操做同樣啦，這裏再也不贅述。
• 因此網絡上的這一種調試方式相對繁瑣多餘，目前我也不知道有何意義。

---

查看斷點信息

調試快捷鍵

• F7 經過當前行，進入下一行，若是該行是方法，則進入方法體
• F8 經過當前行，進入下一行，若是該行是方法，也直接進入下一行，不進入方法體
• F9 經過整個流程，所有順序執行

要點總結

• PHP安裝Xdebug模塊，在 正確的 php.ini 下設置 xdebug.remote_enable=1或者 On
• Postman在 API 域名下的cookie中添加XDEBUG_SESSION=PHPSTORM
• PhpStorm啓動小電話，開啓偵聽