ignoreList 소스 맵 확장 프로그램

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

Jecelyn Yeen

Chrome DevTools는 개발자 디버깅 환경을 개선하기 위해 소스 맵의 ignoreList 필드를 파싱합니다. Console에서 다음 스택 트레이스를 살펴봅니다. 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는 이 정보를 적용하여 무시된 파일에서 프레임을 숨깁니다.

접힌 스택 트레이스와 펼쳐진 스택 트레이스 비교 — Console에서 스택 트레이스를 확장하기 전과 후의 스택 트레이스가 이미지에 표시됩니다. 무시된 프레임은 펼쳐질 때 비활성화됩니다.

이는 중단점 디버깅 중에 소스 패널의 호출 스택에도 적용됩니다.

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

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

무시된 소스를 숨깁니다.

`ignoreList` 채우기

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

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

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

선호하는 프레임워크와 빌드 도구가 이를 아직 지원하지 않는다면 어떻게 해야 할까요?

Google은 이러한 새로운 설정을 적용하기 위해 프레임워크 및 빌드 도구를 적극적으로 활용하고 있습니다. 운영자에게 이 기능에 대해 알려주어도 됩니다. 예를 들어 저장소에서 문제를 신고할 수 있습니다.

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

우수사례: Nuxt 및 Angular 구현

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

Nuxt의 `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)
        },
      }
})

DevTools팀은 이를 가능하게 해준 Vite 및 Nuxt팀에 감사의 인사를 전합니다. 성공적인 구현을 위해 노력해 주셔서 감사합니다. 참여해 주신 Vite 및 Nuxt팀에 다시 한번 감사드립니다.

Angular의 `ignoreList`

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

이는 webpack의 Compiler 모듈에 후크하는 플러그인을 만들어 angular-cli를 변경하는 방식으로 구현되었습니다.

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

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 채우기