ignoreList 소스 맵 확장 프로그램

ignoreList 소스 맵 확장 프로그램을 사용하여 Chrome DevTools의 디버깅 환경을 개선합니다.

Jecelyn Yeen

Chrome DevTools는 개발자 디버깅 환경을 개선하는 데 도움이 되도록 소스 맵의 ignoreList 필드를 파싱합니다. 콘솔에서 다음 스택 트레이스를 살펴보세요. DevTools는 모든 서드 파티 프레임을 자동으로 숨기고 코드와 관련된 프레임만 표시합니다.

스택 트레이스 결과 비교 — Chrome DevTools에서 `ignoreList`를 지원하기 전과 후의 스택 트레이스를 보여주는 이미지입니다. 나중에 디버깅할 때 관련 없는 서드 파티 프레임을 숨겨서 문제를 더 빠르게 파악할 수 있습니다.

`ignoreList`는 어떤 서비스인가요?

소스 맵 확장 프로그램은 소스 맵에 대한 보완 정보를 저장하는 추가 필드입니다. 이러한 필드에는 x_라는 접두사가 붙습니다.

Chrome DevTools는 ignoreList 필드 (제공되는 경우)를 사용하여 생성된 코드를 필터링하고 웹 개발자가 자신이 작성하는 코드에만 집중할 수 있도록 합니다. 예를 들어 다음 소스 맵을 살펴보세요.

/* demo.js.map */

{
  "version": 3,
  "mappings": "AAAAA, ..."
  "sources": [
    "app.js",
    "components/Button.ts",
    "node_modules/.../framework.js",
    "node_modules/.../library.js",
    ...
  ],
  "ignoreList": [2, 3],
  ...
}

sources 필드는 mappings 항목에서 사용하는 원본 소스 목록을 표시합니다. 매핑 작동 방식을 알아보려면 소스 맵이란 무엇인가요?를 시청하세요.

node_modules/…/frameworks.js 및 node_modules/.../library.js 파일 두 개가 서드 파티 스크립트인 경우 ignoreList 필드를 지정하여 sources 필드에서의 위치를 나타낼 수 있습니다. Chrome DevTools는 이 정보를 적용하여 무시된 파일에서 프레임을 숨깁니다.

접힌 스택 트레이스와 펼쳐진 스택 트레이스 비교 — 이 이미지는 콘솔에서 스택 트레이스를 확장하기 전과 후의 스택 트레이스를 보여줍니다. 무시된 프레임은 확장될 때 비활성화됩니다.

이는 중단점 디버깅 중에 Sources 패널의 Call Stack에도 적용됩니다.

내부적으로 DevTools에는 알려진 서드 파티 스크립트를 자동으로 추가 목록에 추가라는 추가 설정이 기본적으로 사용 설정되어 있습니다. 이는 DevTools > 설정 > 무시 목록에서 찾을 수 있습니다.

ignoreList 소스 맵 필드를 사용하면 Sources 패널에서 무시된 파일을 숨겨 코드에 집중할 수 있습니다.

무시 목록에 포함된 소스를 숨깁니다.

`ignoreList` 입력 방법

좋은 소식은 Angular 및 Nuxt와 같은 프레임워크가 소스 맵에서 이미 ignoreList를 구성한다는 것입니다. 최신 버전으로 업그레이드하면 즉시 사용할 수 있습니다. 스택 트레이스를 손쉽게 개선할 수 있습니다.

반면 Vite 및 Rollup과 같은 빌드 도구는 이를 구성하는 설정을 제공합니다. 이를 위한 webpack 플러그인도 있습니다.

프레임워크 또는 라이브러리 유지관리자인 경우 이러한 설정을 구현하여 사용자 디버깅 환경을 개선하는 방법을 이해하는 것이 중요합니다. Angular와 Nuxt가 백그라운드에서 어떻게 이 작업을 수행했는지 알아보려면 다음 섹션을 참고하세요.

원하는 프레임워크와 빌드 도구에서 아직 지원하지 않는 경우에는 어떻게 해야 할까요?

Google에서는 이러한 새로운 설정을 도입하기 위한 프레임워크 및 도구 개발을 적극적으로 진행하고 있습니다. 또한 유지관리자에게 이 기능에 대해 알려주면 도움이 됩니다. 예를 들어 저장소에서 문제를 신고할 수 있습니다.

또는 DevTools > Sources > Page 창의 파일 트리에서 직접 Ignore List에 관련 없는 스크립트를 수동으로 추가하여 유사한 결과를 얻을 수 있습니다.

우수사례: Nuxt 및 Angular 구현

다음 두 가지 우수사례를 살펴보세요.

넛스트 `ignoreList`

Nuxt v3.3.1부터 node_modules 및 Nuxt buildDir의 콘텐츠가 '디버거에서 무시'로 표시되었습니다.

이는 Vite와 Rollup을 사용해 Nuxt의 빌드 구성을 변경한 덕분에 가능했습니다.

/* vite.config.ts */

const ctx: ViteBuildContext = {
  config: vite.mergeConfig(
  build: {
    rollupOptions: {
      output: {
        sourcemapIgnoreList: (relativeSourcePath) => {
          return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
        },
      }
})

이를 가능하게 해 주신 Vite 및 Nuxt팀에 감사의 말씀을 전합니다. 성공적인 구현을 위해 협조해 주셔서 감사합니다. 도움을 주신 Vite 및 Nuxt팀에 다시 한번 감사드립니다.

`ignoreList`(Angular)

Angular v14.1.0부터 node_modules 및 webpack 폴더의 콘텐츠가 'to ignore'로 표시되었습니다.

이는 webpack의 Compiler 모듈에 후크하는 플러그인을 생성하여 angular-cli를 변경함으로써 구현되었습니다.

Google 엔지니어가 PROCESS_ASSETS_STAGE_DEV_TOOLING 단계에 후크를 만든 webpack 플러그인은 Webpack에서 생성하고 브라우저가 로드하는 최종 애셋으로 소스 맵의 ignoreList 필드를 채웁니다.

const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];

for (const [index, path] of map.sources.entries()) {
  if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
    ignoreList.push(index);
  }
}

map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));

DevTools의 기타 Angular 디버깅 개선사항에 관한 자세한 내용은 우수사례: DevTools로 Angular 디버깅 개선을 참고하세요.

Chrome DevTools 팀은 이 구현을 성공으로 이끄는 데 소중한 기여를 해 주신 Angular 팀에 감사의 말씀을 전합니다. 그간의 노력과 협업이 절실한 상황이었습니다. 협조해 주셔서 감사합니다. 이를 가능하게 해 주신 Angular팀 여러분, 감사합니다!

ignoreList 소스 맵 확장 프로그램

ignoreList는 어떤 서비스인가요?

ignoreList 입력 방법