이 페이지는 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

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

탐색 창에서 관련 없는 파일을 숨기려면 무시 나열된 소스 숨기기를 사용 설정합니다. 이렇게 하면 개발자는 자신의 코드에만 집중할 수 있습니다.

이 데모를 엽니다. Sources 패널에서 node_modules 및 webpack는 서드 파티 스크립트입니다. 점 3개 메뉴를 클릭하고 무시 나열된 출처 숨기기를 선택하여 창에서 숨깁니다.

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

Chromium 버그: 1352488

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

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

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

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

Chromium 버그: 1336604

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

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

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

실적 패널의 상호작용 추적

Chromium 버그: 1347390

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

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

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

Chromium 버그: 1351735

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

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

Recorder 패널의 녹음 파일 기본 이름

Chromium 버그: 1351383

기타 주요 정보

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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