쿠...sal: [컴] vendure 서버에 debugger 를 붙이기

vendure debug / debugger / how to attach / 디버거 / vendure server how to use debugger / vendure server

vendure 서버에 debugger 를 붙이기

dev server

"dev-server:start로 테스트 서버를 띄울 수 있다. 그 command 의 내용을 보면 아래와 같다.

"dev-server:start": "cd packages/dev-server && yarn start"

그래서 여기에 --inspect를 붙여서 yarn start --inspect 로 run 하면, 화면 log에 아래처럼 보인다.

...
Debugger listening on ws://127.0.0.1:9229/179b224a-ef0b-4ee9-ae2f-2710bfac71a4
For help, see: https://nodejs.org/en/docs/inspector

# debuuger 가 붙으면 아래처럼 log가 보인다.
Debugger attached.

debugger tip

console.log를 한 경우에 콘솔 화면에 로그가 보이지 않았다. 하지만 디버거 breakpoint 는 동작했다.

vscode debugger 붙이기

1. run 이후에 attach 하기

아래처럼 pickprocess 를 통해 process 를 선택하면 attach 가 된다.

다음과 같은 process 를 찾아서 선택하면 된다.

"C:\Users\myuser\AppData\Roaming\npm\node-modules\yarn\bin\yarnjs" start --inspect"

2. 바로 debugger 로 run 하기

아래 같은 vscode launch.json 을 실행하면 된다.

{
    "command": "yarn start",
    "name": "Run yarn start",
    "request": "launch",
    "type": "node-terminal",
    "cwd": "${workspaceFolder}\\packages\\dev-server"
},

vscode launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "server-Attach by Process ID",
            "processId": "${command:PickProcess}",
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "node"
        },
        // 바로 debugger 로 실행하려면 아래처럼 하면 된다.
        {
            "command": "yarn start",
            "name": "Run yarn start",
            "request": "launch",
            "type": "node-terminal",
            "cwd": "${workspaceFolder}\\packages\\dev-server"
        },
    ]
}

쿠...sal

[컴] vendure 서버에 debugger 를 붙이기