DevTools 의 새로운 기능 (Chrome 103)

Published on Updated on

Translated to: English, Español

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

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

Recorder 패널에서 더블 클릭 & 우 클릭 이벤트 캡쳐하기

Recorder 패널에서 더블 클릭 & 우 클릭 이벤트를 캡쳐할 수 있습니다.

Recorder 패널에서 더블 클릭 & 우 클릭 이벤트 캡쳐하기

다음 예제 에서, recording 을 시작하고 아래 스텝을 따라해보세요:

  • 카드를 더블 클릭하면 확대됩니다.
  • 카드를 우클릭하고 컨텍스트 메뉴에서 동작을 선택하세요.

Recorder 가 어떻게 이러한 이벤트를 캡쳐하는지 이해하려면, 다음 단계로 확장하세요:

  • 더블 클릭type: doubleClick 으로 캡쳐됩니다.
  • 우 클릭 이벤트는 type: click 으로 캡쳐되지만 button 속성은 secondary 로 설정됩니다. 일반적인 마우스 클릭의 button 값은 primary 입니다.

Chromium issues: 1300839, 1322879, 1299701, 1323688

Lighthouse 패널에서 새로 출시된 timespan과 snapshot 모드

이제 Lighthouse 에서 페이지 로딩 이상의 웹사이트 성능을 측정할 수 있습니다.

Lighthouse 패널에서 새로 출시된 timespan과 snapshot 모드

Lighthouse 패널은 이제 유저 플로우 측정을 위해 3가지 모드를 지원합니다.

  • Navigation 리포트는 단일 페이지 로딩을 측정합니다. Navigation은 가장 보편적인 보고 형태입니다. 이전 버전의 모든 Lighthouse 리포트는 navigation 리포트입니다.
  • Timespans 리포트는 일반적으로 유저 인터렉션을 포함한 임의의 기간을 분석합니다.
  • Snapshots 리포트는 일반적으로 유저가 인터렉션한 후 특정 상태의 페이지를 분석합니다.

예를 들어, 다음 데모 페이지 에서 카트에 아이템을 넣는 과정의 성능을 측정해본다고 해봅시다. Timespan 모드를 선택하고 Start timespan 를 클릭하세요. 스크롤한 뒤 몇 개 아이템을 카트에 넣어봅시다. 끝나고 나면, End timespan 을 클릭하여 유저 인터렉션에 대한 Lighthouse 리포트를 생성할 수 있습니다.

Timespan 모드

Lighthouse의 유저 플로우 를 통해 각 모드에 대한 훌륭한 유즈 케이스, 혜택, 그리고 한계점을 알 수 있습니다.

Chromium issue: 1291284

Performance Insights 업데이트

Performance Insights 패널에서 zoom 컨트롤 개선

DevTools 는 이제 재생 헤드 위치가 아닌 마우스 커서를 기반으로 줌됩니다. 커서 기반 줌을 사용하면 트랙 내 어디에나 마우스를 옮겨 원하는 곳으로 줌 인 할 수 있습니다.

Performance Insights 에서 패널을 통해 실천 가능한 인사이트를 얻고 웹사이트의 성능의 최적화 방법을 배울 수 있습니다.

Chromium issue: 1313382

성능 레코딩 삭제 확인

DevTools에서 성능 레코딩을 삭제 하기 전에 확인창을 노출합니다.

성능 레코딩 삭제 확인

Chromium issue: 1318087

요소 패널에서 창 재배치하기

설정에 따라 요소 패널에서 창을 재배치할 수 있습니다.

예를 들어, DevTools가 좁은 스크린에서 열렸을 때 Accessibility 창은 더 보기 버튼 아래로 사라집니다. 만약 자주 접근성 이슈를 디버깅한다면, 더 쉽게 접근하기 위해 창을 전면으로 드래그할 수 있습니다.

요소 패널에서 창 재배치하기

Chromium issue: 1146146

브라우저 밖의 색상 선택하기

DevTools 에서 브라우저 밖의 색상을 선택할 수 있게 지원합니다. 이전에는 브라우저 내 색상만 선택할 수 있었습니다.

Styles 창에서 아무 색상 프리뷰를 클릭하여 컬러 피커를 여세요. 스포이드를 사용하여 어디서나 색상을 선택할 수 있습니다.

브라우저 밖의 색상 선택하기

Chromium issue: 1245191

디버깅 중 인라인 값 미리보기 개선

디버거에서 인라인 값 미리보기를 정확하게 보여줍니다.

다음 예제에서, double 함수는 입력 인자로 a 와 변수인 x 를 가지고 있습니다. return 라인에 브레이크포인트를 걸고 코드를 실행해보세요. 인라인 미리보기에서 ax 값을 정확하게 보여줍니다. 이전에는 디버거가 인라인 미리보기에서 x 값을 보여주지 않았습니다.

디버깅 중 인라인 값 미리보기 개선

Chromium issue: 1316340

가상 인증자를 위한 대용량 Blob 지원

가상 인증자를 지원하기 위해 WebAuthn 탭에 새로 Supports large blob 체크박스가 추가되었습니다.

이 체크박스는 비활성화 상태가 기본입니다. 레지던트 키를 지원하는 ctap2 프로토콜을 사용한 인증자만 지원하고 있습니다.

가상 인증자를 위한 대용량 Blob 지원

Chromium issue: 1321803

소스 패널에서 새로운 키보드 단축키 지원

소스 패널에서 키보드 단축키를 두가지 더 지원합니다.

  • 좌측 navigation 사이드바 토글하기 Control / Command + Shift + Y
  • 우측 navigation 사이드바 토글하기 Control / Command + Shift + H
소스 패널에서 새로운 키보드 단축키 지원

Chromium issues: 1226363

소스맵 개선

이전에는 개발자가 다음과 같은 상황에서 불규칙한 오류를 겪었습니다.

  • Codepen 예제를 디버깅할 때
  • Codepen 예제에서 성능 이슈의 소스 위치를 특정할 때
  • React DevTools 가 활성화되어있을 때 Component 탭의 부재

디버깅 경험의 전반을 개선하기 위해 소스맵을 일부 수정하였습니다.

  • 인라인 스크립트 및 소스 위치에 대한 위치에 오프셋 간의 올바른 매칭
  • 프레임의 텍스트 위치에 대한 대체 정보 사용
  • 프레임의 URL로 상대 url을 적절하게 해결

Chromium issues: 1319828, 1318635, 1305475

프리뷰 채널 다운로드하기

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 103

Chrome 102

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.