DevTools의 새로운 기능 (Chrome 96)

Jecelyn Yeen

미리보기 기능: 새로운 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 규칙을 자바스크립트 속성으로 쉽게 복사할 수 있도록 컨텍스트 메뉴에 두 가지 새로운 옵션이 추가되었습니다. 이러한 바로가기 옵션은 특히 CSS-in-JS 라이브러리를 사용하는 개발자에게 유용합니다.

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

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

선언을 JavaScript로 복사

Chromium 문제: 1253635

Network 패널의 새로운 Payload 탭

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

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

Chromium 문제: 1214030

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

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

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

속성 창에 속성이 표시됨

Chromium 문제: 1226262

콘솔 업데이트

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

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

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

콘솔에서 CORS 오류를 숨기는 옵션

Chromium 문제: 1251176

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

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

Console의 Intl 객체

Chromium 문제: 1073804

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

이제 Console에서 다른 비동기 작업과 일관되고 호출 스택에 표시되는 것과 일치하도록 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, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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