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

CSS 선호 대비 미디어 기능 에뮬레이션

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

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

Chromium 문제: 1139777

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

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

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

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

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

Chromium 문제: 1243309

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

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

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

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

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

Chromium 문제: 1253635

Network 패널의 새로운 Payload 탭

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

Network 패널의 페이로드 탭

Chromium 문제: 1214030

속성 창의 속성 표시 개선

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

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

속성 창의 속성 표시

Chromium 문제: 1226262

콘솔 업데이트

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

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

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

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

Chromium 문제: 1251176

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

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

콘솔의 국제 객체

Chromium 문제: 1073804

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

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

비동기 스택 트레이스

Chromium 문제: 1254259

Console 사이드바 유지

콘솔 사이드바는 계속 표시됩니다. Chrome 94에서는 Console 사이드바의 지원 중단 예정을 발표했으며 개발자에게 의견과 우려를 요청하세요.

이제 지원 중단 알림을 통해 충분한 의견을 받았으며, 사이드바를 삭제하는 대신 개선 작업을 진행할 예정입니다.

콘솔 사이드바

Chromium 문제: 1232937, 1255586

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

Chrome 및 기타 Chromium 기반 브라우저에서 AppCache 지원이 중단됨에 따라 이제 Application 패널의 Application cache(애플리케이션 캐시) 창이 삭제됩니다.

Chromium 문제: 1084190

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

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

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

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

Reporting API에 대해 자세히 알아보려면 이 도움말을 참고하세요.

Application 패널의 Reporting API 창

Chromium 문제: 1205856

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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