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

소피아 에멜리아노바
소피아 에멜리아노바

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

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

축소된 코드와 원본 코드

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

소스 맵.

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

작성된 소스 파일에서 DevTools의 중단점 사용

소스 맵의 작동 방식을 더 잘 이해하려면 소스 맵 비주얼라이저를 확인하세요.

또한 소스 맵에는 확장 프로그램이 있을 수 있습니다. 도구와 프레임워크를 빌드하는 경우 지원을 고려하세요. 우수사례: DevTools를 사용한 Better Angular Debugging을 확인하세요. DevTools팀과 Angular가 x_google_ignoreList 확장 프로그램을 지원하여 DevTools의 디버깅 환경을 개선했습니다.

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