DevTools의 새로운 기능 (Chrome 88)

Jecelyn Yeen

DevTools 시작 속도 향상

이제 JavaScript 컴파일 측면에서 DevTools 시작 속도가 최대 37% 더 빨라집니다 (6.9초에서 5초로 단축). 🎉

팀은 시작 중에 직렬화, 파싱, 역직렬화의 성능 오버헤드를 줄이기 위해 몇 가지 최적화를 수행했습니다.

곧 구현 내용을 자세히 설명하는 엔지니어링 블로그 게시물이 올라올 예정입니다. 감사합니다

Chromium 문제: 1029427

새로운 CSS 각도 시각화 도구

이제 DevTools에서 CSS 각도 디버깅을 더 효과적으로 지원할 수 있습니다.

CSS 각도

페이지의 HTML 요소에 CSS 각도가 적용된 경우 (예: background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)) 스타일 창의 각도 옆에 시계 아이콘이 표시됩니다. 시계 아이콘을 클릭하여 시계 오버레이를 전환합니다. 시계의 아무 곳이나 클릭하거나 바늘을 끌어 각도를 변경하세요.

각도 값을 변경할 수 있는 마우스와 단축키도 있습니다. 자세한 내용은 문서를 참고하세요.

Chromium 문제: 1126178, 1138633

지원되지 않는 이미지 유형 에뮬레이션

DevTools는 렌더링 탭에 두 가지 새로운 에뮬레이션을 추가하여 AVIF 및 WebP 이미지 형식을 사용 중지할 수 있습니다. 이러한 새로운 에뮬레이션을 사용하면 개발자가 브라우저를 전환하지 않고도 다양한 이미지 로드 시나리오를 더 쉽게 테스트할 수 있습니다.

최신 브라우저의 경우 AVIF 및 WebP에 이미지를 제공하고 이전 브라우저의 경우 대체 PNG 이미지를 제공하는 다음 HTML 코드가 있다고 가정해 보겠습니다.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

렌더링 탭을 열고 'AVIF 이미지 형식 사용 중지'를 선택한 다음 페이지를 새로고침하세요. img src 위로 마우스를 가져갑니다. 현재 이미지 src (currentSrc)가 이제 대체 WebP 이미지입니다.

이미지 유형 에뮬레이션

Chromium 문제: 1130556

스토리지 창에서 스토리지 할당량 크기 시뮬레이션하기

이제 스토리지 창에서 스토리지 할당량 크기를 재정의할 수 있습니다. 이 기능을 사용하면 다양한 기기를 시뮬레이션하고 디스크 가용성이 낮은 시나리오에서 앱 동작을 테스트할 수 있습니다.

애플리케이션 > 스토리지로 이동하여 맞춤 스토리지 할당량 시뮬레이션 체크박스를 사용 설정하고 스토리지 할당량을 시뮬레이션할 유효한 숫자를 입력합니다.

스토리지 할당량 크기 시뮬레이션

Chromium 문제: 945786, 1146985

Performance 패널 녹화의 새로운 Web Vitals 영역

이제 성능 기록에 Web Vitals 정보를 표시하는 옵션이 있습니다.

로드 성능을 기록한 후 성능 패널에서 웹 바이탈 체크박스를 사용 설정하여 새로운 웹 바이탈 영역을 확인합니다.

현재 레인에는 콘텐츠가 포함된 첫 페인트 (FCP), 최대 콘텐츠 페인트 (LCP), 레이아웃 변경 (LS)과 같은 웹 바이탈 정보가 표시됩니다.

web.dev/vitals에서 웹 바이탈 측정항목을 사용하여 사용자 환경을 최적화하는 방법을 자세히 알아보세요.

Web Vitals 경로

Chromium 문제: 해당 사항 없음

Network 패널에서 CORS 오류 보고

이제 DevTools에서 교차 출처 리소스 공유(CORS)로 인해 네트워크 요청이 실패하면 CORS 오류가 표시됩니다.

네트워크 패널에서 실패한 CORS 네트워크 요청을 확인합니다. 상태 열에 'CORS 오류'가 표시됩니다. 오류 위로 마우스를 가져가면 도움말에 오류 코드가 표시됩니다. 이전에는 DevTools에서 CORS 오류에 대해 일반 '(실패)' 상태만 표시했습니다.

이를 통해 CORS 문제를 더 자세히 설명할 수 있는 다음번 개선 기반이 마련됩니다.

CORS 오류

Chromium 문제: 1141824

프레임 세부정보 뷰 업데이트

프레임 세부정보 뷰의 교차 출처 분리 정보

이제 보안 및 격리 섹션에 교차 출처 분리 상태가 표시됩니다.

새로운 API 가용성 섹션에는 SharedArrayBuffer (SAB)의 가용성과 postMessage()을 사용하여 이를 공유할 수 있는지 여부가 표시됩니다.

현재 SAB 및 postMessage()를 사용할 수 있지만 컨텍스트가 교차 출처 분리되지 않은 경우 지원 중단 경고가 표시됩니다. 이 도움말에서 교차 출처 분리와 SharedArrayBuffers 같은 기능에 교차 출처 분리가 필요한 이유를 자세히 알아보세요.

교차 출처 정보

Chromium 문제: 1139899

프레임 세부정보 뷰의 새로운 Web Workers 정보

이제 DevTools가 해당 웹 워커를 생성하는 프레임 아래에 전용 웹 워커를 표시합니다.

Application 패널에서 웹 작업자가 있는 프레임을 펼친 후 Workers 트리 아래에서 작업자를 선택하여 웹 작업자의 세부정보를 확인합니다.

웹 작업자 정보

Chromium 문제: 1122507, 1051466

열린 창의 오프너 프레임 세부정보 표시

이제 어떤 프레임으로 인해 다른 창이 열렸는지 세부정보를 확인할 수 있습니다.

Frames 트리에서 열린 창을 선택하여 창 세부정보를 확인합니다. Opener Frame 링크를 클릭하여 Elements 패널에서 오프너를 표시합니다.

오프너 프레임 세부정보

Chromium 문제: 1107766

Service Workers 창에서 Network 패널 열기

새로운 네트워크 요청 링크를 사용하여 모든 서비스 워커 (SW) 요청 라우팅 정보를 확인하세요. 이를 통해 개발자는 SW를 디버깅할 때 컨텍스트를 추가할 수 있습니다.

Application > Service Workers로 이동하여 SW의 Network requests를 클릭합니다. Network 패널이 하단 패널에 열리고 모든 서비스 워커 관련 요청이 표시됩니다 (네트워크 요청이 "is:service-worker-intercepted"로 필터링됨).

서비스 워커에서 네트워크 패널 열기

Chromium 문제: 해당 사항 없음

Network 패널의 새로운 복사 옵션

속성 값 복사

컨텍스트 메뉴의 새로운 '값 복사' 옵션을 사용하면 네트워크 요청의 속성 값을 복사할 수 있습니다.

속성 값 복사

네트워크 패널에서 네트워크 요청을 클릭하여 Headers 창을 엽니다. 요청 페이로드 (JSON) 양식 데이터 쿼리 문자열 매개변수 요청 헤더 응답 헤더 섹션에서 속성 중 하나를 마우스 오른쪽 버튼으로 클릭합니다.

그런 다음 값 복사를 선택하여 속성 값을 클립보드에 복사할 수 있습니다.

Chromium 문제: 1132084

네트워크 시작자의 스택 트레이스 복사

네트워크 요청을 마우스 오른쪽 버튼으로 클릭한 다음 Copy stacktrace를 선택하여 스택 트레이스를 클립보드에 복사합니다.

스택 트레이스 복사

Chromium 문제: 1139615

Wasm 디버깅 업데이트

마우스 오버 시 Wasm 변수 값 미리보기

중단점에서 일시중지된 상태에서 WebAssembly (Wasm) 분해에서 변수 위로 마우스를 가져가면 DevTools에 이제 변수의 현재 값이 표시됩니다.

Sources 패널에서 Wasm 파일을 열고 중단점을 추가한 다음 페이지를 새로고침합니다. 변수 위로 마우스를 가져가면 값을 볼 수 있습니다.

마우스 오버 시 Wasm 변수 미리보기

Chromium 문제: 1058836, 1071432

콘솔에서 Wasm 변수 평가

이제 중단점에서 일시중지된 동안 콘솔에서 Wasm 변수를 평가할 수 있습니다.

이 예에서는 local.get $input 줄에 중단점을 추가합니다. 디버깅할 때 콘솔에 $input를 입력하면 변수의 현재 값이 반환됩니다. 이 경우에는 4입니다.

콘솔에서 Wasm 변수 평가

Chromium 문제: 1127914

파일/메모리 크기의 일관된 측정 단위

이제 DevTools에서 파일/메모리 크기를 표시하는 데 일관되게 KB를 사용합니다. 이전에는 DevTools에 kB(1,000바이트)와 KiB (1,024바이트)가 혼합되어 있었습니다. 예를 들어 Network 패널에서 이전에 'kB' 라벨을 사용했지만 실제로는 KiB를 사용하여 계산을 수행했기 때문에 불필요한 혼란이 발생했습니다.

Chromium 문제: 1035309

요소 패널에서 유사 요소 강조표시

DevTools가 유사 요소를 더 잘 인식할 수 있도록 유사 요소의 색상 대비를 높였습니다.

유사 요소 강조표시

Chromium 문제: 1143833

실험용 기능

CSS Flexbox 디버깅 도구

Flexbox 디버깅 도구가 출시됩니다.

우선 DevTools는 이제 display: flex가 적용된 요소에 대해 Elements 패널에 flex 배지를 표시합니다.

또한 새 정렬 아이콘이 다음과 같은 Flexbox 속성에 추가됩니다.

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

게다가 이러한 아이콘은 컨텍스트를 인식합니다. 아이콘 방향은 다음에 따라 조정됩니다.

  • flex-direction
  • direction
  • writing-mode

이러한 아이콘은 페이지의 Flexbox 레이아웃을 더 잘 시각화하는 데 도움이 됩니다.

CSS Flex 디버깅

다음은 Flexbox 도구 기능의 디자인 문서입니다. 곧 더 많은 기능이 추가될 예정입니다.

사용해 보시고 의견을 알려주세요.

Chromium 문제: 1144090, 1139945

코드 단축키 맞춤설정

DevTools에 마지막 출시 이후 단축키 맞춤설정을 위한 실험용 지원이 추가되었습니다.

이제 단축키 편집기에서 코드 (여러 키를 누르는 단축키)를 만들 수 있습니다.

설정 > 바로가기로 이동하고 명령어에 마우스를 가져간 후 수정 버튼 (펜 아이콘)을 클릭하여 코드 바로가기를 맞춤설정합니다.

코드 단축키

Chromium 문제: 174309

미리보기 채널 다운로드

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