有時候想分析一個開源專案的程式碼，或者接手了別人的程式碼，想了解專案程式碼架構，如果能夠在 IDE 中跟蹤程式執行軌跡也許可以讓你事半功倍。 PhpStorm 提供了強大的除錯功能，這篇教程會教大家如何安裝配置 xdebug，最終實現能夠在瀏覽器實際執行程式時在斷點處直接跳回 PhpStorm 進行除錯。

1. 看完這篇教程你能學會什麼？

• 學會安裝配置 Xdebug
• 能夠在瀏覽器執行實際程式碼時，在斷點處跳回 PhpStorm 進行除錯

2. 約定

下面的教程中 ：
1. {PHP_INSTALL_DIR} 指代 PHP 安裝目錄的絕對路徑
2. {EXTENSION_NAME} 指代要安裝的副檔名
3. 如果在命令列下執行 php -v

3. Xdebug 安裝配置

3.1 安裝

3.1.1 windows 下安裝

我們通過直接下載二進位制擴充套件檔案的方式來安裝， 下載地址 https://xdebug.org/download.php
開啟這個地址可以看到多個版本的 xdebug 可以選擇，我們一般選最新 relese 版的就好。
每個版本下還提供了source 原始碼和多個windows下的二進位制包，如圖：

選哪個二進位制包需要要根據自己本地安裝的PHP 版本、作業系統位數、VC 版本及是否執行緒安全的來選擇，這些資訊可以通過執行 phpinfo(); 函式來查到， 例如我的測試機上執行 phpinfo();顯示的資訊如下：

所以我要選擇的擴充套件包是 PHP 7.0 VC14 (32 bit)

包名中 TS 就是執行緒安全， 沒帶就是 NTS非執行緒安全
32bit 就是 x86架構 ，64bit 就是 x64架構

然後修改 php.ini 檔案，再後面加上 :

[XDebug]
zend_extension = "下載到的擴充套件檔案的位置（是一個 dll 檔案）"

3.1.2 Linux

下載原始碼編譯安裝就好:

    wget -c https://xdebug.org/files/xdebug-2.5.5.tgz
    tar xvzf xdebug-2.5.5.tgz
    cd xdebug-2.5.5
    phpize
    ./configure --with-php-config={PHP_INSTALL_DIR}/bin/php-config
    make && make install

3.1.3 Mac os

brew install php71-xdebug

3.2 配置

下面主要講配置：
開啟 php.ini，如果已經有了 xdebug的配置，就修改成下面這樣，如果沒有則新加：

[xdebug]
zend_extension="/usr/local/opt/php71-xdebug/xdebug.so"
xdebug.remote_enable=1
xdebug.idekey='PHPSTORM' 
xdebug.remote_host=localhost
xdebug.remote_port=9008

• zend_extension對應是 xdebug 擴充套件的路徑，根據你的實際情況來修改。
• xdebug.remote_host** 是xdebug 遠端除錯時要連線的主機地址，我們用本機開發所以填“localhost”就可以了，假如你的開發環境是在遠端的比如，在vagrant 的虛機裡，你需要能讓 Vagrant 虛擬機器中的 Xdebug 連線上你本地，地址也許是填 “192.168.33.1”(注意這塊，很容易被誤導)**
• xdebug.remote_port 是 xebug 遠端除錯時要連線的埠號，我們使用 phpstrom 來除錯，當 PHPSTROM 開啟除錯時，會啟動一個埠號這個 xdebug 會連線到這個埠上
• 其他兩項照抄就好。

修改 php.ini 後，別忘了重啟 php。

4. 配置PhpStorm

我專門建立了一個專案以方便做演示，它本地的訪問地址是 http://demo.dev。用 Phpstorm 開啟這個專案。

首先開啟 “Preference -> Languages & Frameworks -> PHP -> Debug” ，埠改成 “9008”
!!!注意, 這個埠號就是跟 xdebug 配置裡設定的xdebug.remote_port 一致的，當PHPSTROM開啟除錯時，會開啟這個埠， xdebug就會連線上來

點選 “Apply”， 再點選 “ok” 儲存。

然後開啟 “Run -> Web Server Debug Validation”, 選擇 “Remote Web Server”，
現在還沒有“Deployment server”，點右側的 “…”, 新增一個：

給 Server 起一個名字 “demo”， 型別選擇 “in place”：

“in place”的意思是我們的專案程式碼並不在遠端伺服器上，而是在我們本地的一個目錄安裝的， 只不過我們通過本地的域名可以訪問

新增好後，如圖：

把 “Web server root URL” 填上你的專案的訪問地址，然後點視窗下方的”ok” 按鈕，回到上一個視窗中， 點選 “Validate” 檢測 xdebug 是否配置成功，沒有錯誤，表示配置成功了

關閉此視窗即可。

然後，我們最終目的是要在 PHPstorm 中設定斷點，然後在瀏覽器中執行程式時，到斷點處可以跳回到 Phpstorm 中除錯，基於 chrome 瀏覽器，我們需要去chrome 商店下載一個 Xdebug helper 外掛,

無法翻牆的同學可以點這裡下載，xdebug ,並手動安裝，不會手動安裝，請參考這篇教程中有提到 手動安裝chrome外掛

新增好此外掛後，在我們外掛欄上就多了一個蟲子一樣的圖片，預設是灰色的，我們先右鍵點選它，選 “options”，開啟配置介面

配置好 IDE_KEY 點 “save”

5. 開始除錯！

回到 phpstorm 中， 在右上角有一個電話一樣的圖示，預設是：

點選一次將其點為綠色：

！！！注意，以上操作後，phpstorm 就開啟除錯了，我們設定的 9008 埠也就啟動了，xdebug 就能連上來了！

在程式碼中設定一個斷點:

回到 chrome 瀏覽器，開啟我們的專案地址“ http://demo.dev/”, 點選剛剛安裝的瀏覽器外掛的那個蟲子按鈕，選擇 debug，蟲子就變成綠色了：

如果配置一切無誤的話，重新整理當前頁面，瀏覽器將會彈出，程式會暫停在你設定斷點的那一行上：

至此這篇教程就結束了，至於Phpstorm 中更多 debug 程式碼的技巧就自己慢慢探索吧！