이 페이지는 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 패널에서 다음 3가지 모드의 사용자 흐름 측정을 지원합니다.

탐색 보고서에서는 단일 페이지 로드를 분석합니다. 탐색은 가장 일반적인 보고서 유형입니다. 현재 버전 이전의 모든 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, Dev 또는 베타를 기본 개발 브라우저로 사용해 보세요. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.

Chrome DevTools 팀에 문의하기

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

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