디버깅과 Source Map
Source Map, 왜 필요할까?
프론트엔드 개발을 편리하게 하기 위해 HTML과 CSS의 전처리 부터 자바스크립트 프레임워크, 타입스크립트 등 많은 도구들이 생겨났다. 그래서 브라우저가 이해할 수 있는 언어로 변경하는 transpile과 bundle 과정이 많이 필요했다. 외부 라이브러리 코드와 병합이 되고 난독화 과정, 자바스크립트 변환 과정 등을 거치면서 그 결과물은 우리가 작성한 코드와 많이 달라진다. 이는 그 동안 프론트엔드 개발자의 디버깅을 어렵게하는 주범이었다.
Source Map은 어떻게 만들어 지는가?
Source Map은 .map 으로 끝나는 파일들로, webpack, vite와 같은 빌드툴에 의해 생성된다. 아래는 source map의 예시 코드이다.
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}sorce map을 토대로 아래와 같이 변형된 코드와 원본 코드의 mapping 과정을 거치게 된다.
디버깅
Source map 덕분에 우리는 브라우저에서 디버깅을 쉽게 할 수 있게 되었다. vite를 통해 리액트와 타입스크립트로 구현한 간단한 어플리케이션을 만들어 보고 개발자 도구를 켜보면 변환된 파일이 내려오는 것을 볼 수 있다.
이를 개발자 도구 > source에 들어가서 커멘드 + p 를 입력하면 파일명을 입력할 수 있는 명령창이 나온다. 여기서 디버깅을 하고자 하는 원본 파일명을 입력해보자. 여기서는 위 이미지와 똑같이 main.tsx 파일을 입력해보겠다.
코드를 보면 위의 코드와는 다르게 원본 코드가 보이는 것을 확인할 수 있다. 이제 브레이크포인트나 step over와 같은 디버깅 툴이 제공하는 다양한 기능을 활용하여 디버깅을 해보면 console log에 의존하지 않고도 쉽게 디버깅을 할 수 있다. 자세한 기능들은 공식 문서에 잘 나와있다.
