DevTools의 새로운 기능 (Chrome 101)

Jecelyn Yeen

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

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

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

그 외에도 녹음 파일을 내보낼 수도 있습니다. 사용자 흐름을 녹화한 후 내보내기 버튼을 클릭합니다. 내보내기 옵션은 세 가지가 있습니다.

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

문서에서 이러한 옵션 간의 차이점에 대해 자세히 알아보세요.

Recorder 패널의 내보내기 옵션

Chromium 문제: 1257499

스타일 창에서 계단식 레이어 보기

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

이 예에는 page, component, base라는 세 가지 캐스케이드 레이어가 정의되어 있습니다. 스타일 창에서 각 레이어와 스타일을 볼 수 있습니다.

레이어 순서를 보려면 레이어 이름을 클릭합니다. page 레이어의 특이성이 가장 높으므로 box 배경이 녹색입니다.

스타일 창에서 계단식 레이어 보기

Chromium 문제: 1240596

hwb() 색상 함수 지원

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

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

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

hwb() 색상 함수

비공개 속성 표시 개선

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

콘솔의 비공개 속성

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

기타 하이라이트

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

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

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

이제 Lighthouse 패널에서 기존 탐색 모드 외에도 사용자 흐름 측정에 관한 두 가지 모드인 기간 및 스냅샷을 지원합니다.

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

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

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

Chromium 문제: 772558

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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