DevTools 의 새로운 기능 (Chrome 101)

Published on Updated on

Translated to: English, Español, Português, 中文, Pусский, 日本語

이 게시글의 번역에는 조은님이 참여하였으며, 최원영님과 도창욱님이 리뷰를 맡아 주셨습니다.

DevTools를 개선하는 데 도움을 주고 싶으신가요? Google User Research 에 참여해보세요.

녹화된 유저 플로우를 JSON 파일로 내보내고 불러오기

이제 Recorder 패널에서 유저 플로우를 JSON 파일로 내보내거나 불러올 수 있습니다. 이 기능은 유저 플로우를 더 쉽게 공유할 수 있게 하고 버그 리포팅에 유용하게 쓰일 수 있습니다.

에를 들어, 다음 JSON 파일 을 다운로드 받아보세요. import 버튼을 사용해 파일을 불러온 뒤 유저 플로우를 다시 재생 할 수 있습니다.

그 외에도 녹화물을 내보낼 수도 있습니다. 유저 플로우를 녹화 한 뒤에 export 버튼을 클릭하세요. 다음과 같은 3가지 옵션이 있습니다:

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

이러한 옵션들 사이의 차이점에 대해 더 자세히 알고자 한다면 문서 를 참고하세요.

Recorder 패널의 export 옵션

Chromium issue: 1257499

스타일 창에서 cascade 레이어 보기

Cascade 레이어 를 사용하면 스타일별 충돌을 방지하기 위해 CSS 파일을 보다 명시적으로 제어할 수 있습니다. 이 기능은 대규모 코드베이스, 디자인 시스템, 애플리케이션 내부의 써드 파티 스타일을 관리할 때 특히 유용합니다.

다음 예제 에서는 page, component, base 라는 3가지 cascade 레이어가 정의되어 있습니다. 스타일 창에서 각 레이어와 스타일을 볼 수 있습니다.

레이어 이름을 클릭하고 레이어 순서를 살펴보세요. page 레이어가 가장 높은 특정성을 가지고 있어 box 의 배경색은 초록색으로 정의됩니다.

스타일 창에서 cascade 레이어 보기

Chromium issue: 1240596

hwb() 색상 함수 지원

DevTools에서 HWB 색상 포맷 을 보고 수정할 수 있습니다.

스타일 창에서 Shift 키를 누른 상태로 색상 프리뷰를 클릭하여 색상 포맷을 변경할 수 있습니다. HWB 색상 포맷이 추가되어있습니다.

혹은 컬러 피커 를 사용하여 HWB 색상 포맷을 변경할 수도 있습니다.

hwb() 색상 함수

private 속성 표시 개선

DevTools에서 private 접근자를 적절하게 평가하고 표시합니다. 이전에는 콘솔 이나 소스 패널에서 private 접근자로 클래스를 확장할 수 없었습니다.

콘솔 상의 private 속성

Chromium issues: 1296855, https://crbug.com/1303407

기타 하이라이트

이번 릴리스에서 주목할만한 수정 사항들입니다:

  • 뒤로/앞으로 캐쉬(혹은 bfcache) 에서 블락된 bfcache 익스텐션 ID를 표시합니다. ( 1284548)
  • 유사 배열 객체, CSS 클래스 이름, map.get 과 HTML 태그에 대한 자동 완성 지원이 수정되었습니다. (1297101, 1297491, 1293807, 1296983)
  • 단어를 더블 클릭하거나 자동 완성을 취소할 때 잘못된 하이라이트를 수정하였습니다. (1298437, 1298667)
  • 소스 패널에서 주석 키보드 단축키를 수정하였습니다. (1296535)
  • 소스 패널에서 Alt (Options) 키를 사용해 여러 곳을 선택하는 기능을 다시 지원합니다. (1304070)

[실험실 기능] Lighthouse 패널의 새로운 시간 범위 (timespan) 및 스냅샷 (snapshot) 모드

이 실험을 활성화하려면, 설정 > 실험 에서 Use Lighthouse panel with timespan and snapshot modes 체크박스를 활성화해야 합니다.

기존 navigation 모드와 별개로 Lighthouse 패널에서 유저 플로우를 측정하기 위한 timespan, snapshot 모드를 추가로 지원합니다.

예를 들어, timespan 보고서를 유저 인터렉션을 측정하기 위해 사용할 수 있습니다. 데모 페이지를 열어 Timespan 모드를 선택한 뒤 Start timespan 을 클릭하세요. 페이지에서 커피를 선택한 뒤 timespan을 종료하세요. 보고서를 읽어보면 인터렉션으로 인해 발생한 총 차단 시간누적 레이아웃 이동 을 찾을 수 있습니다.

각 모드에는 고유한 사용 사례, 이점, 제한 사항이 있습니다. 더 상세한 정보는 Lighthouse 문서 를 살펴보세요.

Lighthouse 패널에서 Timespan 과 snapshot 모드 지원

Chromium issue: 772558

프리뷰 채널 다운로드하기

Chrome Canary, Dev, Beta 를 기본 개발용 브라우저로 사용해보는 걸 검토해보세요. 프리뷰 채널에서는 최신 DevTools 기능들을 사용할 수 있고, 갓 나온 웹 플랫폼 API를 테스트해 볼 수 있으며, 사용자들이 사이트의 문제를 보기전에 미리 찾아낼 수 있습니다.

Chrome DevTools 팀과 이야기 나누기

아래 옵션을 사용하여 게시물의 새로운 기능 및 변경 사항, 또는 DevTools 관련된 기타 사항에 토론해보세요.

  • crbug.com 를 이용한 피드백 및 제안 전달하기.
  • DevTools 에서 More options   More   > Help > Report a DevTools issues 를 사용하여 DevTools 이슈 제보하기.
  • @ChromeDevTools 에 트윗하기.
  • What's new in DevTools YouTube 비디오 에 댓글 남기기.

더 많은 DevTools 기능

What's New In DevTools 영어 버전을 참고하여 관련 기능의 전체 목록을 볼 수 있습니다. 아래 콘텐츠들은 한국어로 번역된 콘텐츠들입니다.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.