DevTools의 새로운 기능 (Chrome 106)

Jecelyn Yeen

소스 패널에서 작성 / 배포 기준으로 파일 그룹화

이제 작성됨 / 배포됨 기준으로 파일 그룹화가 점 3개 메뉴 아래에 표시됩니다. 이전에는 탐색 창에 직접 표시되었습니다.

이 데모를 엽니다. 작성 / 배포 기준으로 파일 그룹화 설정을 사용 설정하면 원본 소스 코드 (작성)를 먼저 보고 더 빠르게 이동할 수 있습니다.

Chromium 버그: 1352488

향상된 스택 트레이스

비동기 작업의 연결된 스택 트레이스

일부 작업이 비동기적으로 실행되도록 예약된 경우 이제 DevTools의 스택 트레이스에 작업의 '전체 스토리'가 표시됩니다. 이전에는 일부만 표시되었습니다.

예를 들어 이 데모를 열고 증가 버튼을 클릭합니다. 콘솔에서 오류 메시지를 펼칩니다. 소스 코드에서 작업에는 비동기 timeout 작업이 포함됩니다.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

이전에는 스택 트레이스에 시간 초과 작업만 표시되었습니다. 작업의 '근본 원인'을 표시하지 않았습니다.

최신 변경사항에 따라 이제 DevTools에 버튼 구성요소의 onClick 이벤트, increment 함수, 타임아웃 작업 순으로 작업이 시작되는 것으로 표시됩니다.

DevTools에는 새로운 '비동기 스택 태그 지정' 기능이 도입되었습니다. 비동기 코드의 두 부분을 새로운 console.createTask() 메서드로 연결하여 작업의 전체 스토리를 전달할 수 있습니다. 자세한 내용은 DevTools의 최신 디버깅을 참고하세요.

복잡하게 들리나요? 전혀 그렇지 않습니다. 대부분의 경우 사용 중인 프레임워크에서 예약 및 비동기 실행을 처리합니다. 이 경우 프레임워크에서 API를 사용하므로 걱정하지 않아도 됩니다. (예: Angular에서 이러한 변경사항을 구현함)

Chromium 버그: 1334585

알려진 서드 파티 스크립트를 자동으로 무시

이제 DevTools에서 알려진 서드 파티 스크립트를 무시 목록에 자동으로 추가하므로 디버깅 중에 코드의 문제를 더 빠르게 식별할 수 있습니다.

이 데모를 열고 증가 버튼을 클릭합니다. 콘솔에서 오류 메시지를 펼칩니다. 스택 트레이스에는 코드 (예: app.component.ts button.component.ts)만 표시됩니다. 프레임 더보기를 클릭하여 전체 스택 트레이스를 확인하세요.

이전에는 스택 트레이스에 zone.js 및 core.mjs과 같은 서드 파티 스크립트가 포함되었습니다. 이러한 파일은 소스 코드가 아니며 번들러 (예: webpack) 또는 프레임워크 (예: Angular)에 의해 생성됩니다. 오류의 근본 원인을 파악하는 데 시간이 더 오래 걸렸습니다.

DevTools는 소스 맵의 새로운 x_google_ignoreList 속성을 기반으로 서드 파티 스크립트를 무시합니다. 프레임워크와 번들러는 이 정보를 제공해야 합니다. 우수사례: DevTools를 사용한 더 나은 Angular 디버깅을 참고하세요.

원하는 경우 항상 전체 스택 트레이스를 보려면 설정 > 무시 목록 > 알려진 서드 파티 스크립트를 무시 목록에 자동으로 추가를 통해 설정을 사용 중지하면 됩니다.

Chromium 버그: 1323199

디버깅 중 호출 스택 개선

알려진 서드 파티 스크립트를 무시 목록에 자동으로 추가 설정을 사용하면 이제 호출 스택에 코드와 관련된 프레임만 표시됩니다.

이 데모를 열고 app.component.ts의 increment() 함수에 중단점을 설정합니다. 페이지에서 증분 버튼을 클릭하여 중단점을 트리거합니다. 호출 스택에는 코드의 프레임 (예: app.component.ts 및 button.component.ts)만 표시됩니다.

모든 프레임을 보려면 무시 목록에 포함된 프레임 표시를 사용 설정합니다. 이전에는 DevTools에서 기본적으로 모든 프레임을 표시했습니다.

Chromium 버그: 1352488

소스 패널에서 무시 목록에 포함된 소스 숨기기

무시 목록에 포함된 소스 숨기기를 사용 설정하여 탐색 창에서 관련 없는 파일을 숨깁니다. 이렇게 하면 코드에만 집중할 수 있습니다.

이 데모를 엽니다. 소스 패널에서 node_modules과 webpack은 서드 파티 스크립트입니다. 점 3개 메뉴를 클릭하고 무시 목록에 있는 소스 숨기기를 선택하여 창에서 숨깁니다.

Chromium 버그: 1352488

명령어 메뉴에서 무시 목록에 있는 파일 숨기기

무시 목록에 있는 소스 숨기기 설정을 사용하면 명령어 메뉴에서 파일을 더 빠르게 찾을 수 있습니다. 이전에는 명령어 메뉴에서 파일을 검색하면 관련성이 없을 수 있는 서드 파티 파일이 반환되었습니다.

예를 들어 무시 목록에 있는 소스 숨기기 설정을 사용 설정하고 점 3개 메뉴를 클릭합니다. 파일 열기를 선택합니다. 'ton'을 입력하여 버튼 구성요소를 검색합니다. 이전에는 결과에 node_modules의 파일이 포함되었으며, node_modules 파일 중 하나가 첫 번째 결과로 표시되기도 했습니다.

Chromium 버그: 1336604

성능 패널의 새로운 상호작용 추적

성능 패널의 새로운 상호작용 트랙을 사용하여 상호작용을 시각화하고 잠재적인 응답성 문제를 추적하세요.

예를 들어 이 데모 페이지에서 성능 기록을 시작합니다. 커피를 클릭하고 녹화를 중지합니다. 상호작용 트랙에 두 개의 상호작용이 표시됩니다. 두 상호작용의 ID가 동일하므로 동일한 사용자 상호작용에서 상호작용이 트리거되었음을 알 수 있습니다.

Chromium 버그: 1347390

성능 통계 패널의 LCP 타이밍 분석

이제 성능 통계 패널에 최대 콘텐츠 렌더링 시간 (LCP)의 타이밍 분석이 표시됩니다. 이 타이밍 정보를 사용하여 LCP 성능을 개선할 기회를 파악하세요.

Chromium 버그: 1351735

레코더 패널에서 녹화 파일의 기본 이름 자동 생성

이제 레코더 패널에서 새 녹화 파일의 이름을 자동으로 생성합니다.

Chromium 버그: 1351383

기타 주요 내용

• 이전에는 레코더 확장 프로그램이 레코더 패널에 표시되지 않는 경우가 있었습니다. (1351416)
• 이제 스타일 창에 SVG <stop> 요소의 stop-color 속성에 대한 색상 선택기가 표시됩니다. (1351096)
• 성능 통계 패널에서 레이아웃 스래싱을 유발하는 스크립트를 레이아웃 변경의 잠재적 근본 원인으로 식별합니다. (1343019)
• 성능 통계 패널에 LCP 웹 글꼴의 중요 경로를 표시합니다. (1350390)

미리보기 채널 다운로드

Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 새로운 기능, 업데이트 또는 DevTools와 관련된 기타 사항을 논의하세요.

• crbug.com에서 의견 및 기능 요청을 제출합니다.
• DevTools에서 more_vert 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 알립니다.
• @ChromeDevTools에 트윗합니다.
• 'DevTools의 새로운 기능' YouTube 동영상 또는 'DevTools 팁' YouTube 동영상에 댓글을 남깁니다.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 내용의 목록입니다.