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

DevTools의 새로운 기능 (Chrome 101)

Jecelyn Yeen

기록된 사용자 플로우를 JSON 파일로 가져오고 내보내기

이제 Recorder 패널에서 사용자 플로우 녹음 파일을 JSON 파일로 가져오고 내보낼 수 있습니다. 이렇게 하면 사용자 플로우를 더 쉽게 공유할 수 있으며 버그 신고에도 유용할 수 있습니다.

예를 들어 이 JSON 파일을 다운로드합니다. 가져오기 버튼을 사용하여 가져오고 사용자 플로우를 재생할 수 있습니다.

그 외에도 녹음 파일을 내보낼 수도 있습니다. 사용자 플로우를 기록한 후 내보내기 버튼을 클릭합니다. 다음과 같은 3가지 내보내기 옵션이 있습니다.

JSON 파일로 내보냅니다. 녹음 파일을 JSON 파일로 다운로드합니다.
@puppeteer/replay 스크립트로 내보냅니다. 녹화 파일을 Puppeteer Replay 스크립트로 다운로드합니다.
Puppeteer 스크립트로 내보냅니다 . 녹화 파일을 Puppeteer 스크립트로 다운로드합니다.

이러한 옵션 간의 차이점에 대해 자세히 알아보려면 문서를 참조하세요.

Recorder 패널의 내보내기 옵션

Chromium 문제: 1257499

Styles 창에서 캐스케이드 레이어 보기

계단식 레이어를 사용하면 CSS 파일을 더 명확하게 제어하여 스타일 특이성 충돌을 방지할 수 있습니다. 이는 대규모 코드베이스, 디자인 시스템, 애플리케이션에서 타사 스타일을 관리할 때 특히 유용합니다.

이 예시에는 page, component, base 등 3개의 캐스케이드 레이어가 정의되어 있습니다. 스타일 창에서 각 레이어와 스타일을 확인할 수 있습니다.

레이어 이름을 클릭하여 레이어 순서를 확인합니다. page 레이어의 특정성이 가장 높으므로 box 배경은 녹색입니다.

Styles 창에서 캐스케이드 레이어 보기

Chromium 문제: 1240596

hwb() 색상 함수 지원

이제 DevTools에서 HWB 색상 형식을 보고 수정할 수 있습니다.

스타일 창에서 Shift 키를 누른 상태에서 색상 미리보기를 클릭하여 색상 형식을 변경합니다. HWB 색상 형식이 추가됩니다.

또는 색상 선택 도구에서 색상 형식을 HWB로 변경할 수 있습니다.

hwb() 색상 함수

사유지 표시 개선

이제 DevTools에서 비공개 접근자를 올바르게 평가하고 표시합니다. 이전에는 Console 및 Sources 패널에서 비공개 접근자가 있는 클래스를 확장할 수 없었습니다.

비공개 속성

Chromium 문제: 1296855, https://crbug.com/1303407

기타 주요 사항

다음은 이번 버전에서 주목할 만한 수정사항입니다.

bfcache가 있는 경우 차단한 확장 프로그램 ID가 이제 뒤로-앞으로 캐시에 표시됩니다.( 1284548)
배열과 유사한 객체, CSS 클래스 이름, map.get 및 HTML 태그에 대한 자동 완성 지원을 수정했습니다. (1297101, 1297491, 1293807, 1296983)
단어를 더블클릭하고 자동 완성을 실행취소할 때 잘못 강조표시되는 문제가 해결되었습니다. 추가했습니다. (1298437, 1298667)
Sources 패널의 댓글 단축키가 수정되었습니다. 추가했습니다. (1296535)
소스 패널에서 다중 선택을 위한 Alt (옵션) 키 사용에 대한 지원을 다시 사용 설정합니다. 추가했습니다. (1304070)

[실험용] Lighthouse 패널의 새로운 기간 및 스냅샷 모드

기존 탐색 모드 외에도 Lighthouse 패널에서 이제 사용자 플로우를 측정할 때 기간 및 스냅샷이라는 두 가지 모드를 추가로 지원합니다.

예를 들어 기간 보고서를 사용하여 사용자 상호작용을 분석할 수 있습니다. 이 데모 페이지를 엽니다. 기간 모드를 선택하고 시작 시간 범위를 클릭합니다. 페이지에서 커피를 클릭하고 기간을 종료합니다. 보고서를 읽고 상호작용으로 인해 발생한 총 차단 시간과 레이아웃 변경 횟수를 확인합니다.

각 모드에는 고유한 사용 사례, 이점, 제한사항이 있습니다. 자세한 내용은 Lighthouse 문서를 참고하세요.

Lighthouse 패널하우스의 기간 및 스냅샷 모드

Chromium 문제: 772558

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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