不多說，直接上step by step:
1.xampp配置
看看我的XAMPP版本：
修改配置文件，該打開打開，該加上加上，結果如下（當前需要重新啟動apache,配置才會生效)：
[XDebug]
zend_extension = "c:\xampp\php\ext\php_xdebug.dll"
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "c:\xampp\tmp"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = on
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "localhost"
xdebug.remote_mode = "req"
xdebug.remote_port = 9001
xdebug.trace_output_dir = "c:\xampp\tmp"
xdebug.idekey= PHPSTROM
請注意端口，有時候這個端口會沖突（比如默認的9000端口，我的機器上就沖突了），如果沖突，就修改一個，只要幾方設置保持一致就沒問題
2.chrome瀏覽器設置
進入chrome擴展程序：chrome://extensions/
點擊獲取更多擴展程序，在Google商店里面搜索：jetbrain，然后安裝JetBrains IDE Support插件！
當然這里多說一句，google的擴展商店可能中國未必能訪問，如果遇到這種情況，你有兩個選擇：一個是國內下載這個插件，自行安裝；還有就是翻牆了。本人采用的是第二個方案。（作為程序員，准備一個翻牆賬號還是不要的）
如圖所示：
安裝成功之后，會出現JB標志：
3.phostorm的設置：
File->Setting->Languages&Frameworks->php，設置好interpreter,設置如下：
如果以上沒有設置好，那么請點擊interpreter后面的...按鈕，進入設置界面，只要正確設置了PHP的目錄，和PHP.ini文件設置正確，系統會自動檢測到啟動了Xdebug的，如下圖所示：
接着設置File->Setting->Languages&Frameworks->php->servers,設置如下圖：
然后設置File->Setting->Languages&Frameworks->php->Debug，主要設置xDebug的端口，我這里是9001，要和php.ini里面設置一致，如下圖所示：
最后設置File->Setting->Languages&Frameworks->php->Debug->DBGP Proxy,ID KEY和端口要和php.ini中保持一致，如下圖所示：
4.phpstorm調試配置設置：
設置：Run->Edit configurations,點添加按鈕（加號),選擇PHP WEB Application類型，在右邊填寫相關信息，要注意Start URL應該指向你項目的瀏覽器訪問根目錄，如下圖所示：
到這里，所有設置全部完畢，下面看看如何使用：
5.開始調試
首先打開你的PHP項目，在你想要調試的程序語句最左邊單擊，設置斷點，斷點顯示為淡紅色圓點，如下圖所示：
設置完斷點之后，你就可以執行Run->Debug->localhost進行調試了。或者單擊右上角的綠色調試圖標或者按shift+F9快捷鍵也可以。
有些教程說還要先點擊右上角的電話圖標（偵聽PHP DEBUG連接），經過我實驗，其實不用點擊也是可以調試的。
點擊調試之后，會自動打開瀏覽器訪問你當前項目的根目錄，然后你在瀏覽器中進行操作，只要程序執行到斷點位置，就會在phpstorm中自動中斷，並出現調試窗口，顯示調試環境和變量，然后你可以單步跟蹤了。
打開Run菜單，就會出現各種調試命令了，這個不詳細說了。
比如我的程序運行到斷點顯示如下：
要繼續執行，值需要按F9，瀏覽器就會出現運行結果。
希望這個教程能幫到你！