十一月 7, 2018 | 前端與Vue

網頁開發環境一次搞定之在VScode裡搭配MAMP使用XDbug

有時候不管放多少console.log都沒辦法看到想要的東西,也沒辦法知道程式到底是有沒有執行… 這個時候就交給XDebug吧!

有時候不管放多少console.log都沒辦法看到想要的東西,也沒辦法知道程式到底是有沒有執行… 這個時候就交給XDebug吧!

XDebug可以在程式碼中設置中斷點讓我們能一步步監控程式的動向!快速找到出問題的地方!

安裝與設置

先安裝好XDbug的套件

確認使用的php版本

應用程式 > mamp > bin > php > 找到我們使用的php版本的那個資料夾 > conf > php.ini

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.1.12/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so"

zend_extensio寫東西通常在php.ini的最下面就能看到了,只要把註解打開然後接著加上

xdebug.remote_enable = 1
xdebug.remote_autostart = 1

以上設置完成之後記得重新啟動MAMP!

操作與使用

接下來就可以透過VScode打開偵錯介面(就是這隻蟲蟲!

選好之後會自動生成一個launch.json的檔案,而偵錯旁邊的組態也會跟著變化

接下來只要把想要特別關注的地方加上中斷點! 增加的方式很簡單,只要把滑鼠移動到想要增加的那行數字的前面就會出現一個紅燈的圖案 點一下讓紅燈亮起來就能看到左邊的中斷點的畫面出現剛剛增加上去的檔案名稱跟行數

按下偵錯右邊的播放鍵之後在設定中斷點頁面重新刷新就可以開始進行偵錯囉!

參考文章:https://code.visualstudio.com/docs/editor/debugging#_launch-configurations

hashtags: