在 WSL 2 中使用 PHP XDebug

sharkHead 程式技術 4個月前 • 0
"""
__  ______       _                   _____        ___         ___
\ \/ /  _ \  ___| |__  _   _  __ _  |___ /       / _ \       / _ \
 \  /| | | |/ _ \ '_ \| | | |/ _` |   |_ \      | | | |     | | | |
 /  \| |_| |  __/ |_) | |_| | (_| |  ___) |  _  | |_| |  _  | |_| |
/_/\_\____/ \___|_.__/ \__,_|\__, | |____/  (_)  \___/  (_)  \___/
                             |___/
"""

XDebug 在昨日正式發佈 3.0.0
XDebug 是身為 PHPer 必用的一個套件,可以在程式碼中設定斷點,中斷程式執行並查看程式執行的數據
但小弟是菜雞工程師,加上 Laravel 的 dd() 實在是太過好用
所以一直都還沒有很深入的去使用過 XDebug(慚愧)

// Laravel 中超級好用的除錯方法
dd();

那麼要如何在 Windows WSL 中使用 XDebug 呢?
本篇文章會閱讀前可能要先服用另一篇部落格文章,在 Windows 中安裝 WSL 2
由於小弟很習慣 Mac 的套件管理 Homebrew
所以此篇文章會以 Linux 版本的 Homebrew 來安裝 PHP 與 Xdebug

安裝 PHP

brew install php

Homebrew 安裝的 PHP,會連 PECL 與 PEAR 都一起安裝好
使用 PECL 安裝 XDebug

pecl install xdebug

安裝好之後呢,可以使用 phpinfo() 來查看是否已經裝好 XDebug

phpinfo();
xdebug.jpg
有這一個區塊就代表 XDebug 已經成功安裝

 

在 VSCode 中使用 XDebug


想要在 VSCode 中使用 XDebug,需要先安裝 PHP Debug 這個 VSCode 套件

php_debug.jpg
PHPer 必裝套件之一

還需要 php.ini 中加上以下這些設定
php.ini 的詳細路徑可以在 phpinfo() 頁面中查看

[XDebug]
; 允許使用 IDE 的互動模式檢查程式碼與數據結構
xdebug.mode = debug

; xdebug.remote_autostart 在 3.0.0 已被移除
; 設定 yes 可以在發出一個請求時就自動啟動 XDebug 並中斷程式執行 
xdebug.start_with_request = yes

更改 php.ini 之後,需要重新載入 php 或是 php-fpm

開啟需要除錯的專案,點擊左方 VSCode 的除錯功能,並建立 launch.json 檔案

vscode_debug.jpg
要使用 Debug 功能,需要先建立一個 launch.json 檔案

環境選擇 PHP

vscode_debug_php.jpg
必須先安裝 PHP Debug 套件,才會有 PHP 這個選項

此時 VSCode 會在專案底下建立一個 .vscode/launch.json
因為 XDebug 3.0.0 預設 port 改成 9003,所以 port 設定需要從預設的 9000 需要改成 9003

{
    // 使用 IntelliSense 以得知可用的屬性。
    // 暫留以檢視現有屬性的描述。
    // 如需詳細資訊,請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            // XDebug 3.0.0 預設 port 改成 9003
            "port": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            // XDebug 3.0.0 預設 port 改成 9003
            "port": 9003
        }
    ]
}

前置設定好,就可以開始使用 XDebug 的除錯功能
在你想要中斷的地方,設置中斷點
然後開始執行 Debug 功能

start_debug.jpg
在行數數字前面點一下就可以設置中斷點(紅點)

然後重新整理網頁,你會發現程式在中斷點這一行停止執行,並顯示除錯的相關資訊

debug_infomation.jpg
左方會顯示一些除錯的相關資訊

 

參考資料
Upgrading from Xdebug 2 to 3


sharkHead

PHP 與 Python 菜雞工程師
最近在努力學習 TypeScript,希望可以突破慧根的限制