DevTools의 새로운 기능 (Chrome 103)

Jecelyn Yeen

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

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

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

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

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

• Double-click은 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

요소 패널에서 창 재정렬

이제 Elements 패널에서 원하는 대로 창 순서를 변경할 수 있습니다.

예를 들어 좁은 화면에서 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가 사용 설정된 경우 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 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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