在本地調試（通過 Flywheel）：初學者指南

在網站上或什至在網站的本地安裝中出現問題可能會令人傷腦筋。 畢竟，站點性能問題或錯誤可能會導致站點停機。 站點停機可能意味著流量損失、機會錯失，甚至收入損失。

值得慶幸的是，存在許多用於識別和修復站點問題的調試解決方案。 但是你怎麼知道什麼最適合你的情況呢？

在 Local 中，有一種多管齊下的方法可用於調試。 在這裡，我們將討論 Local 包含的默認調試選項，以及識別錯誤的方法，以及可用於更快、更有效地發現和修復問題的附加插件。

什麼是本地 Xdebug？

在討論如何在 Local 中調試之前，我們需要先談談 Xdebug，Local 中的調試工具及其一些最值得注意的特性。

Xdebug 實際上是一個 PHP 擴展，它簡化了調試過程。 首先，它使var_dump ()函數的格式更清晰，並添加了更多關於特定錯誤的警告和通知。 這樣，它可以提供更直觀的用戶體驗。

如果你不知道， var_dump()是 PHP 的一個有用的部分，它可以快速揭示你的代碼有什麼問題。 但這裡的區別是，如果你手頭沒有 Xdebug，調用var_dump()時產生的代碼 會更難閱讀。 另外，即使在調用var_dump()時，您也必須以非常特殊的方式格式化您的 PHP 首先。

Xdebug 在 Local 中可用，因為它在錯誤出現時提供了更深入的信息。 它還帶有一個步進調試器，可以簡化調試過程，尤其是對於較大的問題。 步進調試器允許您在特定斷點處逐步評估您的代碼。 這使您可以在較小的部分中評估代碼並更容易地定位問題。

最好的部分是 Xdebug 默認在 Local 中啟用，因此您甚至不必弄亂任何設置即可開始使用。 只需打開本地即可。

如何在本地調試網站

您可以通過幾種關鍵方式在 Local 中調試網站。 以下是我們將要討論的主要步驟：

1. 識別瀏覽器控制台錯誤
2. 使用查詢監視器
3. 通過 Xdebug 和 VS Code
4. 使用 Xdebug 和 PhpStorm
5. 使用 Xdebug 進行分步調試

讓我們潛入。

1.識別瀏覽器控制台錯誤

調試的第一步是使用瀏覽器控制台，它是所有瀏覽器開發工具的一部分。 這使您無需任何特殊工具即可發現網頁上的錯誤。 只需啟動 Local，使用您選擇的瀏覽器訪問相關頁面，然後使用控制台發現錯誤。 以下是如何跨多個瀏覽器訪問瀏覽器控制台的細分。

如果您使用的是 Chrome……

1. 在 Chrome 瀏覽器菜單中轉到更多工具 > 開發人員工具，打開 DevTools。 或者，點擊Ctrl/Cmd+Shift+I 。
2. 單擊控制台選項卡。
3. 如果存在任何錯誤，它們現在應該是可見的。 如果沒有，請重新加載網頁以生成它們。
4. 記下錯誤的類型、位置以及瀏覽器控制台中的行號。

如果您使用的是 Firefox……

1. 在 Firefox 菜單中轉到更多工具 > Web 開發人員工具，打開瀏覽器開發人員工具。 Ctrl/Cmd+Shift+I 也適用於此。
2. 單擊控制台 標籤。 或者，您也可以通過More Tools > Browser Console直接訪問控制台。
3. 現在應該可以看到任何錯誤。 如果沒有，請重新加載頁面。

如果您使用的是 Safari……

1. 在 Safari 菜單中轉到首選項 > 高級來打開開發人員工具。 Option+Cmd+I是你的朋友。
2. 選中在菜單欄中顯示開髮菜單旁邊的框。 然後，關閉對話框。
3. 單擊開發 > 顯示錯誤控制台。 與上述相同的交易。

有了這些信息，您可以返回在本地設置的文件系統，找到導致問題的特定代碼位，然後實施修復。 使用轉到站點文件夾按鈕訪問您的本地網站的位置。

2.使用查詢監視器修復站點性能問題

您也可以直接在 WordPress 中識別和修復網站問題。 事實上，查詢監視器插件是調試和識別性能問題的絕佳選擇，特別是。 這與內置的本地調試工具相得益彰，尤其有助於發現第三方插件和主題問題。

您可以像安裝任何其他插件一樣安裝插件。 只需轉到Plugins > Add New並按名稱搜索它。 在列表中找到它並單擊立即安裝，然後在下載後激活。

查詢監視器可以告訴您什麼

安裝插件後，您應該會在 WordPress 儀表板頂部看到一個新的菜單選項。

將鼠標懸停在它上面將顯示查詢監視器工具和選項的下拉列表。 選擇其中任何一個將在底部打開一個菜單，您可以在其中了解有關當前頁面的更多詳細信息。

除其他外，查詢監視器將為您提供頁面性能的概述，包括：

• 峰值內存使用。 此工具顯示在給定時間生成頁面使用了多少內存。
• 頁面生成時間。 顯示生成頁面所需的時間。
• 數據庫查詢時間。 最後，此工具向您顯示數據庫響應主題或插件請求所需的時間。

除了性能問題，這個插件還可以識別 PHP 錯誤和通知——就像 Xdebug 一樣。 但是，它的工作重點是第三方主題和插件。 這裡方便的是，如果出現錯誤，工具中將出現一個名為PHP Errors的新選項卡，該選項卡將列出每個錯誤及其安全威脅。 它還會告訴您出現錯誤的代碼行以及特定的錯誤代碼或通知。

現在，這對於已經上線或處於後期測試階段的網站非常有用。 但是，如果您仍處於本地開發階段，那麼在 Local 中使用 Xdebug 將是您最好的選擇。

3.設置 Xdebug 和 VS Code 進行調試

回到 Local，您可以通過多種方式使用 Xdebug 來執行本地站點調試。 可以這麼說，為了獲得更多收益，您可以將 VS Code 的強大功能添加到等式中。

VS Code 是一個開源代碼編輯器，具有擴展工具和更直觀的用戶界面。 它使逐行調試過程更加直觀和容易。

您實際上可以將 VS Code 連接到 Xdebug Step Debugger 以達到很好的效果。 以下是如何設置它以在本地使用：

1. 下載 VS Code 並按照開發人員的說明進行安裝。
2. 下載並安裝 PHP 調試器擴展。 Local 的文檔建議為此任務使用 PHP 調試擴展。
3. 在 Local 中，單擊Add-ons > Xdebug + VS Code 。
4. 單擊安裝插件。
5. 完成後，點擊Enable & Relaunch 。
6. 在本地打開一個站點，然後單擊實用程序選項卡。
7. 單擊將運行配置添加到 VS 代碼。
8. VS Code 將啟動，然後您可以開始調試過程。

如果您不喜歡 VS Code，您可以使用其他編輯工具來完成該任務。

4.設置 Xdebug 和 PhpStorm 進行調試

另一種選擇是將 PhpStorm 與 Xdebug 一起使用。 您可以通過附加組件將其添加到本地，它將與 Xdebug Step Debugger 一起工作。 安裝和設置與上面為 VS Code 描述的過程非常相似。 要使用它，請執行以下步驟：

1. 下載並安裝 PhpStorm。
2. 在 Local 中，單擊Add-ons > Xdebug + PhpStorm 。
3. 單擊安裝插件。
4. 再次，完成後啟用並重新啟動。
5. 在本地打開任何站點，然後單擊實用程序 標籤。
6. 單擊將運行配置添加到 PhpStorm 。
7. 在 PhpStorm 處於活動狀態時，通過單擊您希望斷點發生的特定代碼行的間距來設置斷點。
8. 單擊“播放”開始調試過程。

如果您想在調試過程中獲得更多指導，則始終可以選擇分步調試。

5.使用Xdebug進行分步調試

Step Debugging 是一個超級有用的工具，也是 Xdebug 的一部分，它基本上可以幫助您完成調試過程。 它與 VS Code 和 PhpStorm（以及許多其他 IDE 和文本編輯器）一起使用，提供詳細但易於遵循的調試工具、步驟和協議。

在 Local 中，您無需執行任何操作來設置 Xdebug——默認情況下它會自動啟用。 如果您有一個複雜的測試環境（同時有多個系統參與），雖然有更複雜的設置說明，但我們假設您現在只需要在一個系統上執行調試，在一個本地安裝中。

要使用分步調試，您實際上需要做的就是按照前兩節中概述的步驟進行操作。 該功能適用於 VS Code 或 PhpStorm。 一切設置好後，它會自動設置斷點並一一播放代碼。 這提供了一種直觀的方式來運行代碼、查看錯誤並在出現錯誤時進行修復。

在本地輕鬆調試

如您所見，在 Local 中進行調試實際上是一個非常簡單的過程，只需最少的設置即可開始。 默認情況下，主要調試工具已經存在。 您需要做的就是設置您喜歡的文本編輯器或 IDE，配置一個或兩個插件，一切就緒。 當然，您需要執行實際的錯誤修復以使您的網站處於最佳狀態。 但至少，調試過程本身可以輕鬆執行，並且無需大驚小怪。

您首選的本地調試工具是什麼？ 我們很樂意在下面的評論中聽到您的反饋。