ignoreList 소스 맵 확장 프로그램을 사용하여 Chrome DevTools에서 디버깅 환경을 개선합니다.
Chrome DevTools는 소스 맵의 ignoreList 필드를 파싱하여 개발자 디버깅 환경을 개선합니다. Console에서 다음 스택 트레이스를 살펴보세요. 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는 이 정보를 적용하여 무시된 파일의 프레임을 숨깁니다.
이는 중단점 디버깅 중에 소스 패널의 호출 스택에도 적용됩니다.
백그라운드에서 DevTools에는 기본적으로 사용 설정된 추가 설정인 알려진 서드 파티 스크립트를 무시 목록에 자동으로 추가가 있습니다. DevTools > 설정 > 무시 목록에서 찾을 수 있습니다.
ignoreList 소스 지도 필드를 사용하면 소스 패널에서 무시된 파일을 숨겨 코드에 집중할 수 있습니다.
ignoreList 채우기 방법
다행히 Angular 및 Nuxt와 같은 프레임워크는 이미 소스 맵에 ignoreList를 구성합니다. 최신 버전으로 업그레이드하면 바로 사용할 수 있습니다. 스택 트레이스 개선사항을 손쉽게 확인할 수 있습니다.
반면 Vite 및 Rollup과 같은 빌드 도구는 이를 구성하는 설정을 제공합니다. 이를 위한 webpack 플러그인도 있습니다.
프레임워크 또는 라이브러리 유지관리자라면 이러한 설정을 구현하여 사용자의 디버깅 환경을 개선하는 방법을 이해하는 것이 중요합니다. 다음 섹션에서 Angular와 Nuxt가 내부적으로 어떻게 작동하는지 확인하세요.
자주 사용하는 프레임워크와 빌드 도구에서 아직 지원하지 않는다면 어떻게 해야 할까요?
Google은 프레임워크 및 빌드 도구와 적극적으로 협력하여 이러한 새로운 설정을 적용하고 있습니다. 관리자에게 이 기능을 알려 도움을 줄 수도 있습니다. 예를 들어 저장소에 문제를 신고할 수 있습니다.
또는 DevTools > 소스 > 페이지 창의 파일 트리에서 직접 무시 목록에 관련 없는 스크립트를 추가하여 유사한 결과를 얻을 수 있습니다.
우수사례: 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 엔지니어가 만든 웹팩 플러그인은 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팀에 감사의 말씀을 전합니다. 여러분의 노력과 협력이 필수적이었으며, 노고에 감사드립니다. 이러한 성과를 가능하게 해준 Angular팀에 감사드립니다.