VSCode에서 gatsby 디버깅

이번 목적

gatsby로 만든 사이트의 디버깅을 VSCode에서 실행할 수 있도록 VSCode를 설정합니다.

우선은 VSCode를 연다!

gatsby 사이트를 만드는 디렉토리에서 VSCOde를 엽니 다.

Debugger for Chrome 설치

VSCode 확장 기능 아이콘을 클릭합니다.
Debugger for Chrome을 입력하여 대상 기능을 설치합니다.

※설치 완료 후에 VSCode의 재기동이 필요할지도 모릅니다.

launch.json 만들기

실행 아이콘 클릭 → 『launch.json 파일을 작성합니다』 링크 클릭을 하면 환경의 선택이 나옵니다.
나중에 다시 쓰기 때문에 어느 것을 선택해도 문제 없습니다.

작성된 launch.json을 다음으로 다시 작성합니다.

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
      "args": ["develop"],
      "stopOnEntry": false,
      "runtimeArgs": ["--nolazy"],
      "sourceMaps": false
    },
    {
      "name": "Gatsby build",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
      "args": ["build"],
      "stopOnEntry": false,
      "runtimeArgs": ["--nolazy"],
      "sourceMaps": false
    },
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}