DevTools의 새로운 기능 (Chrome 97)

Jecelyn Yeen

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

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

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

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

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

레코더 패널은 미리보기 기능입니다. Chrome팀은 최선을 다해 이 기능을 개발하고 있으며, 의견을 보내 주시면 기능을 더욱 개선하는 데 도움이 됩니다.

Recorder 패널

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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.