DevTools 의 새로운 기능 (Chrome 94)

Published on Updated on

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

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

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

DevTools 를 이제 여러분들이 선호하는 언어로 사용하세요

Chrome DevTools는 80개 이상 언어를 제공하여, 여러분들의 기호에 맞는 언어를 골라서 사용할 수 있습니다.

Settings 메뉴를 열고, Preferences > Language 드롭다운 메뉴에서 여러분들이 원하는 언어를 선택한 다음 DevTools 를 새로고침해 줍니다.

Settings > Preferences 에서 언어를 선택하세요

Chromium issue: 1163928

기기 목록에 Nest Hub 가 새로 추가되었습니다

이제 기기 모드에서 Nest Hub 및 Nest Hub Max의 화면크기로 시뮬레이션할 수 있습니다.

Toggle Device Toolbar 를 클릭한 다음,  토글 디바이스 툴바 , 기기 목록에서 Nest Hub 혹은 Nest Hub Max 를 선택하세요.

기기 모드의 Nest Hub device

Chromium issue: 1223525

프레임 상세 화면에서 Origin trials 가 제공됩니다

이제 웹사이트의 origin trials 에 대한 정보를 애플리케이션 패널 하단의 프레임 상세 화면에서 볼 수 있습니다.

여러분들은 Origin trials 를 통해 새로운 기능 혹은 실험적인 기능을 이들이 안정화되기 전에 제한적인 시간 동안 시도 및 적용해 볼 수 있습니다.

Origin trials 가 포함된 페이지 (예시: demo page)를 엽니다. 애플리케이션 패널에서 스크롤을 프레임 섹션까지 내린 후 top 프레임을 선택합니다.

프레임 상세 화면에서의 Origin trials

Chromium issue: 607555

새로운 CSS 컨테이너 쿼리 배지

컨테이너 배지가 컨테이너 요소 옆에 새롭게 추가되었습니다. (@container 규칙의 조건과 부합하는 조상 요소를 의미합니다.), 배지를 클릭하여 페이지에서 선택한 컨테이너 및 모든 쿼리의 하위 항목의 오버레이 표시를 보여주거나 숨길 수 있습니다.

CSS 컨테이너 쿼리 배지

Chromium issue: 1146422

네트워크 필터 반전을 위한 새로운 체크박스 추가

네트워크 패널에 Invert 체크박스가 새로 추가되었으며, 이를 이용해 필터들을 반전시킬 수 있습니다.

예를 들어, 404 스테이터스 코드가 포함된 네트워크 요청만을 걸러내기 위해 "status-code:404" 를 입력해 보세요. 그리고 Invert 체크박스를 활성화시켜 필터링 옵션을 반전시켜 보세요. (404 스테이터스 코드가 포함되지 않은 모든 네트워크 요청을 표시합니다.)

네트워크 필터 반전

Chromium issue: 1054464

콘솔 사이드바 제거 예정

필터 UI를 툴바로 옮기기 위해, 콘솔 사이드바가 더 이상 사용되지 않고 제거될 예정입니다. 우려사항이나 피드백이 있다면 이슈 트래커를 통해 알려 주세요.

콘솔 사이드바 제거 안내

Chromium issue: 1232937

문제 탭과 네트워크 패널에서 Raw Set-Cookie 헤더 표시

DevTools 의 문제 탭에서 이제 Raw Set-Cookie 헤더를 볼 수 있습니다.

이전에는 쿠키가 형식에 맞지 않았을 때 (올바르지 않은 Set-Cookie 헤더) DevTools의 네트워크 패널에 표시되지 않았습니다. 네트워크 패널에서 새로 추가된 response-header-set-cookie 를 사용하면 Raw Set-Cookie 헤더 응답을 걸러낼 수 있습니다. DevTools 는 문제 탭의 Raw Set-Cookie 헤더 응답을 네트워크 패널로 연결합니다.

문제 탭과 네트워크 패널의 Raw 'Set-Cookie' 헤더

Chromium issue: 1179186

고유한 속성인 네이티브 접근자를 콘솔에서 일관성 있게 표시

이제 콘솔에서 네이티브 접근자를 고유한 속성으로서 일관성 있게 표시합니다.

예를 들면 콘솔에서 new Int8Array([1, 2, 3]) 코드를 표시할 때, length, byteOffset 네이티브 접근자들을 미리보기에서 표시하지 않았지만, 이번 업데이트를 통해 네이티브 접근자를 미리보기에서 확인할 수 있으며, 확장 시에 값들이 빠르게 표시됩니다.

고유한 속성인 네이티브 접근자를 콘솔에서 일관성 있게

Chromium issues: 1076820, 1199247

#sourceURL이 있는 인라인 스크립트에 적합한 오류 스택 추적

DevTools 는 이제 #sourceURL을 사용하여 인라인 스크립트를 올바르게 해결하고 디버깅을 위한 적절한 오류 스택 추적을 표시합니다.

이전에 DevTools는 여는 <script> 태그가 아닌 주변 문서를 기준으로 #sourceURL이 있는 인라인 스크립트에 대해 잘못된 위치를 표시했습니다.

#sourceURL이 있는 인라인 스크립트에 대한 적절한 오류 스택 추적

Chromium issues: 1183990, 578269

계산됨 영역에서 컬러 포맷 변경

색상 미리보기를 Shift 를 누른 채 클릭하여, 계산됨 영역에서 요소의 컬러 포맷을 변경할 수 있습니다.

컬러 포맷 변경을 위해 Shift와 함께 컬러 미리보기 클릭

Chromium issue: 1226371

커스텀 툴팁을 네이티브 HTML 툴팁으로 변경

이제 DevTools 의 모든 컴포넌트에서 네이티브 HTML 툴팁을 사용합니다. 네이티브 HTML 툴팁의 스타일링이 어려워 오랜 시간동안 DevTools 에서 커스텀 툴팁을 사용했지만, 커스텀 툴팁 구현체를 유지보수하는 건 어려운 작업이었고 주기적으로 난해한 이슈들과 마주하게 되었습니다.

따라서 커스텀 툴팁 구현체의 이점을 재평가한 후, 네이티브 HTML 툴팁이 DevTools 에서 충분히 잘 동작하고, 사용자들이 경험할 수 있는 다양한 문제점을 방지해준다는 사실을 알게 되었습니다.

DevTools 툴팁

Chromium issue: 1223391

[실험실 기능] 문제 탭에서 이슈들을 숨기기

실험실 기능을 활성화하려면 설정 > 실험 에 있는 Enable hide issues menu 를 체크하세요.

Enable hide issues menu를 활성화하여, 문제 탭에서 이슈들을 숨길 수 있습니다. 이 방법으로 우리는 우리에게 중요한 이슈들에 좀더 집중할 수 있습니다.

문제 탭에서 이슈에 hover 하여 우측에 있는 이슈 메뉴 더보기 를 클릭한 뒤, Hide issues like this 를 클릭하면 이슈를 감출 수 있습니다.

실험적인 hide issue context menu

Chromium issue: 1175722

프리뷰 채널 다운로드하기

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

Updated on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.