DevTools의 새로운 기능 (Chrome 97)

Jecelyn Yeen

미리보기 기능: 새로운 Recorder 패널

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

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

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

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

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

녹음기 패널

Chromium 문제: 1257499

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

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

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

Chromium 문제: 1223525

HTML로 수정으로 자동 완성

이제 HTML로 수정 UI에서 자동 완성과 구문 강조 표시를 지원합니다. 요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 HTML로 수정을 선택합니다. DOM 속성 (예: id, aria)을 입력해 보세요. 자동 완성 기능을 사용하면 원하는 속성 이름을 찾을 수 있습니다.

HTML로 수정으로 자동 완성

Chromium 문제: 1215072

코드 디버깅 환경 개선

이제 열 번호가 콘솔의 출력 오류에 포함됩니다. 특히 축소된 JavaScript를 디버그할 때는 열 번호에 쉽게 액세스할 수 있어야 합니다.

출력 오류의 열 번호

Chromium 문제: 1073064

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

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

DevTools 동기화 설정

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

테마 설정

이 기능은 현재 실험 단계이며 담당 팀에서 계속해서 작업하고 있습니다. 의견이 있으시면 여기에서 공유해 주세요.

Chromium 문제: 1245541

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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