DevTools의 새로운 기능 (Chrome 106)

Jecelyn Yeen

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

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

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

Chromium 버그: 1352488

스택 트레이스 개선

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

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

예를 들어 이 데모를 열고 증분 버튼을 클릭합니다. Console에서 오류 메시지를 펼칩니다. 소스 코드에서 이 작업에는 비동기 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

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

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

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

Chromium 버그: 1352488

명령 메뉴에서 무시된 파일 숨기기

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

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

Chromium 버그: 1336604

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

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

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

Chromium 버그: 1347390

성능 통계 패널의 LCP 시간 분석

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

Chromium 버그: 1351735

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

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

Chromium 버그: 1351383

기타 하이라이트

• 이전에는 Recorder 확장 프로그램이 Recorder 패널에 표시되지 않는 경우가 있었습니다. (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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.