DevTools 의 새로운 기능 (Chrome 97)

Published on Updated on

Translated to: English, Español, Português, 中文, Pусский, 日本語

이 게시글의 번역에는 조은님이 참여하였으며, 최원영님과 도창욱님이 리뷰를 맡아 주셨습니다.

DevTools를 개선하는 데 도움을 주고 싶으신가요? Google User Research 에 참여해보세요.

프리뷰 기능: 새로운 Recorder 패널

새로 나온 Recorder 패널을 사용해서 사용자의 플로우를 녹화하여 다시 재생하고 측정해보세요

Recorder 패널 열기. 화면의 지시에 따라 새 녹화를 시작합니다.

예를 들어 커피 주문 데모 애플리케이션에서 커피 구매 프로세스를 녹화해볼 수 있습니다. 커피를 추가한 뒤 주문 상세를 넣은 뒤, 녹화를 끝낼 수 있으며, 프로세스를 다시 재생하거나 Measure performance 버튼을 클릭하여 Performance 패널에서 사용자의 플로우를 측정할 수 있습니다.

단계별 튜토리얼을 보려면 Recorder 패널 문서 를 살펴보세요.

Recorder 패널은 프리뷰 기능입니다. Chrome 팀에서는 더 나은 개선을 위해 여러분의 피드백을 기대하고 있으며 열심히 작업하고 있습니다.

Recorder 패널

Chromium issue: 1257499

Device Mode 의 기기 목록 갱신

기기 툴바를 활성화하면 기기 목록에 더 많은 최신 기기가 추가됩니다. 해상도를 시뮬레이션할 기기를 선택하세요.

Device Mode의 기기 목록 갱신

Chromium issue: 1223525

HTML로 수정에서 자동완성

HTML로 수정 UI 에서 자동 완성과 문법 강조를 지원합니다. 요소 패널의 요소에서 우클릭한 뒤, HTML로 수정 을 선택하세요. DOM 속성 (예시: id, aria)을 작성해보세요, 자동 완성은 여러분이 찾고 있는 속성명을 찾는데 도움이 될 것입니다.

HTML로 수정에서 자동완성

Chromium issue: 1215072

코드 디버깅 경험 개선

이제 열 번호가 Console의 출력 오류에 포함됩니다. 특히 압축된 (minified) 자바스크립트로 디버깅하려면 열 번호에 쉽게 접근할 수 있어야 합니다.

에러 출력에서 열 번호 노출

Chromium issue: 1073064

[실험실 기능] 여러 기기 사이의 DevTools 설정 동기화

Chrome 프로필 동기화를 활성화하였을 때 DevTools 설정이 기본적으로 여러 기기에서 동기화됩니다. DevTools 동기화 설정은 설정 > 동기화 > 설정 동기화 사용 에서 변경 가능합니다.

DevTools 동기화 설정

이 새로운 설정은 여러 기기를 통해 작업하는 것을 더 수월하게 해줄 것입니다. 예를 들어, 다음과 같은 디자인 설정이 여러 기기에서 동기화되어 일관된 경험을 제공할 수 있으며 같은 세팅을 여러번 재정의할 필요가 없어집니다. 동기화 기능에 대한 더 자세한 내용은 DevTools 맞춤 설정 에서 살펴보세요.

디자인 설정

이 기능은 현재 실험실 기능이며, Chrome 팀에서 해당 기능을 작업하고 있습니다. 피드백은 여기 를 통해 Chorme 팀에 공유해주세요.

Chromium issue: 1245541

프리뷰 채널 다운로드하기

Chrome Canary, Dev, Beta 를 기본 개발용 브라우저로 사용해보는 걸 검토해보세요. 프리뷰 채널에서는 최신 DevTools 기능들을 사용할 수 있고, 갓 나온 웹 플랫폼 API를 테스트해 볼 수 있으며, 사용자들이 사이트의 문제를 보기전에 미리 찾아낼 수 있습니다.

Chrome DevTools 팀과 이야기 나누기

아래 옵션을 사용하여 게시물의 새로운 기능 및 변경 사항, 또는 DevTools 관련된 기타 사항에 토론해보세요.

  • crbug.com 를 이용한 피드백 및 제안 전달하기.
  • DevTools 에서 More options   More   > Help > Report a DevTools issues 를 사용하여 DevTools 이슈 제보하기.
  • @ChromeDevTools 에 트윗하기.
  • What's new in DevTools YouTube 비디오 에 댓글 남기기.

더 많은 DevTools 기능

What's New In DevTools 영어 버전을 참고하여 관련 기능의 전체 목록을 볼 수 있습니다. 아래 콘텐츠들은 한국어로 번역된 콘텐츠들입니다.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.