DevTools의 새로운 기능 (Chrome 88)

DevTools 시작 속도 향상

이제 JavaScript 컴파일 측면에서 DevTools 시작 속도가 최대 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가 Rendering 탭에 두 가지 새로운 에뮬레이션을 추가하여 AVIF 및 WebP 이미지를 사용 중지할 수 있음 합니다. 이러한 새로운 에뮬레이션을 사용하면 개발자가 다양한 이미지 로드를 더 쉽게 테스트할 수 있습니다. 간편하게 사용할 수 있습니다.

최신 브라우저에서 AVIF와 WebP 형식으로 이미지를 제공하는 다음 HTML 코드가 있다고 가정해 보겠습니다. 대체 PNG 이미지를 만드는 것이 좋습니다.

<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 정보를 표시하는 옵션이 있습니다.

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

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

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

Chromium 문제: 해당 사항 없음

Network 패널에서 CORS 오류 보고

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

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

이를 통해 CORS 문제

Chromium 문제: 1141824

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

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

이제 교차 출처 분리 상태가 Security & 격리 섹션을 참조하세요.

새로운 API 가용성 섹션에는 SharedArrayBuffer (SAB) 및 postMessage()를 사용하여 공유할 수 있는지 여부

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

Chromium 문제: 1139899

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

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

Application 패널에서 웹 작업자가 있는 프레임을 펼친 다음 Workers 트리를 클릭하여 웹 작업자의 세부정보를 볼 수 있습니다.

Chromium 문제: 1122507, 1051466

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

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

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

Chromium 문제: 1107766

Service Workers 창에서 Network 패널 열기

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

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

Chromium 문제: 해당 사항 없음

Network 패널의 새로운 복사 옵션

속성 값 복사

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

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

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

Chromium 문제: 1132084

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

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

Chromium 문제: 1139615

Wasm 디버깅 업데이트

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

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

Sources 패널에서 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는 Elements 패널에 flex 배지가 표시됩니다. display: 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 문제 신고 도움말 > DevTools에서 DevTools 문제를 신고합니다.
• @ChromeDevTools에서 트윗하세요.
• DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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