준비 6. 자바스크립트 디버깅 | 시나브로 자바스크립트 영상에서 우린 왜 console.log() 무덤에 살고 있고, 디버거가 있는데 왜 잘 사용하지 못해왔는지에 대해 설명했는데요.
설명을 조금 보강하려 합니다. 우리가 VSCode 내에서 breakpoint 를 잡으려면 별도의 세팅이 필요하다고 영상에서 말씀드렸는데요.
예를 들어, node abc.js 와 같은 명령을 실행할 때, --inspect 라는 파라메터를 붙여서 node --inspect abc.js 와 같이 실행하면, 디버깅을 할 수 있도록 별도의 포트를 열어주거든요. 그러면 그 포트를 통해 node 프로세스에게 디버깅 관련해서 통신할 수 있게 되는거죠. “여기 breakpoint 잡아줘. 지금 breakpoint 에 걸려있는데, 이 변수의 값은 뭐야?” 이런 것들.
그래서 이 영상에서 vite dev 를 실행해서 개발을 하고 있었지만, 여기에도 마찬가지로 --inspect 파라메터를 넘겨줘야 하는 상황이에요. 사실 vite dev 는 node node_modules/.bin/vite dev 와 마찬가지인데요. 그렇다는 건 node --inspect node_modules/.bin/vite dev 를 실행하면 디버깅 모드가 된다는 뜻이겠죠.
https://github.com/vitejs/vite/discussions/4065
우리가 Chrome 에 Source 탭에서 디버깅 하듯이 VSCode 에서도 그렇게 하려면 VSCode 에게 “지금 저 프로세스가 xxx 포트로 디버깅 기능을 열었으니까, 거기에 붙어” 라고 설정을 해줘야 하는데 그게 바로 launch.json 설정이에요.
https://code.visualstudio.com/docs/editor/debugging
하지만 영상에서도 말했듯이, 너무나 많은 변수에 의해 이게 작동하지 않거나, 아니면 작동하는 것 같아 보이는데 막상 breakpoint 가 제대로 안먹히는 일들이 많아요. 그래도, 적어도 Source Map 이 제공되는 환경에서 브라우저를 통해 디버깅을 해보는 건 잘 될 확률이 높으니 지금은 그 쪽으로 더 시도를 해보시길 권해드립니다 (제가 영상에서 보여드린 버전).
최근 vite 환경에서는 세팅을 해보지 않은 관계로, 언제 한번 세팅을 성공하는대로 또 공유를 드리겠습니다.