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

DevTools의 새로운 기능 (Chrome 88)

Jecelyn Yeen

DevTools 시작 속도 향상

이제 DevTools 시작 속도가 JavaScript 컴파일 측면에서 약 37% 빨라졌습니다 (6.9초에서 5초로 감소). 🎉

팀은 최적화 작업을 통해 시작 중 직렬화, 파싱, 역직렬화의 성능 오버헤드를 줄였습니다.

구현에 관해 자세히 설명하는 엔지니어링 블로그 게시물이 곧 게시될 예정입니다. 계속해서 지켜봐 주세요.

Chromium 문제: 1029427

새로운 CSS 각도 시각화 도구

이제 DevTools의 CSS 각도 디버깅 지원이 향상되었습니다.

CSS 각도

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

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

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

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

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

애플리케이션 > 저장용량으로 이동하고 맞춤 저장용량 시뮬레이션 체크박스를 선택한 후 유효한 숫자를 입력하여 저장용량을 시뮬레이션합니다.

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

Chromium 문제: 945786, 1146985

성능 패널 녹화 파일의 새로운 웹 바이탈 레인

이제 실적 기록에서 웹 바이탈 정보를 표시할 수 있습니다.

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

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

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

웹 바이탈 레인

Chromium 문제: 해당 사항 없음

Network 패널에서 CORS 오류 보고

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

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

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

CORS 오류

Chromium 문제: 1141824

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

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

이제 교차 출처 분리 상태가 Security & Isolation 섹션 아래에 표시됩니다.

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

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

교차 출처 정보

Chromium 문제: 1139899

프레임 세부정보 뷰의 새로운 웹 작업자 정보

이제 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"로 필터링됩니다.

서비스 워커에서 Network 패널 열기

Chromium 문제: 해당 사항 없음

Network 패널의 새로운 복사 옵션

속성 값 복사

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

속성 값 복사

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

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

Chromium 문제: 1132084

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

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

스택 트레이스 복사

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 (1024바이트)를 혼합했습니다. 예를 들어 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, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

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

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