Meggin Kearney
Paul Bakaus
Sofia Emelianova
클라이언트 측 코드를 결합, 축소 또는 컴파일한 후에도 읽기 쉽고 디버그할 수 있도록 유지합니다. 소스 맵을 사용하여 소스 패널에서 소스 코드를 컴파일된 코드에 매핑합니다.
프리프로세서 시작하기
사전 처리기의 소스 맵으로 인해 DevTools는 축소된 파일 외에 원본 파일을 로드합니다.
Chrome에서는 실제로 축소된 코드를 실행하지만 소스 패널에는 작성한 코드가 표시됩니다. 소스 파일에서 중단점을 설정하고 코드를 단계별로 진행하면 모든 오류, 로그, 중단점이 자동으로 매핑됩니다.
이렇게 하면 개발 서버에서 제공되고 브라우저에서 실행되는 코드와 달리 작성한 코드를 디버그하는 것처럼 보입니다.
소스 패널에서 소스 맵을 사용하려면 다음 단계를 따르세요.
- 소스 맵을 생성할 수 있는 전처리기만 사용합니다.
- 웹 서버에서 소스 맵을 제공할 수 있는지 확인합니다.
지원되는 전처리기 사용
소스 맵과 함께 사용되는 일반적인 프리프로세서에는 다음이 포함되나 이에 국한되지 않습니다.
확장된 목록은 소스 맵: 언어, 도구, 기타 정보를 참고하세요.
설정에서 소스 맵 사용 설정
설정 > 환경설정 > 소스에서 
JavaScript 소스 맵을 선택합니다.
소스 맵이 로드되었는지 확인
개발자 리소스: 소스 맵 수동으로 보고 로드하기를 참고하세요.
소스 맵을 사용하여 디버깅
소스 맵이 준비되고 사용 설정되면 다음 작업을 할 수 있습니다.
- 소스 패널에서 웹사이트의 소스를 엽니다.
작성한 코드에만 집중하려면 파일 트리에서 작성된 파일과 배포된 파일을 그룹화하세요. 그런 다음
Authored 섹션을 펼치고 편집기에서 원본 소스 파일을 엽니다.