| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 |
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창에 서버가 실행된 메세지를 확인 가능하다
