ignoreList 소스 맵 확장 프로그램

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

Jecelyn Yeen

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

스택 트레이스 결과 비교 — </ph> 이 이미지는 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는 이 정보를 적용하여 무시된 파일에서 프레임을 숨깁니다.

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

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

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

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

무시된 소스를 숨깁니다.

`ignoreList` 입력 방법

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

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

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

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

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

또는 DevTools의 파일 트리에서 바로 무시 목록에 관련 없는 스크립트를 수동으로 추가할 수 있습니다. 출처 > 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를 변경하는 방식으로 구현되었습니다.

Google 엔지니어가 만든 webpack 플러그인은 PROCESS_ASSETS_STAGE_DEV_TOOLING 단계에 후크를 연결하고 소스 맵의 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팀에도 감사의 마음을 전하고자 합니다. Google은 여러분의 노력과 공동작업이 가장 중요했습니다. 여러분의 노고에 감사드립니다. Angular 팀 여러분, 이렇게 해 주셔서 감사합니다!

ignoreList 소스 맵 확장 프로그램

ignoreList는 어떤 서비스인가요?

ignoreList 입력 방법