이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

실적 패널의 새로운 상호작용 트랙

실적 패널의 새로운 상호작용 트랙을 사용하여 상호작용을 시각화하고 잠재적인 응답성 문제를 추적할 수 있습니다.

예를 들어 이 데모 페이지에서 공연 녹화를 시작하세요. 커피를 클릭하고 기록을 중지합니다. 두 가지 상호작용이 Interactions(상호작용) 트랙에 표시됩니다. 두 상호작용의 ID가 동일하며, 이는 상호작용이 동일한 사용자 상호작용에서 트리거되었음을 나타냅니다.

Performance 패널의 상호작용 트랙

Chromium 버그: 1347390

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

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

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

Chromium 버그: 1351735

녹음기 패널에서 녹음 파일의 기본 이름 자동 생성

이제 Recorder 패널에서 새 녹음 파일의 이름을 자동으로 생성합니다.

녹음기 패널에 있는 녹음 파일의 기본 이름

Chromium 버그: 1351383

기타 주요 사항

이전에는 때때로 녹음기 확장 프로그램이 녹음기 패널에 표시되지 않았습니다. 추가했습니다. (1351416)
이제 스타일 창에 SVG <stop> 요소의 stop-color 속성에 관한 색상 선택 도구가 표시됩니다. 추가했습니다. (1351096)
성능 통계 패널에서 레이아웃 변경의 잠재적 근본 원인으로 레이아웃 스래싱을 유발하는 스크립트를 확인하세요. 수정합니다. (1343019)
실적 통계 패널에 LCP 웹 글꼴의 주요 경로를 표시합니다. 추가했습니다. (1350390)

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.