이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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 선호 대비 미디어 기능 에뮬레이션

선호도 대비 미디어 기능은 사용자가 페이지의 대비를 더 많이 또는 더 적게 요청했는지 감지하는 데 사용됩니다.

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

Chromium 문제: 1139777

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

DevTools로 자동 어두운 테마를 에뮬레이션하면 Chrome의 자동 어두운 테마가 사용 설정되었을 때 페이지가 어떻게 보이는지 쉽게 확인할 수 있습니다.

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

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

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

Chromium 문제: 1243309

Styles 창에서 선언을 JavaScript로 복사

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

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

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

선언을 자바스크립트로 복사

Chromium 문제: 1253635

Network 패널의 새 페이로드 탭

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

Network 패널의 페이로드 탭

Chromium 문제: 1214030

속성 창의 속성 표시 개선

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

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

속성 창의 속성 표시

Chromium 문제: 1226262

콘솔 업데이트

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

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

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

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

Chromium 문제: 1251176

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

이제 Intl 객체의 미리보기가 제대로 제공되며 Play Console에서 즉시 평가됩니다. 이전에는 Intl 객체를 빠르게 평가하지 않았습니다.

Console의 Intl 객체

Chromium 문제: 1073804

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

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

비동기 스택 트레이스

Chromium 문제: 1254259

Console 사이드바는 계속 사용할 수 있습니다. Chrome 94에서 Google은 Console 사이드바의 예정된 지원 중단을 발표했으며 개발자에게 의견과 우려사항을 요청합니다.

현재 지원 중단 알림을 통해 충분한 의견을 받았으며 사이드바를 삭제하는 대신 개선하기 위해 노력할 것입니다.

콘솔 사이드바

Chromium 문제: 1232937, 1255586

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

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

Chromium 문제: 1084190

[실험용] Application 패널의 새로운 Reporting API 창

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

이 실험이 사용 설정되면 이제 애플리케이션 패널의 새로운 Reporting API 창에서 보고서 상태를 볼 수 있습니다.

엔드포인트 섹션은 현재 개발 중입니다 (현재는 보고 엔드포인트가 표시되지 않음).

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

Application 패널의 Reporting API 창

Chromium 문제: 1205856

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

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