DevTools 의 새로운 기능 (Chrome 99)

Published on 2022년 2월 21일 월요일 • Updated on 2022년 2월 21일 월요일

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

Jecelyn Yeen

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

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

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

웹 소켓 요청 쓰로틀링

네트워크 패널에서 웹 소켓 요청에 대한 쓰로틀링을 지원합니다. 이전에는 웹 소켓 요청에 대한 네트워크 쓰로틀링은 동작하지 않았습니다.

네트워크 패널을 열고 웹 소켓 요청을 클릭한 뒤 Messages 탭에서 메시지 이동을 측정할 수 있습니다. Slow 3G 를 선택해서 쓰로틀을 걸어보세요.

Chromium 이슈: 423246

애플리케이션 패널에 Reporting API 창 추가

Reporting API 창을 사용하여 페이지에서 생성된 보고서와 그 상태를 모니터링할 수 있습니다.

Reporting API 는 페이지에 대한 보안 위험도, 더 이상 사용되지 않는 API 호출 등을 모니터링하는 데 도움을 주도록 설계되었습니다.

Reporting API 를 사용하고자 하는 페이지에 접속하세요 (예시: demo page). 애플리케이션 패널에서 스크롤을 내려 백그라운드 서비스 영역의 Reporting API 창을 선택하세요.

Reports 영역에서는 페이지에서 생성된 보고서 목록과 그 상태를 보여줍니다. 보고서를 클릭하여 상세한 내용을 볼 수 있습니다.

Endpoints 영역에서는 Reporting-Endpoints 헤더에 구성된 모든 엔드포인트에 대한 개요를 제공합니다.

Chromium 이슈: 1205856

Recorder 패널에서 요소가 클릭 가능 / 표시될 때까지 대기 지원

사용자 흐름에 대한 기록을 재생할 때, Recorder 패널은 이제 특정 요소가 뷰포트에 표시되거나 클릭 가능할 때까지 기다리거나 다음 단계를 재생하기 전에 요소를 뷰포트 내로 자동으로 스크롤하고자 시도합니다. 이전에는 재생이 즉시 실패했습니다.

또한 뷰포트 바깥에 위치한 화면 밖 메뉴 예제를 소개합니다. 이는 활성화되었을 때 즉시 화면에 들어옵니다. 사용자 흐름은 메뉴를 토글하고, 메뉴 아이템을 클릭하는 것입니다. 이전에는 메뉴 아이템이 슬라이딩 되었지만 뷰포트에서는 아직 보이지 않기 때문에 마지막 단계에서 재생이 실패했습니다. 지금은 수정되었습니다.

Chromium 이슈: 1257499

콘솔 스타일링, 포매팅, 필터링 개선

ANSI 이스케이프 코드를 사용한 적절한 스타일의 로그 메시지

이제 ANSI escape sequences를 사용하여 콘솔 메시지를 적절히 스타일링할 수 있습니다. 이전에는 DevTools 콘솔에서 지원하는 ANSI escape sequences 는 굉장히 제한적이며, 일부는 깨지기도 하였습니다.

ANSI escape sequences 를 통해 로그 메시지에 색상을 입히는 건 Node.js 개발자에게 보편적이며, chalk, colors, ansi-colors, kleur 같은 라이브러리를 사용해 스타일링에 도움을 받기도 합니다.

이번 변경점을 통해 DevTools 를 이용하여 Node.js 애플리케이션을 디버깅할 때 적절히 색상이 부여된 콘솔 메시지를 통해 더 원활하게 디버깅할 수 있습니다.

DevTools를 이용한 콘솔 메시지의 포매팅 및 스타일링에 대한 더 상세한 내용은 format and style messages in the Console 문서를 살펴보세요.

Chromium 이슈: 1282837, 1282076

`%s`, `%d`, `%i`, `%f` 형식 지정자 지원

이제 콘솔 에서 콘솔 표준 에 정의된 %s, %d, %i, %f 형식 지정자를 지원합니다.

Chromium 이슈: 1277944, 1282076

보다 직관적인 콘솔 그룹 필터

이제 콘솔 메시지를 필터링할 때, 필터에 일치하는 그룹 (또는 조상 그룹)의 제목 또는 필터에 일치하는 메시지 콘텐츠를 포함한 경우에만 콘솔 메시지를 보여줍니다. 이전에는 필터와 관계없이 콘솔 그룹 제목이 노출되었습니다.

추가로 콘솔 메시지를 보여줄 때 그룹 (또는 조상 그룹)도 표시됩니다.

Chromium 이슈: 1068788

소스맵 개선

소스맵 파일을 이용한 Chrome extension 디버깅

이제 소스맵 파일을 사용해 Chrome extension 디버깅 이 가능합니다. 이전에는 DevTools에서 Chrome extension 디버깅 시에는 인라인 소스맵만 지원했습니다.

Chromium 이슈: 212374

소스 패널에서 소스 폴더 트리 개선

소스 패널의 소스 폴더 트리가 폴더 구조 및 네이밍 (“../”, “./”, 등)을 덜 복잡하게 보여주도록 개선되었습니다. 내부적으로 소스맵의 절대 소스 URL을 정규화한 결과입니다.

Chromium 이슈: 1284737

소스 패널에서 워커 소스 파일 표시

소스 패널에서 워커 (예: 웹 워커, 서비스 워커) 소스 파일 및 연관된 sourceURL이 보입니다. 이전에는 워커 소스 파일이 제대로 제어되지 않았습니다.

Chromium 이슈: 1277002

Chrome 자동 다크 테마 개선

자동 다크 테마 에뮬레이션 UI가 간소화되었습니다. 기존 드롭다운 메뉴에서 체크박스로 전환되었습니다.

그 외에도 자동 다크 테마 가 활성화되면 Emulate prefers-color-scheme 드롭다운 메뉴가 비활성화되고 prefers-color-scheme: dark 가 자동으로 지정됩니다.

Android Chrome 96에서 자동 다크 테마 를 시험적 기능 으로 소개했었습니다. 이 기능을 사용하면 사용자가 운영 체제에서 다크 테마를 선택하면 브라우저가 자동으로 생성된 다크 테마를 라이트 테마 사이트에도 적용합니다.

Chromium 이슈: 1243309

터치에 친화적인 컬러 피커와 창 분리

터치 스크린 디바이스의 스타일러스 펜이나 손가락을 이용해 DevTools 에서 색상을 선택하거나 Drawer 리사이징이 가능합니다.

아래 예제는 Google Pixelbook 기기의 터치 스크린을 사용한 캡쳐입니다.

Chromium 이슈: 1284245, 1284995

기타 하이라이트

이번 릴리스에서 주목할만한 수정 사항들입니다:

쿠키 창에서 edit cookies 이슈를 해결하였습니다. (1290196)
Command menu 에서 Shift + Tab 을 사용해 이전 커맨드를 선택할 수 있습니다. (1278743)
이슈 탭에서 CORS preflight request 이슈가 노출됩니다. (1272445).
이슈 탭에서 User-Agent Client Hints 이슈가 노출됩니다. (1219359).
소스 및 콘솔 패널에서 Shift + Delete 및 Page up / Page down 동작을 수정하였습니다. (1278461, 1285662)
소스 패널에서 브레이크포인트를 제거하면 브레이크포인트 편집 다이얼로그를 닫습니다. (922513)
DevTools에서 라이트 / 다크 테마 선택 시에 다시 불러올 필요가 없어졌습니다. (1278738)

프리뷰 채널 다운로드하기

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 99)

웹 소켓 요청 쓰로틀링

애플리케이션 패널에 Reporting API 창 추가

Recorder 패널에서 요소가 클릭 가능 / 표시될 때까지 대기 지원