DevTools의 새로운 기능 (Chrome 103)

Jecelyn Yeen

레코더 패널에서 더블클릭 및 오른쪽 클릭 이벤트 캡처

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

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

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

레코더가 이러한 이벤트를 캡처한 방법을 알아보려면 단계를 펼치세요.

• 더블클릭은 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 탭에 가상 인증자를 위한 새로운 Supports large 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, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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