DevTools의 새로운 기능 (Chrome 88)

Jecelyn Yeen

DevTools 시작 속도 향상

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

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

조만간 구현을 자세히 설명하는 엔지니어링 블로그 게시물이 게시될 예정입니다. 계속해서 많은 관심 부탁드립니다.

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

성능 패널 녹화의 새로운 Web Vitals 트랙

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

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

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

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

Chromium 문제: 해당 사항 없음

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

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

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

이를 통해 CORS 문제에 대한 자세한 설명을 제공하기 위한 다음 개선사항을 위한 기반이 마련됩니다.

Chromium 문제: 1141824

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

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

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

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

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

Chromium 문제: 1139899

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

이제 개발자 도구에 전용 웹 작업자가 이를 생성하는 프레임 아래에 표시됩니다.

애플리케이션 패널에서 웹 작업자가 있는 프레임을 펼친 다음 작업자 트리에서 작업자를 선택하여 웹 작업자의 세부정보를 확인합니다.

Chromium 문제: 1122507, 1051466

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

이제 다른 창을 연 프레임에 관한 세부정보를 볼 수 있습니다.

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

Chromium 문제: 1107766

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

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

애플리케이션 > 서비스 워커로 이동하여 SW의 네트워크 요청을 클릭합니다. 네트워크 패널이 하단 패널에 열리고 모든 서비스 워커 관련 요청이 표시됩니다 (네트워크 요청은 "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(1000바이트)와 KiB (1024바이트)를 혼용했습니다. 예를 들어 네트워크 패널에서는 이전에 'kB' 라벨을 사용했지만 실제로는 KiB를 사용하여 계산했기 때문에 불필요한 혼란이 발생했습니다.

Chromium 문제: 1035309

요소 패널에서 가상 요소 강조 표시

DevTools에서 의사 요소의 색상 대비를 높여 의사 요소를 더 쉽게 찾을 수 있습니다.

Chromium 문제: 1143833

실험용 기능

CSS Flexbox 디버깅 도구

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

우선 DevTools의 요소 패널에 display: flex이 적용된 요소에 flex 배지가 표시됩니다.

또한 다음과 같은 플렉스박스 속성에 새로운 정렬 아이콘이 추가되었습니다.

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

또한 이러한 아이콘은 컨텍스트를 인식합니다. 아이콘 방향은 다음을 기준으로 조정됩니다.

• flex-direction
• direction
• writing-mode

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

Flexbox 도구 기능의 설계 문서는 여기를 참고하세요. 더 많은 기능이 곧 추가될 예정입니다.

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

Chromium 문제: 1144090, 1139945

화음 단축키 맞춤설정

DevTools에서는 지난 출시 이후 맞춤 단축키에 대한 실험적 지원을 추가했습니다.

이제 단축키 편집기에서 조합 (다중 키 입력 단축키)을 만들 수 있습니다.

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

Chromium 문제: 174309

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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