DevTools의 새로운 기능 (Chrome 96)

미리보기 기능: 새로운 CSS 개요 패널

새로운 CSS 개요 패널을 사용하여 페이지에서 개선이 가능한 CSS 항목을 파악하세요. CSS 개요 패널을 열고 개요 캡처를 클릭하여 페이지의 CSS 보고서를 생성합니다.

정보를 더 자세히 살펴볼 수 있습니다. 예를 들어 색상 섹션에서 색상을 클릭하면 동일한 색상이 적용된 요소 목록이 표시됩니다. 요소를 클릭하여 요소 패널에서 요소를 엽니다.

CSS 개요 패널은 미리보기 기능입니다. Google은 이 기능을 개선하기 위해 최선을 다하고 있으며, 추가 개선을 위한 의견을 기다리고 있습니다.

CSS 개요 패널에 대해 자세히 알아보려면 이 도움말을 참고하세요.

CSS 개요 패널

Chromium 문제: 1254557

CSS 길이 수정 및 복사 환경을 복원하고 개선했습니다.

길이가 있는 CSS 속성에 대해 CSS 복사텍스트로 수정 환경이 복원됩니다. 이러한 환경은 이전 버전에서 손상되었습니다.

또한 드래그하여 단위 값을 조정하고 드롭다운을 통해 단위 유형을 업데이트할 수 있습니다. 이 부가기능 길이 작성 기능은 텍스트로 기본 수정 환경에 영향을 미치지 않아야 합니다.

문제가 발견되면 goo.gle/length-feedback을 통해 신고해 주세요.

설정 > 실험 > 스타일 창에서 CSS 길이 작성 도구 사용 설정 체크박스를 통해 사용 중지할 수 있습니다.

Chromium 문제: 1259088, 1172993

탭 업데이트 렌더링

CSS prefers-contrast 미디어 기능 에뮬레이션

CSS prefers-contrast 미디어 기능 에뮬레이션

prefers-contrast 미디어 기능은 사용자가 페이지의 대비를 더 높게 또는 더 낮게 요청했는지 감지하는 데 사용됩니다.

명령어 메뉴를 열고 렌더링 표시 명령어를 실행한 다음 CSS 미디어 기능 prefers-contrast 에뮬레이션 드롭다운을 설정합니다.

Chromium 문제: 1139777

Chrome의 자동 어두운 테마 기능 에뮬레이션

DevTools를 사용하여 자동 어두운 테마를 에뮬레이션하여 Chrome의 자동 어두운 테마가 사용 설정된 경우 페이지가 어떻게 표시되는지 쉽게 확인할 수 있습니다.

Chrome 96에서는 Android의 자동 어두운 테마에 관한 오리진 트라이얼을 도입합니다. 이 기능을 사용하면 사용자가 운영체제에서 어두운 테마를 선택한 경우 브라우저가 밝은 테마 사이트에 자동 생성된 어두운 테마를 적용합니다.

명령어 메뉴를 열고 렌더링 표시 명령어를 실행한 다음 자동 어두운 모드 에뮬레이션 드롭다운을 설정합니다.

Chrome의 자동 어두운 테마 기능 에뮬레이션

Chromium 문제: 1243309

스타일 창에서 선언을 JavaScript로 복사

CSS 규칙을 JavaScript 속성으로 쉽게 복사할 수 있는 두 가지 새로운 옵션이 컨텍스트 메뉴에 추가되었습니다. 이러한 바로가기 옵션은 특히 CSS-in-JS 라이브러리를 사용하는 개발자에게 유용합니다.

스타일 창에서 CSS 규칙을 마우스 오른쪽 버튼으로 클릭합니다. 선언을 JS로 복사를 선택하여 단일 규칙을 복사하거나 모든 선언을 JS로 복사를 선택하여 모든 규칙을 복사할 수 있습니다.

예를 들어 아래 예에서는 paddingLeft: '1.5rem'를 클립보드에 복사합니다.

선언을 JavaScript로 복사

Chromium 문제: 1253635

네트워크 패널의 새 페이로드 탭

페이로드가 있는 네트워크 요청을 검사할 때는 네트워크 패널의 새 페이로드 탭을 사용하세요. 이전에는 페이로드 정보를 헤더 탭에서 확인할 수 있었습니다.

네트워크 패널의 페이로드 탭

Chromium 문제: 1214030

속성 창의 속성 표시가 개선되었습니다.

이제 속성 창에 인스턴스의 모든 속성이 표시되는 대신 관련 속성만 표시됩니다. DOM 프로토타입 및 메서드가 삭제되었습니다.

Chrome 95의 속성개선사항과 함께 이제 관련 속성을 더 쉽게 찾을 수 있습니다.

속성 창에 속성이 표시됨

Chromium 문제: 1226262

콘솔 업데이트

Console에서 CORS 오류를 숨기는 옵션

Console에서 CORS 오류를 숨길 수 있습니다. 이제 CORS 오류가 문제 탭에 보고되므로 Console에서 CORS 오류를 숨기면 혼잡을 줄일 수 있습니다.

콘솔에서 설정 아이콘을 클릭하고 콘솔에 CORS 오류 표시 체크박스를 선택 해제합니다.

Console에서 CORS 오류를 숨기는 옵션

Chromium 문제: 1251176

콘솔에서 적절한 Intl 객체 미리보기 및 평가

이제 Intl 객체에 적절한 미리보기가 제공되며 Console에서 즉시 평가됩니다. 이전에는 Intl 객체가 조기에 평가되지 않았습니다.

Console의 Intl 객체

Chromium 문제: 1073804

일관된 비동기 스택 트레이스

이제 콘솔은 async 함수의 async 스택 트레이스를 다른 비동기 작업과 일치하고 호출 스택에 표시된 내용과 일치하도록 보고합니다.

비동기 스택 트레이스

Chromium 문제: 1254259

콘솔 사이드바 유지

콘솔 사이드바는 계속 제공됩니다. Chrome 94에서는 콘솔 사이드바의 지원 중단을 발표하고 개발자의 의견과 우려사항을 요청했습니다.

이제 지원 중단 알림을 통해 충분한 의견을 수집했으며 사이드바를 삭제하는 대신 개선하기 위해 노력할 예정입니다.

콘솔 사이드바

Chromium 문제: 1232937, 1255586

애플리케이션 패널의 지원 중단된 애플리케이션 캐시 창

Chrome 및 기타 Chromium 기반 브라우저에서 AppCache 지원이 삭제됨에 따라 애플리케이션 패널의 애플리케이션 캐시 창이 삭제되었습니다.

Chromium 문제: 1084190

[실험용] 애플리케이션 패널의 새 Reporting API 창

Reporting API는 페이지의 보안 위반, 지원 중단된 API 호출 등을 모니터링하는 데 도움이 되도록 설계되었습니다.

이 실험을 사용 설정하면 애플리케이션 패널의 새 Reporting API 창에서 보고서 상태를 확인할 수 있습니다.

엔드포인트 섹션은 현재 개발 중이며 아직 보고 엔드포인트가 표시되지 않습니다.

이 도움말을 통해 Reporting API에 대해 자세히 알아보세요.

애플리케이션 패널의 Reporting API 창

Chromium 문제: 1205856

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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