DevTools의 새로운 기능 (Chrome 101)

Jecelyn Yeen

기록된 사용자 흐름을 JSON 파일로 가져오고 내보내기

이제 레코더 패널에서 사용자 흐름 녹화 파일을 JSON 파일로 가져오고 내보낼 수 있습니다. 이 기능이 추가되어 사용자 흐름을 더 쉽게 공유할 수 있으며 버그 신고에 유용할 수 있습니다.

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

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

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

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

레코더 패널의 내보내기 옵션

Chromium 문제: 1257499

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

캐스케이드 레이어를 사용하면 스타일 특이성 충돌을 방지하기 위해 CSS 파일을 더 명시적으로 제어할 수 있습니다. 이는 특히 대규모 코드베이스, 디자인 시스템, 애플리케이션에서 서드 파티 스타일을 관리할 때 유용합니다.

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

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

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

Chromium 문제: 1240596

hwb() 색상 함수 지원

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

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

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

hwb() 색상 함수

비공개 속성 표시 개선

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

콘솔의 비공개 속성

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

기타 주요 내용

이번 출시 버전의 주목할 만한 수정사항은 다음과 같습니다.

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

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

이제 Lighthouse 패널에서 기존 탐색 모드 외에 사용자 흐름을 측정하는 두 가지 모드(기간 및 스냅샷)를 추가로 지원합니다.

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

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

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

Chromium 문제: 772558

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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