VisualStudioCode 디버깅 관련 (SourceMap, Debugger for Chrome, Node.js)

SourceMap

다음과 같은 이유로 브라우저에서 디버깅 되는 소스내용과 서버에 등록된 소스 파일의 내용이 다르다

- 성능을 위한 compress

- old browser 지원을 위해 최신 ES코드를 구버전의 ES로 conversion

- 개발 효율성을 위해 개발언어는 Typescript이고 배포언어는 Javascript로 conversion

위와 같은 기능을 제공하는 framework가 Webpack이다

SourceMap은 개발시 또는 운영시 스크립트 디버깅을 수행하기 위해 개발된 방법이다

Debugger for Chrome

웹개발에 도움이 되는 VSCode에 설치하는 디버깅 플러그인이다

해당 플러그인을 설치후 launch.json을 살펴보면  configurations에 type:"chrome" 인 그룹이 추가된 것을 볼 수 있다

실행하는 방법은 VSCode 의 좌측아이콘중 Run탭을 선택하고

상단 메뉴의 아래에 위치한 RUN 버튼의 우측에 combo가 있는데

해당 combo에서 추가된 그룹의 name값을 선택후 실행하면 된다

Debug to Node.js

Run탭에서 RUN버튼 우측 콤보의 node server의 name을 선택후 실행하면 DEBUG CONSOLE창에 서버가 실행된 메세지를 확인 가능하다