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