DevTools의 새로운 기능 (Chrome 101)

Jecelyn Yeen

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

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

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

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

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

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

Recorder 패널의 내보내기 옵션

Chromium 문제: 1257499

Styles 창에서 계단식 레이어 보기

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

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

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

Styles 창에서 계단식 레이어 보기

Chromium 문제: 1240596

hwb() 색상 함수 지원

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

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

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

hwb() 색상 함수

사유지 표시 개선

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

비공개 속성 관리

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

기타 주요 정보

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

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

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

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

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

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

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

Chromium 문제: 772558

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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