[컴] gatsbyjs debugging

gatsby / 개츠비 / 디버깅 / debug

gatsbyjs debugging

아래처럼 debugger 를 attach 할 수 있다.

Gatsby develop을 실행하고, server-side rendering(SSR) 관련 file 에 breakpoint 를 찍으면, 해당 page 가 사용될 때 break 된다.

client side rendering code 에 대한 debug

이것은 chrome debugging tool 을 사용하면 된다. 일반적인 다른 react app 을 debug 할 때 처럼 하면 된다.

server side rendering code 에 대한 debug

vscode debugger 설정

• 자동설정
  • vscode 의 setting 에 가서 ‘node debug’를 ’auto attach’ 로 설정 -실행
    • gatsby develop –> node --nolazy node_modules/.bin/gatsby develop --inspect-brk
    • gatsby build –> node --nolazy --inspect-brk node_modules/.bin/gatsby build
• 수동설정: vscode 의 launch.json을 아래처럼 설정하고, debugger를 실행한다.

windows launch.json :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "windows": {
        "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
      },
      "args": ["develop"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "windows": {
        "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
      },
      "args": ["build"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    }
  ]
}

References

1. Debugging the Build Process | Gatsby