(本章使用WebStorm調(diào)試node項(xiàng)目中的Ts代碼)
調(diào)試
程序調(diào)試，就是在程序中設(shè)置斷點(diǎn)，讓程序在運(yùn)行時(shí)，在斷點(diǎn)處能夠停下來，檢查相關(guān)變量和表達(dá)式的值，以判斷邏輯上出錯(cuò)的位置，并能夠進(jìn)行程序跟蹤，尋找邏輯上出錯(cuò)的位置，并加以改正。
優(yōu)點(diǎn)
- 可以看到代碼的運(yùn)行順序是否和預(yù)期一致
- 可以在運(yùn)行的同時(shí)看到每一步的結(jié)果
步驟
1.啟動(dòng)Debug
1）、右鍵文件的空白處(此種適用于單個(gè)文件的運(yùn)行調(diào)試)
一.jpg
2）、點(diǎn)擊右上方綠色的小烏龜(此種適用于整個(gè)項(xiàng)目的調(diào)試運(yùn)行，前提是需要配置啟動(dòng)文件和啟動(dòng)命令)
二
2.設(shè)置啟動(dòng)文件和啟動(dòng)命令
在WebStorm右上角找到這個(gè)下拉框點(diǎn)擊
添加配置
進(jìn)入該頁面后點(diǎn)擊"+"號(hào)可以自己選擇創(chuàng)建對(duì)應(yīng)的項(xiàng)目配置
選擇對(duì)應(yīng)的項(xiàng)目進(jìn)行配置
再之后把項(xiàng)目啟動(dòng)文件路徑和啟動(dòng)命令(根據(jù)自己項(xiàng)目而定)寫入對(duì)應(yīng)的配置行即可保存退出
寫入啟動(dòng)命令
這時(shí)可以看到右上角變成了剛才配置的文件，并且后面的運(yùn)行按鈕和Debug按鈕變成綠色可點(diǎn)擊，點(diǎn)擊運(yùn)行即可啟動(dòng)項(xiàng)目，但Debug需要進(jìn)一步設(shè)置才能看到效果。
6BC62C692DFF8A1A4461C38899F0A0F1.jpg
3.斷點(diǎn)
顧名思義就是在代碼某一處打上了斷點(diǎn)，當(dāng)程序跑到你設(shè)置的斷點(diǎn)位置處，則會(huì)中斷下來，此時(shí)你可以看到之前運(yùn)行過的所有程序變量。
斷點(diǎn)
只需要在文件的左側(cè)行數(shù)位置左鍵點(diǎn)擊一下出現(xiàn)如圖的紅點(diǎn)即可，再次點(diǎn)擊取消
4.啟動(dòng)
如果是單個(gè)文件的運(yùn)行，啟動(dòng)后會(huì)在斷點(diǎn)處卡住。如果是啟動(dòng)項(xiàng)目，則需要訪問對(duì)應(yīng)的路由接口才能觸發(fā)斷點(diǎn)。
觸發(fā)
圖中藍(lán)色行是觸發(fā)端點(diǎn)行，此時(shí)程序會(huì)停留在此處，并且可以在對(duì)應(yīng)的行末或者控制臺(tái)看到之前的全部變量。
5.繼續(xù)執(zhí)行
首先是側(cè)邊功能按鈕：
功能按鈕
其次是重要的頂部功能按鈕：
頂部功能按鈕
- Step Over：在單步執(zhí)行時(shí)，在函數(shù)內(nèi)遇到子函數(shù)時(shí)不會(huì)進(jìn)入子函數(shù)內(nèi)單步執(zhí)行，而是將子函數(shù)整個(gè)執(zhí)行完再停止，也就是把子函數(shù)整個(gè)作為一步。有一點(diǎn)，經(jīng)過我們簡單的調(diào)試，在不存在子函數(shù)的情況下是和Step Into效果一樣的（簡而言之，越過子函數(shù)，但子函數(shù)會(huì)執(zhí)行）。
- Smart Step Into：進(jìn)入自己編寫的函數(shù)，不進(jìn)入系統(tǒng)函數(shù)，很少用到。
- Step Into：單步執(zhí)行，遇到子函數(shù)就進(jìn)入并且繼續(xù)單步執(zhí)行（簡而言之，進(jìn)入子函數(shù)）。
- Force Step Into：強(qiáng)制進(jìn)入，在調(diào)試的時(shí)候能進(jìn)入任何方法。
- Step Out：當(dāng)單步執(zhí)行到子函數(shù)內(nèi)時(shí)，用Step Out就可以執(zhí)行完子函數(shù)余下部分，并返回到上一層函數(shù)。
- Run to Cursor：回到光標(biāo)處，用在循環(huán)內(nèi)部時(shí)，點(diǎn)擊一次就執(zhí)行一個(gè)循環(huán)。
6.控制臺(tái)
Console
Debugger Console 里面可以用來輸出一些變量進(jìn)行下一步操作。
