DevTools의 새로운 기능 (Chrome 88)

Jecelyn Yeen

더 빠른 DevTools 시작

이제 DevTools 시작 시 JavaScript 컴파일이 6.9초에서 5초로 약 37% 빨라졌습니다. 🎉

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

구현에 관한 자세한 내용은 향후 엔지니어링 블로그 게시물에서 다룰 예정입니다. 계속해서 많은 관심 부탁드립니다.

Chromium 문제: 1029427

새로운 CSS 각도 시각화 도구

이제 DevTools에서 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

성능 패널 녹화의 새로운 웹 바이탈 차선

이제 성능 녹화에서 웹 Vitals 정보를 표시할 수 있는 옵션이 있습니다.

로드 성능을 기록한 후 '실적' 패널에서 Web Vitals 체크박스를 사용 설정하여 새 Web Vitals 차선을 확인합니다.

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

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

Chromium 문제: 해당 사항 없음

네트워크 패널에서 CORS 오류 보고

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

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

이를 통해 CORS 문제에 관한 더 자세한 설명을 제공하는 다음번 개선사항을 위한 기반이 마련되었습니다.

Chromium 문제: 1141824

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

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

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

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

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

Chromium 문제: 1139899

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

이제 DevTools에서 전용 웹 워커를 만드는 프레임 아래에 전용 웹 워커가 표시됩니다.

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

Chromium 문제: 1122507, 1051466

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

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

Frames 트리에서 열린 창을 선택하여 창 세부정보를 확인합니다. 시작 프레임 링크를 클릭하여 요소 패널에 시작 부분을 표시합니다.

Chromium 문제: 1107766

Service Workers 창에서 네트워크 패널 열기

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

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

Chromium 문제: 해당 사항 없음

네트워크 패널의 새로운 복사 옵션

속성 값 복사

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

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

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

Chromium 문제: 1132084

네트워크 이니시에이터의 스택 트레이스 복사

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

Chromium 문제: 1139615

Wasm 디버깅 업데이트

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

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

소스 패널에서 Wasm 파일을 열고 중단점을 설정한 다음 페이지를 새로고침합니다. 변수 위로 마우스를 가져가면 값이 표시됩니다.

Chromium 문제: 1058836, 1071432

콘솔에서 Wasm 변수 평가

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

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

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가 적용된 요소에 flex 배지가 표시됩니다.

또한 다음 flexbox 속성에 새 정렬 아이콘이 추가되었습니다.

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

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

• flex-direction
• direction
• writing-mode

이 아이콘은 페이지의 flexbox 레이아웃을 더 잘 시각화하는 것을 목표로 합니다.

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

사용해 보고 의견을 공유해 주세요.

Chromium 문제: 1144090, 1139945

코드 단축키 맞춤설정

DevTools는 지난 출시 이후 단축키 맞춤설정을 위한 실험용 지원을 추가했습니다.

이제 바로가기 편집기에서 코드 (다중 키 누르기 바로가기)를 만들 수 있습니다.

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

Chromium 문제: 174309

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

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

DevTools의 새로운 기능

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