設(shè)置斷點(diǎn)

首先，在需要調(diào)試的地方打好斷點(diǎn)

斷點(diǎn)示例

如上圖，點(diǎn)擊左側(cè)的行數(shù)，158行就可以打上斷點(diǎn)了

配置launch.json文件

1. 進(jìn)入調(diào)試窗口

點(diǎn)擊vscode左側(cè)的debug窗口，如果你之前沒有配置過launch.json文件，那么現(xiàn)實(shí)效果就會(huì)如下圖一樣。

調(diào)試窗口禪師

2. 新建launch.json配置文件

點(diǎn)擊左上方，【沒有配置】，添加配置

VSCode本身就內(nèi)置了Node.js的調(diào)試工具，如果將來(lái)你需要調(diào)試別的東西，可以在這里選擇添加對(duì)應(yīng)的調(diào)試插件工具。

添加Node.js配置

這里我們調(diào)試的是Node.js，就選擇Node.js，然后VSCode會(huì)在/.vscode目錄中新建一個(gè)launch.json文件

3. 配置launch.json文件

launch.json文件新建好后，我們需要進(jìn)行一些配置操作，這里我們選擇的是，附加到進(jìn)程。

后面我們是先啟動(dòng)egg的調(diào)試進(jìn)程，然后再將vscode附加到進(jìn)程中的。

配置VScode的Attach

這里有一個(gè)很關(guān)鍵的節(jié)點(diǎn)，program這個(gè)屬性寫的就是你需要調(diào)試的js文件，我這邊調(diào)試的是剛才打上斷點(diǎn)的文件pledges.js

選擇需要調(diào)試的js文件

4. 開啟egg的調(diào)試模式

使用iterm進(jìn)入到工程目錄，開啟調(diào)試模式

npm run dev --debug

用調(diào)試模式啟動(dòng)項(xiàng)目

在VSCode中選擇Attach to Process，并且選擇egg-cluster這個(gè)進(jìn)程。

選擇egg-cluster這個(gè)線程

等請(qǐng)求進(jìn)入到剛才打斷點(diǎn)的地方，VSCode就會(huì)自己跳轉(zhuǎn)到調(diào)試點(diǎn)啦，然后就可以盡情調(diào)試?yán)瞺

debugger中

BTW，如果你有更好，更簡(jiǎn)單的調(diào)試方式請(qǐng)告訴我...

launch.json配置文件

{
    // 使用 IntelliSense 以學(xué)習(xí)相關(guān)的 Node.js 調(diào)試屬性。
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請(qǐng)?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "processId": "${command:PickProcess}",
            "port": 5858
        },
        {
            "type": "node",
            "request": "launch",
            "name": "啟動(dòng)程序",
            "program": "/app/service/pledges.js"
        }
    ]
}