이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 97)

Jecelyn Yeen

미리보기 기능: 새 Recorder 패널

새 Recorder 패널을 사용하여 사용자 플로우를 기록, 재생, 측정합니다.

Recorder 패널을 엽니다. 화면의 안내를 따라 새 녹화를 시작합니다.

예를 들어 커피 주문 데모 애플리케이션으로 커피 결제 과정을 기록할 수 있습니다. 커피를 추가하고 결제 세부정보를 입력한 후 기록을 종료하거나, 프로세스를 다시 재생하거나, Measure performance(성능 측정) 버튼을 클릭하여 Performance(성능) 패널에서 사용자 플로우를 측정할 수 있습니다.

단계별 튜토리얼을 자세히 알아보려면 Recorder 패널 문서로 이동하세요.

Recorder 패널은 미리보기 기능입니다. Google팀에서는 이 문제를 해결하기 위해 최선을 다하고 있으며, 추가 개선을 위한 의견을 기다리고 있습니다.

Recorder 패널

Chromium 문제: 1257499

기기 모드에서 기기 목록 새로고침

기기 툴바 사용 설정: 이제 더 최신 기기가 기기 목록에 추가됩니다. 크기를 시뮬레이션할 기기를 선택합니다.

기기 모드에서 기기 목록 새로고침

Chromium 문제: 1223525

HTML로 편집을 사용한 자동 완성

이제 HTML로 편집 UI가 자동 완성 및 구문 강조표시를 지원합니다. 요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 HTML로 편집을 선택합니다. DOM 속성 (예: id, aria)을 입력해 보세요. 자동 완성 기능이 원하는 속성 이름을 찾는 데 도움이 됩니다.

HTML로 편집을 사용한 자동 완성

Chromium 문제: 1215072

코드 디버깅 환경 개선

이제 콘솔 출력 오류에 열 번호가 포함됩니다. 특히 최소화된 자바스크립트를 사용하는 디버깅에는 열 번호에 쉽게 액세스할 수 있어야 합니다.

출력 오류의 열 번호

Chromium 문제: 1073064

[실험용] 기기 간 DevTools 설정 동기화

이제 Chrome 프로필 동기화를 사용 설정하면 DevTools 설정이 기본적으로 여러 기기에서 동기화됩니다. Settings > Sync > Enable settings sync를 통해 DevTools 동기화 설정을 변경할 수 있습니다.

DevTools 동기화 설정

이 새로운 설정을 사용하면 여러 기기에서 더 쉽게 작업할 수 있습니다. 예를 들어 다음 디자인 설정은 동기화되므로 여러 기기에서 일관된 환경을 사용할 수 있으며 동일한 설정을 다시 정의할 필요가 없습니다. DevTools 맞춤설정에서 동기화 기능에 관해 자세히 알아보세요.

테마 설정

이 기능은 현재 실험 단계에 있으며 담당 팀에서도 적극적으로 노력하고 있습니다. 의견이 있는 경우 여기에서 공유해 주세요.

Chromium 문제: 1245541

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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