[컴][웹] nextjs commerce 에 debugger 붙이기

nextjs debug / debugger/ commerce

nextjs commerce 에 debugger 붙이기

chrome dev tools

코드에 debugger keyword 를 집어넣고, chrome dev tools 를 열면, debugger 가 있는 곳에서 break 한다.

vscode debugger

이방식으로 debugger 를 attach 해도 break point 가 제대로 동작하진 않는다. 이것도 debugger keyword 를 넣어야 만 break 가 동작한다.[ref. 1]

<commerce_root>\package.json에 NODE_OPTIONS=--inspect 를 넣으면 9229 port 로 debugger 를 attach 할 수 있다.

{
  "scripts": {
    "dev": "turbo run dev",
    "dev-inspect": "set NODE_OPTIONS=--inspect&& turbo run dev",

vscode 에서는 다음과 같은 launch.json 을 사용하면 된다.[ref. 2]

{
      "type": "node",
      "request": "attach",
      "name": "Next: Node",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "port": 9229
}

주의할점

서버에서 동작하는 코드에 log를 찍으면, browser의 console 에서는 보이지 않는다. 이건 띄워놓은 서버의 log console에서 보인다.

See Also

1. 쿠…sal: [컴][웹] next.js commerce + vendure 서버 실행

Reference

1. Debugging with VS Code · Discussion #788 · vercel/commerce · GitHub