DevTools의 새로운 기능 (Chrome 98)

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

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

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

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

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

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

미리보기 기능을 제공하기 위해 최선을 다하고 있습니다. 추가 개선을 위해 의견을 보내주시기 바랍니다.

전체 페이지 접근성 트리

Chromium 문제: 887173

변경사항 탭의 세부적인 변경사항

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

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

변경사항 탭

Chromium 문제: 1238818, 1268754 , 1086491

사용자 플로우 기록에 더 긴 시간 제한 설정

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

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

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

원하는 경우 모든 단계의 재생 설정에서 시간 제한을 조정할 수 있습니다. 재생 설정을 펼치고 시간 제한 값을 수정합니다.

사용자 플로우 기록의 제한 시간 설정

Chromium 문제: 1257499

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

뒤로-앞으로 캐시 (bfcache)는 즉시 뒤로 및 앞으로 탐색을 사용할 수 있게 하는 브라우저 최적화입니다.

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

특정 페이지를 테스트하려면 Chrome에서 해당 페이지로 이동한 다음 DevTools에서 애플리케이션 > 뒤로-앞으로 캐시로 이동하세요. 그런 다음 뒤로-앞으로 캐시 테스트 버튼을 클릭하면 DevTools에서 페이지를 벗어났다가 다시 돌아오려고 시도하여 페이지를 bfcache에서 복원할 수 있는지 확인합니다.

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

뒤로-앞으로 캐시 탭

Chromium 문제: 1110752

새 속성 창 필터

속성 창의 특정 속성에 집중하려는 경우 이제 새 필터 텍스트 상자에 해당 속성 이름이나 값을 입력하면 됩니다.

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

이러한 개선사항을 통해 원하는 속성에 더 빠르게 액세스하여 생산성을 높일 수 있습니다.

속성 창 필터

Chromium 문제: 1269674

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

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

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

CSS 강제 색상 미디어 기능

Chromium 문제: 1130859

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

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

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

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

Chromium 문제: 1270562

Flexbox 편집기에서 row-reversecolumn-reverse 지원

Flexbox 편집기에서는 flex-directionrow-reversecolumn-reverse를 지원하는 버튼 두 개를 새로 추가했습니다.

Flexbox 편집기

Chromium 문제: 1263866

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

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

Network 패널에서 XHR 요청을 선택하고 키보드에서 R을 눌러 XHR을 재생합니다. 이전에는 컨텍스트 메뉴 (마우스 오른쪽 버튼 클릭 > 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, JavaScript)을 열 때 훨씬 빠름
  • 코드를 단계별로 실행할 때 더 이상 무작위로 스크롤하지 않음
  • 수정 가능한 소스에 대한 자동 완성 제안 개선 (예: 스니펫, 로컬 재정의)

Chromium 문제: 1241848

기타 주요 정보

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

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

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

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

이제 엔드포인트 섹션을 사용할 수 있습니다. 여기에는 Reporting-Endpoints 헤더에 구성된 모든 엔드포인트의 개요가 표시됩니다.

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

Reporting API 창

Chromium 문제: 1200732

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 내용 목록입니다.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

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

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59