DevTools의 새로운 기능 (Chrome 103)

Jecelyn Yeen

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

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

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

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

Recorder에서 이러한 이벤트를 캡처한 방법을 이해하려면 단계를 펼치세요.

• 더블클릭은 type: doubleClick로 캡처됩니다.
• 마우스 오른쪽 버튼 클릭 이벤트는 type: click로 캡처되지만 button 속성이 secondary로 설정됩니다. 일반 마우스 클릭의 button 값은 primary입니다.

Chromium 문제: 1300839, 1322879, 1299701, 1323688

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

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

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

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

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

Lighthouse의 사용자 플로우를 참고하여 각 모드의 고유한 사용 사례, 이점, 제한사항에 관해 알아보세요.

Chromium 문제: 1291284

실적 통계 업데이트

성능 통계 패널의 확대/축소 컨트롤 개선

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

성능 통계에서 패널을 사용하여 실행 가능한 통계를 얻고 웹사이트의 성능을 개선하는 방법을 알아보세요.

Chromium 문제: 1313382

공연 녹화 파일 삭제 확인

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

Chromium 문제: 1318087

요소 패널에서 창 재정렬

이제 환경설정에 따라 요소 패널에서 창의 순서를 변경할 수 있습니다.

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

Chromium 문제: 1146146

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

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

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

Chromium 문제: 1245191

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

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

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

Chromium 문제: 1316340

가상 인증자에 큰 blob 지원

이제 WebAuthn 탭에 가상 인증자를 위한 새로운 대용량 blob 지원 체크박스가 있습니다.

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

Chromium 문제: 1321803

소스 패널의 새로운 단축키

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

• Control / Command + Shift + Y를 눌러 탐색 사이드바 (왼쪽) 전환
• Control / Command + Shift + H를 사용하여 디버거 사이드바 (오른쪽) 전환

Chromium 문제: 1226363

소스 맵 개선사항

이전에는 개발자가 다음 작업 중에 임의의 오류가 발생했습니다.

• Codepen 예시를 사용한 디버깅
• Codepen 예시에서 성능 문제의 소스 위치 식별
• React DevTools가 사용 설정되어 있을 때 구성요소 탭이 누락됨

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

• 인라인 스크립트 및 소스 위치의 위치와 오프셋 간의 매핑 수정
• 프레임의 텍스트 위치에 대체 정보를 사용합니다.
• 프레임 URL로 상대 URL 제대로 확인

Chromium 문제: 1319828, 1318635, 1305475

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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