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에서 알려진 서드 파티 스크립트를 무시 목록에 자동으로 추가하므로 디버깅 중에 코드의 문제를 더 빠르게 파악할 수 있습니다.

이 데모를 열고 증분 버튼을 클릭합니다. Console에서 오류 메시지를 펼칩니다. 스택 트레이스에는 코드 (예: 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 실적을 개선할 수 있는 기회를 파악하고 이해하세요.

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

Chromium 버그: 1351735

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

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

Recorder 패널의 녹화 기본 이름

Chromium 버그: 1351383

기타 하이라이트

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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