目錄
一、PHP程式的調試
1. 單個PHP程式的調試
2. PHP架構代碼的調試
二、JavaScript程式的調試
三、總結
參考資料：https://www.bilibili.com/video/BV1Qx411f7pF
這裡對PHP程式調試的IDE選擇的是<code>PHPStorm</code>，因為PHPStorm應該是PHP語言目前最受歡迎的代碼編輯環境，而且對各種補全以及生成PHPdoc功能的支援都非常好。
首先依次選擇 File -> Settings -> PHP （CLI Interpreter欄原本是空的）：
然後選擇自己的php.exe即可（如果沒有顯示的需要先設定php環境變量）：
選擇之後儲存确定即可。
我目前使用的php內建環境是Wampserver64（Apache+PHP+MySQL），具體版本如下：
在我的這個PHP運作環境中，就已經自帶有<code>xdebug</code>插件了，即對應的.dll檔案包含在每個php版本檔案夾中的zend_ext目錄下，如下所示（如沒有<code>xdebug</code>插件則需要先去下載下傳）：
然後我們需要打開php目錄下的php.ini，添加上如下代碼：
這裡的<code>zend_extension</code>的值為剛才xdebug.dll檔案的位址，而我這裡不是剛剛那個檔案是因為我将它複制到了ext目錄下并修改了它的命名。
然後即可編輯php檔案，然後在合适的地方打上斷點：
然後右鍵檔案選擇調試該檔案即可：
最終我們終于實作了單步調試，并且在下面的debug tab中檢視到各個變量的内容了：
這裡我所使用的PHP架構是<code>thinkphp6.x</code>，其他的架構應該也是類似的。
這裡我們需要再次修改原來的php.ini檔案，如下所示：
後面的這幾個參數在<code>PhpStorm</code>中調試單檔案也可以看到，我們把它們如上加入到php.ini檔案中即可。
此後我們再轉到PhpStorm中，選擇 File->Settings->Debug：
這裡将Debug port修改為php.ini檔案中<code>xdebug.remote_port</code>所設定的端口，最後我們隻需在php.ini檔案中再添加上一句：
這句意味着自動開啟xdebug，如果設定了這個屬性，則我們可以在任意時刻進行斷點調試，當然這也意味着運作效率有一定的降低，因為需要産生額外的調試資訊，這一點和其他語言的分别以運作模式和調試模式運作是類似的，是以這個屬性可以看情況進行關閉掉以提高性能（不需要調試時關閉即可）。
tips：修改了php.ini檔案的配置，需要重新啟動Apache等服務才可以生效，我這裡重新開機了WampServer的所有服務。
重新啟動服務後，我們輸入：<code>php think run -H '自己的虛拟域名'</code>（這是thinkphp的啟動指令）來啟動tp6項目：
然後使用浏覽器通路這個生成的url：http://api.tp6.com:8000/
可以發現彈出這個視窗：
點選accept即可，然後發現php程式停在了斷點：
終于，我們實作了對php架構代碼的單步調試，架構中使用的變量等資訊也可以檢視了，這比使用<code>var_dump</code>等列印的方式一次一調的方式強太多了！
這裡使用到的代碼調試工具為Chrome，首先先編寫一小段js程式：
然後使用浏覽器打開這個html檔案：
此時按下F12打開調試工具，選擇Sources欄：
選擇了對應的檔案後，我們可以看到剛剛編寫的js代碼，然後我們可以在對應的行号上打上斷點，如：
然後重新整理頁面，可以看到js程式停在了斷點：
此時，我們可以在右邊欄檢視變量等各種資訊：
至此我們已實作了對js程式的調試。
本文實作了對PHP程式及JavaScript程式的單步調試，雖然就PHP和JavaScript程式而言，我們大多數情況都可以使用列印大法，如：<code>console.log()</code>、<code>echo</code>、<code>var_dump()</code>來進行調試，但遇到一些棘手的問題時，單步調試可以一次性解決大部分的bug，大大縮短解決問題的時間，應該是不可缺少的重要工具，是以特地開貼記錄在PHP和JavaScript項目中這一重要工具的配置方法。