클라이언트 측 코드를 결합하거나 축소하거나 컴파일한 후에도 읽을 수 있고 디버그할 수 있도록 합니다. 소스 맵을 사용하여 소스 코드를 소스 패널의 컴파일된 코드에 매핑합니다.
전처리기 시작하기
전처리기의 소스 맵을 사용하면 DevTools가 최소화된 파일 외에 원본 파일을 로드합니다.
Chrome에서는 실제로 축소된 코드를 실행하지만 소스 패널에는 내가 작성한 코드가 표시됩니다. 소스 파일에서 중단점을 설정하고 코드를 단계별로 실행할 수 있으며 모든 오류, 로그, 중단점이 자동으로 매핑됩니다.
이렇게 하면 개발 서버에서 제공하고 브라우저에서 실행하는 코드가 아닌, 작성한 코드를 디버깅하는 모습을 확인할 수 있습니다.
소스 패널에서 소스 맵을 사용하는 방법:
- 소스 맵을 생성할 수 있는 전처리기만 사용합니다.
- 웹 서버에서 소스 맵을 제공할 수 있는지 확인합니다.
지원되는 전처리기 사용
소스 맵과 함께 사용되는 일반적인 전처리기에는 다음이 포함되나 이에 국한되지 않습니다.
확장 목록은 소스 맵: 언어, 도구, 기타 정보를 참고하세요.
설정에서 소스 맵을 사용 설정하세요.
설정 > 환경설정 > 소스에서 
JavaScript 소스 맵 사용 설정을 선택합니다.
소스 맵이 성공적으로 로드되었는지 확인
개발자 리소스: 수동으로 소스 맵 보기 및 로드를 참고하세요.
소스 맵으로 디버깅
소스 맵을 준비하고 사용 설정하면 다음 작업을 할 수 있습니다.
- 소스 패널에서 웹사이트의 소스를 엽니다.
작성한 코드에만 집중하려면 작성하고 배포된 파일을 파일 트리에서 그룹화합니다. 그런 다음
Authored(작성됨) 섹션을 펼치고 Editor에서 원본 소스 파일을 엽니다.
평소와 같이 중단점을 설정합니다. 예를 들면 logpoint입니다. 그런 다음 코드를 실행합니다.
Editor는 하단의 상태 표시줄에 배포된 파일의 링크를 표시합니다. 배포된 CSS 파일의 경우에도 마찬가지입니다.
콘솔 창을 엽니다. 이 예에서 로그 지점의 메시지 옆에 Console에는 배포된 파일이 아닌 원본 파일의 링크가 표시됩니다.
중단점 유형을 일반 유형으로 변경하고 코드를 다시 실행합니다. 이번에는 실행이 일시중지됩니다.
Call Stack 창에는 배포된 파일이 아닌 원본 파일의 이름이 표시됩니다.
Editor 하단의 상태 표시줄에서 배포된 파일의 링크를 클릭합니다. Sources 패널에 해당 파일로 이동합니다.
배포된 파일을 열면 DevTools에서 //# sourceMappingURL 주석 및 연결된 원본 파일을 찾았는지 알려줍니다.
Editor는 배포된 파일을 자동으로 예쁘게 인쇄한 것을 볼 수 있습니다. 실제로 //# sourceMappingURL 주석을 제외하고 모든 코드가 한 줄에 포함되어 있습니다.
#sourceURL로 eval() 호출 이름 지정
#sourceURL를 사용하면 eval() 호출을 처리할 때 디버깅을 간소화할 수 있습니다. 이 도우미는 //# sourceMappingURL 속성과 매우 유사합니다. 자세한 내용은 소스 맵 V3 사양을 참고하세요.
//# sourceURL=/path/to/source.file 주석은 eval()를 사용할 때 소스 파일을 찾으라고 브라우저에 지시합니다. 이렇게 하면 평가와 인라인 스크립트 및 스타일의 이름을 지정하는 데 도움이 됩니다.
다음 데모 페이지에서 테스트해 보세요.
- DevTools를 열고 Sources 패널로 이동합니다.
- 페이지에서 코드 이름 지정: 입력 필드에 임의의 파일 이름을 입력합니다.
- Compile 버튼을 클릭합니다. CoffeeScript 소스에서 평가된 합계와 함께 알림이 표시됩니다.
- 페이지 창의 파일 트리에서 입력한 맞춤 파일 이름으로 새 파일을 엽니다. 이 파일에는 소스 파일의 원래 이름이 있는
// #sourceURL주석이 있는 컴파일된 자바스크립트 코드가 포함되어 있습니다. - 소스 파일을 열려면 Editor의 상태 표시줄에 있는 링크를 클릭합니다.
