DevTools 의 새로운 기능 (Chrome 98)

Published on Updated on

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

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

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

미리보기 기능: 전체 페이지 접근성 트리

사용자들은 새로운 전체 페이지 접근성 트리 를 통해 전체 페이지 접근성 트리의 개요를 좀더 쉽게 알 수 있으며, 이 기능은 웹 컨텐츠가 어떻게 보조 기술에 노출되는지를 사용자들이 좀더 잘 이해할 수 있도록 합니다.

요소 패널에서 접근성 패널을 열고 전체 페이지 접근성 트리 사용 설정 체크박스를 선택합니다. 이후 DevTools를 새로고침하면 요소 패널에 접근성 버튼이 생긴 것을 확인할 수 있습니다.

전체 페이지 접근성 트리 뷰로 전환하기 위해서, 아래 그림의 왼쪽 아이콘 위에서 클릭합니다. 우리는 각 노드들을 확장할 수 있으며, 각자의 노드를 클릭하여 접근성 패널에서 세부 사항들을 볼 수 있습니다.

접근성 트리는 접근성 패널에서 이용가능했습니다만, 그 뷰 자체는 오직 싱글 노드 및 그 노드의 조상들만을 볼 수 있을 만큼 제한적이었습니다.

우리는 아직 이 미리보기 기능 구현에 대해 적극적으로 작업하고 있으며, 앞으로의 개선점에 대한 여러분들의 의견을 기다리고 있습니다!

전체 페이지 접근성 트리

Chromium issue: 887173

변경 탭에서의 더욱 정교한 변화들

변경 탭에서의 코드 체인지들은 자동적으로 깔끔하게 프린트됩니다.

이전 버전에서는 모든 코드가 한 줄에 표시되었기 때문에 압축된 소스 코드에서의 실제 변화를 추적하는 것은 쉽지 않았습니다.

Changes tab

Chromium issues: 1238818, 1268754 , 1086491

유저 플로우 레코딩을 위한 더 긴 타임아웃 설정

이제 여러분들은 Recorder에서 모든 단계 혹은 특정한 단계에서의 타임아웃 설정을 조정할 수 있게 됐습니다. 이 기능은 느린 네트워크 요청과 긴 애니메이션이 포함된 페이지에서 유용하게 사용될 것입니다.

예를 들어, 데모 페이지에서 유저 플로우 녹화 를 시작하고 메뉴 항목을 클릭하여 로드합니다. 그러나 메뉴를 불러들이는 것이 6초가 걸렸습니다. 로딩 시간이 5초를 초과-기본 타임아웃-했기 때문에 이 유저 플로우의 다시보기는 정상적으로 동작하지 않았습니다.

이러한 문제를 해결하기 위해, 여러분은 새롭게 추가된 타임아웃 설정을 사용할 수 있습니다. 메뉴 항목에서 우리가 클릭한 스텝을 확장합니다. 타임아웃 추가 를 이용해 스텝을 편집하고 타임아웃을 6000 밀리초 (6초)로 설정합니다.

추가적으로, 여러분은 모든 단계에 대한 타임아웃Replay settings에서도 조정할 수 있습니다. Replay settings을 확장한 다음 타임아웃 값을 수정합니다.

유저 플로우 녹화를 위한 타임아웃 설정

Chromium issue: 1257499

뒤로/앞으로 캐쉬 탭을 이용해 페이지가 캐쉬 가능한지 확인하기

뒤로/앞으로 캐쉬(혹은 bfcache)는 브라우저 최적화의 하나로, 즉각적인 앞뒤 내비게이션을 가능하게 해 주는 기능입니다.

새롭게 선보이는 뒤로/앞으로 캐쉬 탭을 사용하여, 웹 페이지들이 bfcache에 대해 최적화되었는지를 테스트할 수 있으며, 또한 페이지가 bfcache를 사용하지 못하도록 하는 이슈들을 파악할 수 있습니다.

특정 페이지를 테스트하기 위해, 크롬에서 해당 페이지로 이동한 다음 DevTools에서 애플리케이션 > 뒤로-앞으로 캐쉬 를 선택합니다. 그리고 뒤로/앞으로 캐쉬 테스트 버튼을 클릭하여 DevTools가 앞으로 혹은 뒤로 페이지 탐색을 시작하도록 하여, 해당 페이지가 bfcache 로부터 복구 가능한지를 확인할 수 있습니다.

웹 개발자는 페이지가 모든 브라우저에서 bfcache에 맞게 최적화하는 방법을 이해하는 것이 매우 중요합니다. 이는 특히 느린 네트워크 혹은 기기에서의 사용자 탐색 경험을 크게 향상시킬 수 있기 때문입니다.

뒤로/앞으로 캐쉬 탭

Chromium issue: 1110752

새로 추가된 속성 창 필터

속성 창의 특정 속성에 초점을 맞추고 싶으시다면, 배포판에 새로 추가된 필터 입력창에 프로퍼티의 이름이나 값을 기입하면 됩니다.

기본적으로 null 이나 undefined 값을 가지는 속성들은 표시되지 않습니다. 모두 보기 체크박스를 클릭하여 모든 속성을 볼 수 있도록 합니다.

위의 개선된 점을 이용하여 우리는 프로퍼티들에 좀더 빠르게 접근할 수 있으며, 이는 생산성을 높여 줄 수 있는 하나의 팁입니다!

속성 창 필터

Chromium issue: 1269674

CSS의 forced-colors 미디어 기능 에뮬레이팅

User agent가 웹페이지에서 사용자가 선택한 제한된 색 팔레트를 사용하도록 강제하는 forced-colors 모드 (예: 윈도우즈 하이 콘트라스트 모드)를 활성화했는지의 여부를 CSS의 forced-colors 미디어 기능을 통해 알아볼 수 있습니다.

명령 메뉴 를 열고 렌더링 표시 명령어를 실행한 다음, Emulate CSS media feature forced-colors 드롭다운 메뉴를 설정합니다.

CSS forced-colors 미디어 기능

Chromium issue: 1130859

마우스를 가져가면 눈금자 표시

여러분은 이제 Command Menu 를 열고 마우스를 가져가면 눈금자 표시를 실행할 수 있습니다. 페이지의 눈금 기능을 이용하여 우리는 각 요소의 길이와 넓이를 좀더 쉽게 측정할 수 있습니다.

이전에는 설정 > 눈금자 표시 체크박스를 통해 페이지의 눈금 모드를 활성화할 수 있었습니다.

Show rulers on hover

Chromium issue: 1270562

Flexbox 편집기에서의 row-reverse and column-reverse 지원

Flexbox editorflex-directionrow-reversecolumn-reverse 를 지원하기 위한 두 개의 버튼이 새롭게 추가되었습니다.

Flexbox 편집기

Chromium issue: 1263866

XHR 다시 재생 및 모든 검색 결과 표시를 위한 키보드 단축키 추가

네트워크 패널의 XHR 다시 재생 단축키

이전 버전에서는 컨텍스트 메뉴를 통해서만 XHR을 리플레이할 수 있었으나, 새 버전에서는 네트워크 패널에서 XHR 요청을 선택하고 R키를 눌러서 XHR을 다시 재생할 수 있습니다. replay XHR

Chromium issue: 1050021

모든 검색 결과 키보드 단축키

검색 탭에 모든 검색 결과를 열고 닫을 수 있는 단축키가 추가되었습니다. 이전에는 한 번에 하나의 파일을 클릭해야만 검색 결과를 확장 및 축소할 수 있었습니다.

Esc > 점 3개 메뉴 > 검색 을 통해 검색 탭을 엽니다. 검색하고자 하는 스트링(예: function)을 입력하고 Enter를 눌러서 검색 결과 리스트를 볼 수 있습니다. 검색 결과에 포커싱을 주고 다음 단축키를 사용하여 검색된 파일들을 확장 및 축소할 수 있습니다.

  • Windows / Linux - Ctrl + Shift + { or }
  • MacOS - Cmd + Options + { or }

키보드 단축키 에서 크롬 DevTools 의 단축키를 참고할 수 있습니다.

Chromium issue: 1255073

Lighthouse panel의 Lighthouse 9

Lighthouse 패널은 현재 Lighthouse 9를 구동하고 있습니다. Lighthouse는 곧 같은 아이디를 공유하는 모든 요소들을 나열할 것입니다.

요소들의 비고유한 아이디는 흔히 발생하는 접근성 문제입니다. 예를 들면, aria-labelledby 속성이 참조하는 아이디는 Multiple elements 에서 사용됩니다.

What’s new in Lighthouse 9.0 에서 구체적인 사항들과 업데이트를 확인해 보세요!

A Lighthouse audit for 'All focusable elements must have a unique `id`', showing two elements, both with the same `id`

Chromium issue: 772558

소스 패널에서의 개선점들

소스 패널을 CodeMirror 6에서 사용할 수 있도록 업그레이드하면서 소스 패널의 안정성이 많이 개선되었습니다. 몇 가지의 주목할 만한 개선사항을 소개해 보겠습니다.

  • 대용량 파일들을 열 때의 속도가 향상되었습니다. (예: WASM, JavaScript)
  • 코드를 단계별로 실행할 때 무작위 스크롤이 더 이상 발생하지 않습니다.
  • 편집가능한 소스(예: snippets, local override)에 대한 자동완성 제안이 개선되었습니다.

Chromium issue: 1241848

기타 하이라이트

이번 배포에 여러 가지 주목할 만한 개선점들이 추가되었습니다:

  • Sources 패널에서 너무 긴 문서를 검색할 때 코드 하이라이트가 동작하지 않았던 문제가 수정되었습니다. (1275496)
  • 네트워크 요청에서 중복된 페이로드 탭이 더 이상 없습니다. (1273972)
  • 성능 패널의 요약 섹션에서 누락된 레이아웃 변경 세부정보가 수정되었습니다. (1259606)
  • 네트워크 검색 쿼리에서 임의의 문자(예: ,, .)를 지원합니다.

[실험실 기능] Reporting API 창에서의 엔드포인트

실험실 기능을 사용하려면 설정 > 실험 > Enable Reporting API panel in the Application panel 항목 옆의 체크박스를 체크합니다.

Reporting API은 실험실 기능으로서 크롬 96 에서 소개되었으며, 이는 여러분들이 페이지에서 생성된 레포트들과 이들의 상태를 모니터링할 수 있도록 해 줍니다.

현재 Endpoints 섹션이 사용가능해졌으며, 이는 Reporting-Endpoints 헤더에 구성된 모든 엔드포인트에 대한 개요를 제공합니다.

Reporting API를 이용하여, 보안수칙 위반, 더 이상 사용되지 않는 API의 호출 등을 모니터링할 수 있게 되었습니다. 이 기능을 어떻게 사용하는지 알아보세요!

Reporting API 창

Chromium issue: 1200732

프리뷰 채널 다운로드하기

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.