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