이 페이지는 Cloud Translation API를 통해 번역되었습니다.

소스 맵이란 무엇인가요?

Jecelyn Yeen

소스 맵은 최신 웹 개발에서 중요한 도구로, 소스 맵과 소스 맵을 훨씬 더 쉬워졌습니다. 이 페이지에서는 소스 맵의 기본사항과 디버깅 환경을 개선하는 방법을 설명합니다.

소스 맵의 필요성

초기 웹 앱은 낮은 복잡성으로 빌드되었습니다. 개발자들은 HTML, CSS, 및 JavaScript 파일을 웹에 직접 업로드할 수 있습니다.

보다 현대적이고 복잡한 웹 앱의 경우 애플리케이션에 다양한 도구가 살펴보겠습니다 예를 들면 다음과 같습니다.

템플릿 언어 및 HTML 전처리기: Pug, Nunjucks, 마크다운.
CSS 전처리기: SCSS, LESS, PostCSS.
JavaScript 프레임워크: Angular, React Vue, Svelte
JavaScript 메타 프레임워크: Next.js, Nuxt, Astro.
높은 수준의 프로그래밍 언어: TypeScript 다트, CoffeeScript

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

다양한 도구에 대한 간략한 개요 — 일반적인 웹 앱 개발 도구 중 일부입니다.

이러한 도구를 사용하려면 코드를 표준 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 또는 소스 맵 시각화.

왼쪽의 생성됨 열에는 압축된 콘텐츠가 표시되며, original 열에는 원본 소스가 표시됩니다.

비주얼라이저는 original 열의 각 줄을 generated 열에 해당 코드가 표시됩니다.

mappings 섹션은 코드의 디코딩된 매핑을 보여줍니다. 예를 들어 65 -> 2:2 항목의 의미는 다음과 같습니다.

생성된 코드: const라는 단어는 압축된 콘텐츠의 65번 위치에서 시작합니다.
원본 코드: 단어 const은 원본 콘텐츠의 2행과 2열에서 시작합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

이를 통해 개발자는 축소된 코드 간의 관계를 빠르게 식별할 수 있습니다. 원본 코드가 포함되므로 디버깅 프로세스가 더 원활하게 진행됩니다.

브라우저 개발자 도구는 이러한 소스 맵을 적용하여 디버깅 문제를 해결하는 데 도움이 됩니다.

소스 맵을 적용하는 개발자 도구 — 브라우저 개발자 도구가 적용되는 방식의 예 소스 맵을 제공하고 파일 간의 매핑을 표시합니다.

소스 맵 확장 프로그램

소스 맵은 x_ 접두사로 시작하는 맞춤 확장 필드를 지원합니다. 1개 Chrome에서 제안한 x_google_ignoreList 확장 프로그램 필드의 예는 다음과 같습니다. DevTools를 사용할 수 있습니다. x_google_ignoreList를 참조하세요. 확장 프로그램이 코드에 집중하는 데 어떤 도움이 되는지 자세히 알아보세요.

소스 맵의 단점

안타깝게도 소스 매핑이 항상 필요한 만큼 완전하지는 않습니다. 첫 번째 예에서 greet 변수는 빌드 중에 최적화되었습니다. 프로세스에서 반환하므로 그 값이 최종 문자열 출력에 직접 삽입되어 있어도 가능합니다.

변수 인사말이 매핑되지 않았습니다. — 원본의 `greet` 변수 매핑에서 누락된 경우를 나타냅니다.

이 경우 코드를 디버그할 때 개발자 도구가 실제 값을 추론하고 표시합니다. 이러한 종류의 오류로 인해 코드가 훨씬 더 어렵습니다

변수 인사말이 정의되지 않았습니다. — 개발자 도구가 `greet` 값을 찾을 수 없습니다.

이는 소스 맵의 설계 내에서 해결해야 하는 문제입니다. 1개 소스 맵에 범위 정보를 다른 프로그래밍 언어가 디버그 정보를 사용하는 것과 동일한 방식으로 작동합니다.

그러나 이를 위해서는 전체 생태계가 함께 협력하여 소스 맵 사양 및 구현 현재 진행 중인 소스 맵으로 디버그 가능성을 개선하려면 소스 맵 v4 를 참조하세요.