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

DevTools의 새로운 기능 (Chrome 103)

Jecelyn Yeen

Recorder 패널에서 더블클릭 및 마우스 오른쪽 버튼 클릭 이벤트 캡처

이제 Recorder 패널에서 더블클릭 및 마우스 오른쪽 버튼 클릭 이벤트를 캡처할 수 있습니다.

Recorder 패널에서 더블클릭 및 마우스 오른쪽 버튼 클릭 이벤트 캡처

이 예에서는 녹화를 시작하고 다음 단계를 실행해 보세요.

카드를 더블클릭하여 확대합니다.
카드를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 작업을 선택합니다.

Recorder가 이러한 이벤트를 캡처한 방법을 이해하려면 단계를 펼칩니다.

Double-click이 type: doubleClick로 캡처됩니다.
마우스 오른쪽 버튼 클릭 이벤트는 type: click로 캡처되지만 button 속성이 secondary로 설정됩니다. 정상적인 마우스 클릭의 button 값은 primary입니다.

Chromium 문제: 1300839, 1322879, 1299701, 1323688

Lighthouse 패널의 새로운 기간 및 스냅샷 모드

이제 Lighthouse를 사용하여 페이지 로드 이상의 웹사이트 성능을 측정할 수 있습니다.

Lighthouse 패널의 새로운 기간 및 스냅샷 모드

이제 Lighthouse 패널에서 다음 세 가지 사용자 흐름 측정 모드를 지원합니다.

탐색 보고서는 단일 페이지 로드를 분석합니다. 탐색은 가장 일반적인 보고서 유형입니다. 현재 버전 이전의 모든 Lighthouse 보고서는 탐색 보고서입니다.
기간 보고서는 일반적으로 사용자 상호작용을 포함하는 임의의 기간을 분석합니다.
스냅샷 보고서는 특정 상태의 페이지(일반적으로 사용자가 상호작용한 후)를 분석합니다.

예를 들어 이 데모 페이지에서 장바구니에 상품을 추가할 때의 실적을 측정해 보겠습니다. 기간 모드를 선택하고 시작 시간 범위를 클릭합니다. 스크롤하여 몇 가지 상품을 장바구니에 추가합니다. 완료되면 종료 기간을 클릭하여 사용자 상호작용에 대한 Lighthouse 보고서를 생성합니다.

기간 모드

각 모드의 고유한 사용 사례, 이점, 제한사항에 관해 알아보려면 Lighthouse의 사용자 흐름을 참고하세요.

Chromium 문제: 1291284

성능 통계 업데이트

실적 통계 패널의 확대/축소 제어 개선

이제 DevTools가 플레이헤드 위치가 아닌 마우스 커서를 기반으로 확대됩니다.최신 커서 기반 확대/축소를 사용하면 마우스를 트랙의 원하는 위치로 이동하고 원하는 영역으로 즉시 확대할 수 있습니다.

실적 통계에서 패널을 활용해 활용 가능한 분석 정보를 얻고 웹사이트 실적을 개선하는 방법을 알아보세요.

Chromium 문제: 1313382

공연 녹음 파일 삭제 확인

이제 DevTools에서 성능 기록을 삭제하기 전에 확인 대화상자를 표시합니다.

공연 녹음 파일 삭제 확인

Chromium 문제: 1318087

요소 패널에서 창 재정렬

이제 환경설정에 따라 Elements 패널에서 창을 재정렬할 수 있습니다.

예를 들어 좁은 화면에서 DevTools를 열면 접근성 창이 더보기 버튼 아래에 숨겨집니다. 접근성 문제를 자주 디버그하는 경우 이제 창을 앞으로 드래그하여 더 쉽게 액세스할 수 있습니다.

요소 패널에서 창 재정렬

Chromium 문제: 1146146

브라우저 외부에서 색상 선택

이제 DevTools에서 브라우저 외부에서 색상을 선택할 수 있습니다. 이전에는 브라우저 내에서만 색상을 선택할 수 있었습니다.

스타일 창에서 색상 미리보기를 클릭하여 색상 선택 도구를 엽니다. 스포이트를 사용하여 어디서나 색상을 선택하세요.

브라우저 외부에서 색상 선택

Chromium 문제: 1245191

디버깅 중 인라인 값 미리보기 개선

이제 디버거에 인라인 값 미리보기가 올바르게 표시됩니다.

이 예시에서 double 함수에는 입력 매개변수 a 및 변수 x가 있습니다. return 줄에 중단점을 배치하고 코드를 실행합니다. 인라인 미리보기에는 a 및 x 값이 올바르게 표시됩니다. 이전에는 디버거의 인라인 미리보기에 x 값이 표시되지 않았습니다.

디버깅 중 인라인 값 미리보기 개선

Chromium 문제: 1316340

가상 인증자를 위한 대형 blob 지원

WebAuthn 탭에 가상 인증자를 위한 새로운 대형 blob 지원 체크박스가 추가되었습니다.

이 체크박스는 기본적으로 사용 중지되어 있습니다. 상주 키를 지원하는 ctap2 프로토콜을 사용하는 인증자에 대해서만 사용 설정할 수 있습니다.

가상 인증자를 위한 대형 blob 지원

Chromium 문제: 1321803

소스 패널의 새로운 단축키

이제 소스 패널에서 두 가지 새로운 단축키를 사용할 수 있습니다.

Control / Command + Shift + Y를 눌러 탐색 사이드바 (왼쪽) 전환
Control / Command + Shift + H로 debugger 사이드바 (오른쪽)를 전환합니다.

소스 패널의 새로운 단축키

Chromium 문제: 1226363

소스 맵 개선사항

이전에는 다음과 같은 중에 개발자가 무작위 오류를 경험했습니다.

Codepen을 사용한 디버깅 예시
Codepen 예시에서 성능 문제의 소스 위치 식별
React DevTools가 사용 설정된 경우 Component 탭이 누락됨

다음은 전반적인 디버깅 환경을 개선하기 위해 소스 맵에 대한 몇 가지 수정사항입니다.

인라인 스크립트 및 소스 위치의 위치와 오프셋 간의 매핑 수정
프레임의 텍스트 위치에 대체 정보 사용
프레임 URL로 상대 URL을 올바르게 확인

Chromium 문제: 1319828, 1318635, 1305475

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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