Xdebug 如何幫助您成為更好的 WordPress 開發人員

正如任何開發人員都可以證明的那樣，在初稿之後，代碼永遠無法投入生產。 開發過程的一個關鍵部分是調試——刪除或更改代碼中所有不起作用的部分。

PHP 的 Xdebug 擴展是根除和消除代碼中所有錯誤的流行方法。

Xdebug 的一大優點是它的靈活性。 無論您首選的框架或開發環境如何，您都可以找到適合您工作流程的 Xdebug 版本。 從那裡開始，掌握該工具不會花費很長時間。

本教程將深入探討 Xdebug，包括安裝過程、將其集成到您的設置中以及一般用法。

首先，讓我們為您提供有關 Xdebug 是什麼以及它的作用的更多背景信息。

介紹 Xdebug

Xdebug 是調試 PHP 代碼的最流行的擴展之一。 您將從您選擇的環境中安裝它，它充當“步進調試器”。

簡而言之，這使您能夠逐行處理代碼，以便您可以逐步了解代碼在程序中的行為和交互方式，以及調查其輸出。 從那裡，您可以根據需要進行更改。

不過，Xdebug 可以做的更多：

• 您可以使用一組指標和可視化來分析代碼的性能。
• 當您運行 PHP 單元測試時，您可以查看您運行和執行的代碼套件。
• Xdebug 包含“跟踪”功能，它將每個函數調用寫入磁盤。 這將包括參數、變量賦值和返回值。
• Xdebug 還改進了標準的 PHP 錯誤報告。 稍後我們將對此進行更多介紹。

鑑於功能集，有很多方法可以在您的工作流程中使用 Xdebug（和任何類似的調試器）。 我們將在下一節中介紹這些內容。

為什麼要使用 Xdebug

許多開發人員沒有使用第三方工具和擴展的專用調試工作流程。 這是因為 PHP 包含自己的基本錯誤日誌記錄。 您將使用諸如error_log 、 var_dump和 print 之類的命令來查看變量和函數調用的結果。

例如，您可以將許多片段重新用於 WordPress 開發——Stack Overflow 中充斥著它們：

 function log_me($message) { if ( WP_DEBUG === true ) { if ( is_array($message) || is_object($message) ) { error_log( print_r($message, true) ); } else { error_log( $message ); } } }

但是，這種方法有一些重要的缺點：

• 您首先必須確保為您正在使用的平台啟用錯誤日誌。 在這種情況下，您需要啟用WP_DEBUG （稍後會詳細介紹）。
• 這個“轉儲”調試示例提供的調查範圍比單步調試要小。 在這裡，您只能輸出您定義的任何內容。

後一點需要大量的手動工作，特別是如果您的日常工作不是系統管理員。 例如，如果你想調試一個代碼塊，你可以根據你定義的變量添加你的代碼片段。 但是，它可能不是問題的根源，甚至可能不是正在發生的事情。

相反，像 Xdebug 這樣的工具可以發揮它的魔力來提供更大的範圍：

• 您可以在執行期間的不同時間點“破壞”您的代碼，以實時查看發生了什麼。
• 有無數的指標、可視化、分支等等來幫助你確定你的代碼在做什麼以及它是如何響應的。
• 有時，您甚至可以在調試過程中動態更改值。 這提供了巨大的價值，即使對於運行良好的代碼套件也是如此。 您基本上可以在任何時候進行手動單元測試。
• 因為您使用斷點來標記要調試的區域，所以您不需要在代碼中使用片段。 這使您的代碼更乾淨，並減少了未來問題的數量。

總體而言，使用 Xdebug 等工具是一種主動決策，而不是被動決策。 您可以將分步調試用作核心開發過程的一部分，就像將單元測試作為測試驅動開發 (TDD) 的一部分一樣。

如何打開 PHP 錯誤日誌

雖然您可以在沒有特定錯誤的情況下調試代碼，但在沒有打開 Xdebug 的情況下知道是否出現問題通常是件好事。 這為您提供了探索的起點。 這不是絕對必要的，但可以成為您鏈條中有用的一部分。

要報告出現的每個錯誤，您需要在相關 PHP 文件的頂部添加一行：

 error_reporting(E_ALL);

這是一個包羅萬象的命令，您可以使用ini_set函數實現相同的目的：

 ini_set('error_reporting', E_ALL);

這使您可以逐個項目地更改php.ini文件中的設置。 雖然您可以進入此文件並進行手動更改，但使用ini_set更改特定參數通常是一個更好的主意：

 ini_set('display_errors', '1');

一旦您根據自己的喜好設置了活動錯誤報告，您就可以開始使用 Xdebug。

如何使用 Xdebug

在接下來的幾節中，我們將向您展示如何使用 Xdebug，包括進行設置所需的步驟。 雖然我們無法涵蓋工具的所有方面，但本快速入門指南將幫助您快速入門。

不過，首先，您需要安裝 Xdebug。 讓我們來看看如何去做。

1. 為您的操作系統 (OS) 安裝 Xdebug

因為 Xdebug 可以適應任意數量的設置，所以每個設置的確切過程都會略有不同。 在操作系統級別，有一些區別：

• Windows：這是一個有點複雜的設置過程，涉及使用現有的 PHP 文件和安裝嚮導，然後為您的系統下載正確的版本。
• Linux：這裡的方法可以說是最直接的：您可以使用包管理器來安裝 Xdebug，或 PHP 擴展社區庫 (PECL)。
• Mac：此方法也很簡單：安裝 PECL 後，您可以從終端實例運行pecl install xdebug 。 您還需要在系統上安裝 XCode 命令行工具和 PHP。

但是，大多數用戶不想堅持使用 Xdebug 的系統級實例。 相反，您需要將其集成到您自己的開發環境中。

2. 將 Xdebug 集成到您的開發環境中

一旦你為你的操作系統安裝了 Xdebug，你應該將它連接到你的環境。

這裡有太多受支持的系統和工具，我們無法一一介紹。 稍後，我們將為您提供 DevKinsta 和 PhpStorm 的說明。 即便如此，還有許多其他流行的環境可供選擇。 以下是我們的一些重要建議。

不同的流浪流浪者（VVV）

VVV 是 Make WordPress 網站上的命名環境之一：

好消息是 VVV 已經包含一個 Xdebug 版本，但您需要激活它。 您可以在終端窗口中使用 Secure Shell (SSH) 執行此操作：

 vagrant ssh -c "switch_php_debugmod xdebug"

但是，性能會受到一點影響，如果您配置站點，則需要重新打開此選項。

Laravel 代客

對於一些用戶來說，Laravel 的 Valet 代表了一個近乎完美的 Web 開發環境。 更好的是，您可以將 Xdebug 與其集成。

為此，您需要為調試器創建一個配置文件。 您可以在命令行中使用php --ini找到自己的路徑，這將返回幾個不同的文件路徑：

接下來，在其他.ini文件的路徑中創建一個新的xdebug.ini文件。 在我們的示例中，它位於/opt/homebrew/etc/php/7.4/conf.d 。

打開這個新文件後，還要打開加載的配置文件（您的主php.ini文件）的路徑。 兩者都打開，將以下內容添加到底部：

• php.ini: zend_extension="xdebug.so"
• xdebug.ini: xdebug.mode=debug

保存更改後，從終端運行valet restart ，然後添加phpinfo(); exit; phpinfo(); exit; 到您網站的文件之一。 您需要通過瀏覽器中的快速頁面加載來檢查這是否有效。

請注意，您可能需要使用sudo brew services restart php ，並使用php --info | grep xdebug檢查您的 Xdebug 系統安裝是否正確。 php --info | grep xdebug 。 您會注意到輸出中特定於 Xdebug 的行：

從這裡，您可以將 Xdebug 合併到您選擇的編碼編輯器中。

XAMPP

就像 Valet 一樣，XAMPP 的流程也有幾個部分。 但是，Windows 和 macOS 版本有兩個不同的進程。

首先安裝 XAMPP，然後快速檢查系統上是否存在php_xdebug.dll文件 (Windows) 或xdebug.so文件 (macOS)：

如果文件存在，您可以繼續進行配置。 否則，您首先需要下載適用於 Windows 的正確二進製文件（您首選 PHP 版本的 64 位文件），或者如果您使用的是 Mac，則需要安裝更多依賴項。

對於 Windows，重命名 DLL 文件php_xdebug.dll ，然後將其移動到\xampp\php\ext文件路徑。 接下來，在您喜歡的代碼編輯器中打開\xampp\php\php.ini文件並添加以下內容：

 output_buffering = Off

在[XDebug]部分，添加以下三行：

 zend_extension=xdebug xdebug.mode=debug xdebug.start_with_request=trigger

保存更改後，重新啟動 Apache 並測試 Xdebug。

對於 Mac，您需要確保在終端實例上使用xcode-select --install安裝 Xcode 命令行工具。 之後，您需要使用 Homebrew 安裝三個軟件包：

 brew install autoconf automake libtool

在某些情況下，您還需要重新安裝 XAMPP 以獲取核心程序和“開發人員文件”。 您應該只能重新安裝這些文件，但您需要先對現有設置進行備份。

接下來，導航到系統上 Xdebug 源文件夾的下載並解壓縮 TGZ 文件。 在終端窗口中，導航到該目錄並運行以下命令：

 phpize pecl install xdebug

請注意，您可能也需要在此處使用sudo 。 從這裡，您可以編輯 XAMPP php.ini 文件。 對於大多數 macOS 安裝，您可以在/Applications/XAMPP/xamppfiles/etc/php.ini中找到它。 在此目錄中，您還可以找到xdebug.so文件的路徑——記下這一點，並使用它代替此代碼段的文件路徑佔位符：

 [xdebug] zend_extension=/path/to/xdebug.so xdebug.mode=develop,degug xdebug.start_with_request=yes

要測試這是否有效，請在主htdocs XAMPP 目錄中創建一個新的xdebug_info.php文件。 在裡面，添加以下內容：

 <?php xdebug_info();

…然後刷新 Apache 並在瀏覽器中測試 Xdebug。

將 PhpStorm 與 Xdebug 一起使用

通過操作系統和開發環境安裝 Xdebug 後，您還需要查看調試器本身。 您將通過您選擇的代碼編輯器或集成開發環境 (IDE) 來完成此操作。 與您的環境一樣，有很多可供選擇，並且每個可能有不同的方法。

也就是說，許多開發人員選擇使用 JetBrains 的 PhpStorm。 事實上，PhpStorm 提供了“支持 WordPress 的幫助”——由於許多其他原因，它也是一個受歡迎的選擇。

JetBrains 網站包含有關連接 Xdebug 和 PhpStorm 的完整說明，但我們將在此處查看它們。

首先，導航到Preferences窗格中的Languages & Frameworks > PHP頁面。 在這裡，打開CLI Interpreter下拉字段旁邊的More Items kebab 菜單：

這將顯示有關您的 PHP 版本和解釋器的更多詳細信息。 如果單擊配置文件選項旁邊的更多項目省略號，您將看到php.ini文件的完整路徑：

接下來您將使用此 PHP 文件繼續設置過程。

在 php.ini 文件中工作

這裡的第一個任務是編輯掉任何影響 Xdebug 如何與 PhpStorm 一起工作的行。

在php.ini文件中，查找以下行並刪除它們或將它們註釋掉：

 zend_extension=<path_to_zend_debugger> zend_extension=<path_to_zend_optimizer>

這些線條並非在所有情況下都存在，因此如果您沒有看到它們，請不要驚慌。

接下來，將以下內容添加到文件中：

 [xdebug] zend_extension="xdebug.so" xdebug.mode=debug xdebug.client_host=127.0.0.1 xdebug.client_port="<the port (9003 by default) to which Xdebug connects>"

關於這套代碼有幾點需要注意：

• 您可能已經有一個[xdebug]部分，在這種情況下您可以省略第一個指定。
• zend_extension條目可能需要您添加xdebug.so的完整路徑才能連接。
• 雖然它可能看起來像一個佔位符，但xdebug.client_port參數是您在代碼中設置它的方式。

添加這些後，保存並關閉文件，然後從命令行測試 PHP 版本（使用php --version ）：

如果您有 Xdebug 的工作版本，它將顯示為 PHP 擴展之一。 您還可以添加phpinfo(); 到一個新文件並在瀏覽器中測試它。

這就是讓 Xdebug 作為 PhpStorm 的默認調試器工作所需要做的所有事情。 使用它之前的最後一步是安裝瀏覽器幫助程序擴展。

安裝瀏覽器助手擴展

您需要建立的最後一個關鍵連接是在您的瀏覽器和 PhpStorm 之間，通過在服務器上激活分步調試來完成。 雖然您可以使用特殊的GET或POST值從命令行執行此操作，但使用擴展更直接。

我們建議使用專用的 Xdebug Helper 擴展。 您可以將其安裝在您選擇的瀏覽器上：

• Chrome/Chromium/Brave 的 Xdebug 助手
• Firefox 的 Xdebug 助手
• Safari 的 Xdebug 助手

如果您想探索其他擴展，JetBrains 網站為最流行的瀏覽器提供了一些附加選項。

一旦您安裝了您選擇的瀏覽器擴展程序，您就不必調整任何進一步的配置設置。 從這裡，您可以開始使用帶有 PhpStorm 的 Xdebug。

使用 Xdebug

雖然我們將在這裡使用 PhpStorm，但您會看到不同 IDE 之間的佈局和界面相似——儘管也會有一些明顯的差異。

有幾個概念結合起來形成了整個調試體驗：

• 斷點：這些是 Xdebug 將停止讓您檢查輸出的點。 您可以根據需要設置任意數量的這些。
• 監聽連接：您可以打開和關閉此功能，但大多數開發人員將始終保持打開狀態。
• 調試屏幕：您的大部分時間將花在調試界面上——您將在其中處理各種代碼行、變量和參數。

第一步是激活監聽——沒有它你將無法調試任何東西。 為此，請單擊工具欄中的Run > Start Listening for PHP Debug Connections選項：

作為替代方案，您可以單擊 PhpStorm 工具欄中的“電話”圖標：

這些選項中的任何一個都將開始偵聽連接。

從這裡，您可以開始在代碼編輯器的排水溝中設置斷點。 紅點表示一個斷點，可以點擊激活：

當您想要調試代碼時，最直接的方法是開始監聽，設置斷點，然後前往瀏覽器中的特定頁面。 在瀏覽器中找到擴展程序的圖標，然後單擊它並選擇“調試”選項：

這將在 PhpStorm 中打開調試器並傳遞好消息或壞消息：

如果您右鍵單擊各種值、屬性、參數和變量，您將能夠訪問進一步的上下文菜單。 這為您提供了足夠的額外空間來測試和調試代碼：

例如，您可以為路徑上的變量設置不同的值。 這可能是故意嘗試破壞您的代碼並查看會發生什麼，或者它可能是一種測試已經需要修復的代碼的方法。 無論哪種方式，這都為您提供了一種無需先更改代碼即可調試代碼的絕妙方法。

Kinsta 如何幫助您調試 WordPress 網站

WordPress 通過WP_DEBUG和其他工具（例如查詢監視器）提供了自己的一組調試選項。 這些啟用了一種模式，您將開始在整個站點和儀表板上看到以前隱藏的錯誤消息。 從那裡，您可以開始找出問題所在。

您還可以使用WP_DEBUG_LOG保存這些錯誤消息，這為您提供了一種記錄站點問題的方法。 我們在博客的另一篇文章中介紹瞭如何設置它。 通過您的 MyKinsta 儀表板（和站點 > 工具屏幕）輕鬆設置：

如果您將此與免費的 DevKinsta 本地環境工具配對，您還可以通過一鍵式方式為您啟動的每個站點啟用和禁用WP_DEBUG ：

這意味著您可以在開發過程中捕獲站點上的錯誤，並確保它們不會進入您的實時站點。 這些模式也很容易關閉——對站點和用戶安全都至關重要。

所有 Kinsta 計劃還附帶內置的 Kinsta APM 工具，這是我們為 WordPress 網站定制設計的性能監控工具。

命令備忘單

在結束這篇文章之前，我們應該提到快捷方式。

像許多其他軟件一樣，有多種方法可以單獨使用鍵盤來瀏覽 Xdebug（和 PhpStorm）。 事實上，您甚至可以使用命令行來調試 PHP 腳本。

一旦 Xdebug 啟動並運行，您可以使用以下命令來繞過：

雖然您的特定代碼編輯器將有自己的專用快捷方式，但這裡的重點是 PhpStorm。 看一下將 Xdebug 與 PhpStorm 結合使用的鍵盤快捷鍵表：

謝天謝地，這裡沒有太多要記住的東西。 您必須打開調試器、每行設置斷點、偵聽連接並運行腳本。

但是，如果您需要特定任務的快捷方式，可以使用 PhpStorm Find Action命令：

一旦您開始在此空間中輸入，您將看到命令和相關快捷方式的動態列表。 您還可以通過幫助 > 鍵盤快捷鍵 PDF菜單找到所有鍵盤快捷鍵的 PDF 版本。

如果您想在使用鼠標時更多地實時查看快捷方式，JetBrains 提供了 Key Promoter X 插件：

這個方便的工具將顯示您最近執行的操作的通知，以及相關的鍵盤快捷鍵。 學習並使用快捷方式後，您可以逐步淘汰此插件並將寶貴的空間恢復到您的屏幕上。

概括

調試實踐從卑微的開始已經走過了漫長的道路。 它現在涵蓋的範圍比其祖先可能想像的要廣泛得多。 要在修復 PHP 代碼時進行徹底的工作，您需要使用一個稱職的工具。 有許多出色的擴展和工具可供選擇，但 Xdebug 是一個有爭議的領先者。

正如我們所見，Xdebug 甚至可以適應代碼編輯器中最不拘一格的口味，與 PhpStorm 搭配使用時尤其出色。 但是，無論您的設置如何，通常都會有一個 Xdebug 版本來滿足您的需求。 總的來說，它是一個功能強大、靈活且直觀的工具。

你認為 Xdebug 值得它的高度讚揚，還是有其他你更喜歡的調試工具？ 在下面的評論部分讓我們知道！