DevTools 팁: 소스 맵이란 무엇인가요?

Sofia Emelianova
Sofia Emelianova

소스 맵을 사용하면 성능에 영향을 미치지 않으면서 코드를 결합하고 축소한 후에도 코드를 읽고 디버그할 수 있습니다.

다양한 트랜스파일러, 미니파이어, 번들러를 사용하면 배포하는 코드가 작성한 코드와 다릅니다. 이러한 도구는 네트워크 성능을 개선하기 위해 코드를 단일 줄로 압축하고 불필요한 문자를 삭제하며 변수를 줄입니다.

축소된 코드와 원래 코드

많은 도구를 사용하여 코드와 함께 소스 맵을 생성할 수 있습니다.

소스 맵

Chrome DevTools는 배포된 코드와 소스 맵을 모두 읽으며 중단점이 있는 경우에도 평소와 같이 코드를 디버그할 수 있습니다.

작성된 소스 파일에서 DevTools의 브레이크포인트 사용

소스 맵의 작동 방식을 더 잘 이해하려면 소스 맵 시각화 도구를 확인하세요.

또한 소스 맵에는 확장 프로그램이 있을 수 있습니다. 도구와 프레임워크를 빌드하는 경우 이를 지원해 보세요. DevTools팀과 Angular가 x_google_ignoreList 확장 프로그램을 지원하여 DevTools의 디버깅 환경을 개선한 사례를 살펴보려면 이 사례 연구: DevTools를 통한 향상된 Angular 디버깅을 확인하세요.

자세한 내용은 다음을 참고하세요.