DevTools 의 새로운 기능 (Chrome 100)

Published on 2022년 3월 8일 화요일 • Updated on 2022년 3월 8일 화요일

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

Google 의 Chrome DevTools 팀에서 일하는 Developer Advocate 입니다

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

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

Chrome 100

드디어 Chrome의 100번째 버전이 발표되었습니다! 크롬 DevTools 도 계속해서 웹 개발자들을 위해 더 신뢰감 높은 도구를 제공할 것입니다. What's New 탭을 눌러 마일스톤을 축하할 수 있도록 시간을 잠시 내 주세요.

언제나처럼 What’s New in DevTools video 이미지를 클릭하면 클릭하면 새로운 기능을 소개하는 영상이 재생됩니다.

스타일 창의 규칙에서 @supports 보고 편집하기

스타일 창에서 CSS @supports 규칙을 확인하고 편집할 수 있게 되었습니다. 이 기능은 개발자들이 실시간으로 at-rules 규칙을 더 쉽게 실험할 수 있도록 합니다.

데모 페이지를 열고 <div class=”box”> 요소를 검사하고, 스타일 창에서 @supports at-rules를 확인해 보세요. 그리고 이를 편집하기 위해서는 규칙의 선언 부분을 클릭하면 됩니다.

Chromium issues: 1222574, 1222573

Recorder 창 개선

공통 셀렉터를 기본으로 지원

기록하는 동안 고유한 셀렉터를 결정할 때, Recorder 패널은 자동으로 다음 속성을 가지는 요소들을 우선시하게 됩니다.

data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing

위 속성들은 자동화 테스트에서 사용되는 공통 셀렉터들입니다.

예를 들어, 데모 페이지에서 start a new recording을 클릭합니다. 이메일 주소를 기입하고 셀렉터 값을 관찰해 보세요.

이메일 요소가 data-testid 를 정의하도록 했으므로, 이것이 자동적으로 id 나 class 속성 대신에 셀렉터로써 사용됩니다.

Recording의 셀렉터 커스터마이징

만일 공통 셀렉터를 사용하고 있지 않다면, recording의 셀렉터를 커스터마이징할 수 있습니다.

예를 들어, 데모 페이지는 data-automate 속성을 셀렉터로서 사용하고 있습니다. start a new recording 을 클릭하고 data-automate 를 셀렉터 속성으로 넣습니다. 이메일 주소를 채우고, 셀렉터 값([data-automate=email-address])을 관찰해 보세요.

기록의 이름 바꾸기

여러분은 이제 Recorder 창에서 기록 제목 옆의 편집 버튼(연필 아이콘)을 이용해 녹화된 기록의 이름을 바꿀 수 있습니다.

마우스를 올려서 클래스/함수 속성 미리보기

소스 코드에서 오직 함수 이름과 위치로의 링크만을 보여 주던 이전과는 달리, 이제 디버깅하는 동안 여러분은 소스 창에서 클래스 혹은 함수 위로 마우스를 올려 속성을 미리 볼 수 있게 되었습니다.

Preview class/function properties on hover

Chromium issue: 1049947

성능 창에서의 유휴 상태 프레임

이제 성능을 기록할 때 우리는 프레임 타임라인에서 새로운 프레임 카테고리인 "유휴 상태 프레임"을 볼 수 있습니다.

이전에는, 프레임 타임라인은 지연된 메인 스레드 작업을 가진 프레임들을 "저하된 프레임" 으로서 시각화했습니다. 그러나, 몇몇 프레임이 여전히 컴포지터 스레드에 의한 시각적 업데이트를 생성하는 경우가 존재했습니다.

"저하된 프레임"들의 스크린샷들이 여전히 시각적 업데이트를 반영하고 있었기 때문에 따라서 이는 유저들에게 혼란을 야기했습니다.

새로운 "유휴 상태 프레임"은 몇몇 내용들이 프레임에 적시에 표시되지는 않을지라도, 그 이슈가 시각적인 업데이트를 막을 만큼 심각하지 않다는 것을 더욱 직관적으로 표시하는 것을 목표로 하고 있습니다.

Partially presented frames in the Performance panel

Chromium issue: 1261130

기타 하이라이트

이번 릴리스에는 몇몇 주목할 만한 수정사항이 포함되어 있습니다.

에뮬레이팅 디바이스 에 대한 아이폰 유저 에이전트 String이 업데이트되었습니다. 5 이후의 모든 iPhone이 user-agent 스트링으로서 iPhone OS 13_2_3을 가지고 있었습니다.(1289553)

이제 스니펫을 직접적으로 자바스크립트 파일에 저장할 수 있습니다. 이전에는 여러분이 직접 .js 파일 확장자를 추가해 주어야 했습니다.(1137218)

소스맵을 이용해 디버깅 시 스코프 변수 이름이 소스 패널에 정확하게 표시되도록 개선되었습니다. 이전 버전에서는 소스맵이 제공되었음에도, 소스 패널이 오직 간소화된 스코프 변수 이름을 표시하고 있었습니다. (1294682)

페이지 로딩 시 소스 패널이 현재 스크롤 위치를 정확하게 되돌리도록 개선되었습니다. 이전 버전에서는 스크롤 위치가 정확하게 복원되지 않아 디버깅 시 불편함을 야기하는 문제가 있었습니다. (1294422)

프리뷰 채널 다운로드하기

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

Chrome DevTools 팀과 이야기 나누기

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

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

더 많은 DevTools 기능

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

DevTools 의 새로운 기능 (Chrome 100)

Chrome 100

스타일 창의 규칙에서 @supports 보고 편집하기