DevTools의 새로운 기능 (Chrome 97)

미리보기 기능: 새 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 동영상에 댓글을 남겨주세요.

DevTools의 새로운 기능

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

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59