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