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

DevTools의 새로운 기능 (Chrome 97)

Jecelyn Yeen

미리보기 기능: 새 녹음기 패널

새 Recorder 패널을 사용하여 사용자 흐름을 기록, 재생, 측정합니다.

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

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

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

Recorder 패널은 미리보기 기능입니다. Google팀에서 아직 이 문제를 해결하기 위해 최선을 다하고 있으며, 추가적인 개선을 위해 의견을 보내주시기 바랍니다.

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, Dev 또는 베타를 기본 개발 브라우저로 사용해 보세요. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.

Chrome DevTools 팀에 문의하기

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

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