이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 98)

Jecelyn Yeen

새로운 전체 페이지 접근성 트리를 사용하면 전체 페이지 접근성 트리의 개요를 더 쉽게 확인하고 웹 콘텐츠가 보조 기술에 노출되는 방식을 더 잘 이해할 수 있습니다.

요소 패널에서 접근성 창을 열고 전체 페이지 접근성 트리 사용 설정 체크박스를 선택합니다. 그런 다음 DevTools를 새로고침하면 Elements 패널에 새 접근성 버튼이 표시됩니다.

이 버튼을 클릭하면 전체 페이지 접근성 트리 보기로 전환할 수 있습니다. 접근성 창에서 노드를 펼치거나 클릭하여 세부정보를 볼 수 있습니다.

노드를 선택하고 DOM 트리 보기로 다시 전환합니다. 이제 해당 DOM 노드가 선택됩니다. 이는 DOM 노드와 접근성 트리 노드 간의 매핑을 이해하는 좋은 방법입니다. DOM 트리 ⬌ 접근성 트리 보기에서도 작동합니다.

이전에는 접근성 창에서 접근성 트리를 사용할 수 있었습니다. 뷰는 제한적이며 단일 노드와 상위 노드만 탐색할 수 있습니다.

Google팀에서는 이 미리보기 기능을 제공하기 위해 계속 노력하고 있습니다. 추가 개선을 위한 의견을 보내주시기 바랍니다.

전체 페이지 접근성 트리

Chromium 문제: 887173

변경사항 탭에서 더 정확하게 변경할 수 있습니다.

Changes(변경사항) 탭의 코드 변경사항은 자동으로 인쇄되어 있습니다.

이전에는 모든 코드가 한 줄로 표시되어 축소된 소스 코드의 실제 변경사항을 추적하기 어려웠습니다.

변경사항 탭

Chromium 문제: 1238818, 1268754 , 1086491

사용자 플로우 녹음에 더 긴 시간 제한 설정

이제 녹음기에서 모든 단계 또는 특정 단계의 시간 초과 설정을 조정할 수 있습니다. 이 방법은 네트워크 요청이 느리고 애니메이션이 긴 페이지에 특히 유용합니다.

예를 들어 이 데모 페이지에서 사용자 플로우를 기록하여 메뉴 항목을 로드하고 클릭하도록 했습니다. 그러나 메뉴 항목의 로드 속도가 느립니다 (6초 소요). 이 사용자 플로우의 재생이 5초 (기본 시간 제한)를 초과하여 실패했습니다.

새로운 시간 제한 설정을 사용하면 이 문제를 해결할 수 있습니다. 메뉴 항목에서 클릭한 단계를 펼칩니다. 제한 시간 추가로 단계를 수정하고 6,000밀리초 (6초)로 설정합니다.

필요한 경우 모든 단계의 다시 재생 설정에서 시간 초과를 조정할 수 있습니다. Replay settings(재생 설정)를 펼치고 Timeout(시간 제한) 값을 수정합니다.

사용자 플로우 녹화 시간 제한 설정

Chromium 문제: 1257499

뒤로-앞으로 캐시 탭으로 페이지를 캐시할 수 있는지 확인하세요.

뒤로-앞으로 캐시 (bfcache)는 바로 뒤로/앞으로 탐색을 사용할 수 있도록 하는 브라우저 최적화 기능입니다.

새로운 뒤로-앞으로 캐시 탭을 사용하면 페이지가 bfcache에 최적화되어 있는지 테스트하고, 캐시 사용을 방해하는 문제를 식별할 수 있습니다.

특정 페이지를 테스트하려면 Chrome에서 해당 페이지로 이동한 다음 DevTools에서 애플리케이션 > 뒤로-앞으로 캐시로 이동합니다. 그런 다음 Test back-forward cache 버튼을 클릭하면 DevTools에서 페이지를 벗어났다가 다시 뒤로 이동하여 페이지를 bfcache에서 복원할 수 있는지 판단합니다.

웹 개발자는 모든 브라우저에서 bfcache에 맞춰 페이지를 최적화하는 방법을 아는 것이 중요합니다. 이렇게 하면 사용자, 특히 네트워크나 기기가 느린 사용자의 탐색 경험을 크게 개선할 수 있기 때문입니다.

뒤로-앞으로 캐시 탭

Chromium 문제: 1110752

새 속성 창 필터

Properties 창에서 특정 속성에 집중하려는 경우 이제 새 Filter 텍스트 상자에 해당 속성 이름 또는 값을 입력할 수 있습니다.

기본적으로 값이 null 또는 undefined인 속성은 표시되지 않습니다. 모든 속성을 보려면 모두 표시 체크박스를 선택합니다.

향상된 기능을 통해 원하는 속성에 더 빠르게 이동하여 생산성을 높일 수 있습니다.

속성 창 필터

Chromium 문제: 1269674

CSS 강제 색상 미디어 기능 에뮬레이션

forced-colors CSS 미디어 기능은 사용자 에이전트가 페이지에 사용자가 선택한 제한된 색상 팔레트를 적용하는 강제 색상 모드 (예: Windows 고대비 모드)를 사용 설정했는지 감지하는 데 사용됩니다.

명령어 메뉴를 열고 렌더링 표시 명령어를 실행한 다음 CSS 미디어 기능 강제 색상 에뮬레이션 드롭다운을 설정합니다.

CSS 강제 색상 미디어 기능

Chromium 문제: 1130859

마우스 오버 명령어 시 눈금자 표시

이제 명령어 메뉴를 열고 마우스 오버 시 눈금자 표시 명령어를 실행할 수 있습니다. 페이지 눈금자를 사용하면 요소의 너비와 높이를 더 쉽게 측정할 수 있습니다.

이전에는 설정 > 눈금자 표시 체크박스를 통해서만 페이지 눈금자를 사용 설정할 수 있었습니다.

마우스 오버 명령어 시 눈금자 표시

Chromium 문제: 1270562

Flexbox 편집기에서 `row-reverse` 및 `column-reverse` 지원

Flexbox 편집기에는 flex-direction의 row-reverse 및 column-reverse를 지원하는 두 개의 새로운 버튼이 추가되었습니다.

Flexbox 편집기

Chromium 문제: 1263866

XHR을 다시 재생하고 모든 검색결과를 펼칠 수 있는 새로운 단축키

Network 패널에서 XHR을 재생하기 위한 단축키

Network 패널에서 XHR 요청을 선택하고 키보드에서 R을 눌러 XHR을 재생합니다. 이전에는 컨텍스트 메뉴 (마우스 오른쪽 버튼 > Replay XHR)를 통해서만 XHR을 재생할 수 있었습니다.

XHR 재생

Chromium 문제: 1050021

모든 검색결과를 펼치는 단축키

검색 탭에 새로운 바로가기가 추가되어 모든 검색결과를 펼치고 접을 수 있습니다. 이전에는 한 번에 파일 하나씩만 클릭하여 검색결과를 펼치고 접을 수 있었습니다.

Esc > 점 3개 메뉴 > 검색을 통해 검색 탭을 엽니다. 검색 문자열 (예: 함수)을 입력하고 Enter 키를 눌러 검색결과 목록을 확인합니다. 검색 결과에 포커스를 두고 다음 단축키를 사용하여 검색 파일을 펼치거나 접습니다.

Windows / Linux - Ctrl + Shift + { 또는 }
MacOS - Cmd + Options + { 또는 }

Chrome DevTools의 단축키를 알아보려면 단축키를 참고하세요.

Chromium 문제: 1255073

Lighthouse 패널의 Lighthouse 9

이제 Lighthouse 패널에서 Lighthouse 9를 실행합니다. 이제 Lighthouse에서 동일한 ID를 공유하는 모든 요소를 나열합니다.

고유하지 않은 요소 ID는 일반적인 접근성 문제입니다. 예를 들어 aria-labelledby 속성에서 참조되는 ID는 여러 요소에 사용됩니다.

업데이트에 대한 자세한 내용은 Lighthouse 9.0의 새로운 기능을 확인하세요.

'포커스 가능한 모든 요소에는 고유한 `id`가 있어야 함'에 대한 Lighthouse 감사에서는 동일한 `id`를 사용하는 두 요소를 표시합니다.

Chromium 문제: 772558

개선된 소스 패널

CodeMirror 6을 사용하도록 업그레이드함에 따라 Sources 패널의 안정성이 개선되었습니다. 주목할 만한 개선사항은 다음과 같습니다.

대용량 파일 (예: WASM, 자바스크립트)을 열 때 훨씬 더 빨라졌습니다.
코드를 단계별로 실행할 때 더 이상 무작위로 스크롤하지 않아도 됩니다.
수정 가능한 소스에 대한 자동 완성 제안 개선 (예: 스니펫, 로컬 재정의)

Chromium 문제: 1241848

기타 주요 사항

다음은 이번 버전에서 주목할 만한 수정사항입니다.

네트워크 요청의 폭포식 구조 다이어그램을 올바르게 표시 이전에는 스타일이 잘못되었습니다. 추가했습니다. (1275501)
소스 패널에서 줄이 매우 긴 문서에서 검색할 때 코드 강조표시가 손상되었습니다. 이제 문제가 해결되었습니다. 추가했습니다. (1275496)
네트워크 요청에 중복된 페이로드 탭이 더 이상 표시되지 않습니다. 추가했습니다. (1273972)
성능 패널의 요약 섹션에서 누락된 레이아웃 변경 세부정보를 수정했습니다. 추가했습니다. (1259606)
네트워크 검색 검색어에서 임의의 문자 (예: ,, .)를 지원합니다. 추가했습니다. (1267196)

[실험용] Reporting API 창의 엔드포인트

실험용 Reporting API 창이 Chrome 96에 도입되어 페이지에서 생성된 보고서와 상태를 모니터링할 수 있습니다.

이제 엔드포인트 섹션을 사용할 수 있습니다. Reporting-Endpoints 헤더에 구성된 모든 엔드포인트에 대한 개요를 제공합니다.

Reporting API를 사용하여 보안 위반, 지원 중단된 API 호출 등을 모니터링하는 방법을 알아보세요.

Reporting API 창

Chromium 문제: 1200732

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.