클라이언트 측 코드를 결합하거나 축소하거나 컴파일한 후에도 읽을 수 있고 디버그할 수 있도록 유지합니다. 소스 맵을 사용하여 소스 코드를 Sources 패널의 컴파일된 코드에 매핑합니다.
전처리기 시작하기
전처리기의 소스 맵을 사용하면 DevTools가 축소된 파일 외에 원본 파일을 로드합니다.
Chrome은 실제로 축소된 코드를 실행하지만 Sources 패널에는 사용자가 작성한 코드가 표시됩니다. 소스 파일에서 중단점을 설정하고 코드를 단계별로 실행하면 모든 오류, 로그, 중단점이 자동으로 매핑됩니다.
이렇게 하면 개발 서버에서 제공하고 브라우저에서 실행하는 코드가 아니라 작성한 코드를 디버깅하는 것처럼 보입니다.
Sources 패널에서 소스 맵을 사용하려면 다음 단계를 따르세요.
- 소스 맵을 생성할 수 있는 전처리기만 사용합니다.
- 웹 서버에서 소스 맵을 제공할 수 있는지 확인합니다.
지원되는 전처리기 사용
소스 맵과 함께 사용되는 일반적인 전처리기에는 다음이 포함되나 이에 국한되지 않습니다.
자세한 목록은 소스 맵: 언어, 도구, 기타 정보를 참고하세요.
설정에서 소스 맵 사용 설정
Settings > Preferences > Sources에서 
Enable JavaScript 소스 맵 사용 설정을 선택하세요.
소스 맵이 성공적으로 로드되었는지 확인
개발자 리소스: 소스 맵 수동으로 보기 및 로드를 참고하세요.
소스 맵으로 디버깅
소스 맵이 준비되고 사용 설정되면 다음 작업을 수행할 수 있습니다.
- 소스 패널에서 웹사이트의 소스를 엽니다.
작성한 코드에만 집중하려면 파일 트리에서 작성하고 배포한 파일을 그룹화하세요. 그런 다음
작성됨 섹션을 펼치고 편집기에서 원본 소스 파일을 엽니다.
평소와 같이 중단점을 설정합니다. 예를 들어 로그 지점이 있습니다. 그런 다음 코드를 실행합니다.
편집기에서 하단의 상태 표시줄에 배포된 파일 링크를 표시합니다. 마찬가지로 배포된 CSS 파일의 경우에도 마찬가지입니다.
콘솔 창을 엽니다. 이 예시에서 콘솔에는 로그 지점의 메시지 옆에 배포된 파일이 아닌 원본 파일에 대한 링크가 표시됩니다.
중단점 유형을 일반 유형으로 변경하고 코드를 다시 실행합니다. 이번에는 실행이 일시중지됩니다.
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주석이 있는 컴파일된 JavaScript 코드가 포함됩니다. - 소스 파일을 열려면 편집기의 상태 표시줄에 있는 링크를 클릭합니다.
