소스 맵은 최신 웹 개발에서 중요한 도구로, 소스 맵과 소스 맵을 훨씬 더 쉬워졌습니다. 이 페이지에서는 소스 맵의 기본사항과 디버깅 환경을 개선하는 방법을 설명합니다.
소스 맵의 필요성
초기 웹 앱은 낮은 복잡성으로 빌드되었습니다. 개발자들은 HTML, CSS, 및 JavaScript 파일을 웹에 직접 업로드할 수 있습니다.
보다 현대적이고 복잡한 웹 앱의 경우 애플리케이션에 다양한 도구가 살펴보겠습니다 예를 들면 다음과 같습니다.
- 템플릿 언어 및 HTML 전처리기: Pug, Nunjucks, 마크다운.
- CSS 전처리기: SCSS, LESS, PostCSS.
- JavaScript 프레임워크: Angular, React Vue, Svelte
- JavaScript 메타 프레임워크: Next.js, Nuxt, Astro.
- 높은 수준의 프로그래밍 언어: TypeScript 다트, CoffeeScript
![다양한 도구에 대한 간략한 개요](https://web.developers.google.cn/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=19&hl=ko)
이러한 도구를 사용하려면 코드를 표준 HTML로 변환 컴파일하는 빌드 프로세스가 필요합니다. 브라우저가 이해할 수 있는 CSS, CSS 등이 있습니다. 또한 일반적으로 이러한 파일을 압축 및 결합하고 압축하여 성능을 최적화하는 Terser의 인스턴스 그룹을 만듭니다.
예를 들어, 빌드 도구를 사용하여 다음 파일을 트랜스파일하고 압축할 수 있습니다. TypeScript 파일을 한 줄의 JavaScript로 변환합니다. 다음에서 직접 사용해 볼 수 있습니다. 이 데모를 참조하세요.
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
console.log(num);
});
압축된 버전은 다음과 같습니다.
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));
그러나 코드를 압축하면 디버깅이 더 어려워질 수 있습니다. 소스 맵 이 문제를 해결할 수 있습니다. 컴파일된 코드를 다시 원본 코드에 매핑하면 오류의 원인을 빠르게 찾을 수 있습니다
소스 맵 생성
소스 맵은 이름이 .map
로 끝나는 파일입니다 (예:
example.min.js.map
및 styles.css.map
). 대부분의 빌드에서 생성할 수 있으며
Vite, webpack,
Rollup, Parcel 및
esbuild입니다.
일부 도구에는 기본적으로 소스 맵이 포함되어 있습니다. 다른 사용자는 추가 옵션이 필요할 수 있음 다음과 같이 구성합니다.
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
소스 맵 이해
이러한 소스 맵 파일에는 디버깅에 도움이 되는 필수 정보가 포함되어 있습니다. 컴파일된 코드가 원본 코드에 매핑되는 방식에 대해 설명합니다. 이 예시에서는 소스 맵:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
각 필드를 이해하려면 소스 맵 사양 또는 소스 맵의 분석.
소스 맵에서 가장 중요한 부분은 mappings
필드입니다. Kubernetes는
VLQ base64 인코딩 문자열
컴파일된 파일의 선과 위치를 해당하는 원본
파일에서 참조됩니다. 다음과 같은 소스 맵 시각화 도구를 사용하여 이 매핑을 볼 수 있습니다.
source-map-visualization 또는
소스 맵 시각화.
![소스 맵 시각화](https://web.developers.google.cn/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=19&hl=ko)
왼쪽의 생성됨 열에는 압축된 콘텐츠가 표시되며, original 열에는 원본 소스가 표시됩니다.
비주얼라이저는 original 열의 각 줄을 generated 열에 해당 코드가 표시됩니다.
mappings 섹션은 코드의 디코딩된 매핑을 보여줍니다. 예를 들어
65 -> 2:2
항목의 의미는 다음과 같습니다.
- 생성된 코드:
const
라는 단어는 압축된 콘텐츠의 65번 위치에서 시작합니다. - 원본 코드: 단어
const
은 원본 콘텐츠의 2행과 2열에서 시작합니다.
![매핑 항목](https://web.developers.google.cn/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=19&hl=ko)
65 -> 2:2
항목에 중점을 둔 매핑 시각화이를 통해 개발자는 축소된 코드 간의 관계를 빠르게 식별할 수 있습니다. 원본 코드가 포함되므로 디버깅 프로세스가 더 원활하게 진행됩니다.
브라우저 개발자 도구는 이러한 소스 맵을 적용하여 디버깅 문제를 해결하는 데 도움이 됩니다.
<ph type="x-smartling-placeholder">![소스 맵을 적용하는 개발자 도구](https://web.developers.google.cn/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=19&hl=ko)
소스 맵 확장 프로그램
소스 맵은 x_
접두사로 시작하는 맞춤 확장 필드를 지원합니다. 1개
Chrome에서 제안한 x_google_ignoreList
확장 프로그램 필드의 예는 다음과 같습니다.
DevTools를 사용할 수 있습니다. x_google_ignoreList를 참조하세요.
확장 프로그램이 코드에 집중하는 데 어떤 도움이 되는지 자세히 알아보세요.
소스 맵의 단점
안타깝게도 소스 매핑이 항상 필요한 만큼 완전하지는 않습니다.
첫 번째 예에서 greet
변수는 빌드 중에 최적화되었습니다.
프로세스에서 반환하므로 그 값이 최종 문자열 출력에 직접 삽입되어 있어도 가능합니다.
![변수 인사말이 매핑되지 않았습니다.](https://web.developers.google.cn/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=19&hl=ko)
greet
변수
매핑에서 누락된 경우를 나타냅니다.이 경우 코드를 디버그할 때 개발자 도구가 실제 값을 추론하고 표시합니다. 이러한 종류의 오류로 인해 코드가 훨씬 더 어렵습니다
<ph type="x-smartling-placeholder">![변수 인사말이 정의되지 않았습니다.](https://web.developers.google.cn/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=19&hl=ko)
greet
값을 찾을 수 없습니다.이는 소스 맵의 설계 내에서 해결해야 하는 문제입니다. 1개 소스 맵에 범위 정보를 다른 프로그래밍 언어가 디버그 정보를 사용하는 것과 동일한 방식으로 작동합니다.
그러나 이를 위해서는 전체 생태계가 함께 협력하여 소스 맵 사양 및 구현 현재 진행 중인 소스 맵으로 디버그 가능성을 개선하려면 소스 맵 v4 를 참조하세요.