DevTools의 새로운 기능 (Chrome 102)

Jecelyn Yeen

미리보기 기능: 새로운 성능 통계 패널

실적 통계 패널을 사용하여 웹사이트 실적에 관한 활용 가능한 사용 사례 기반 통계를 확인합니다.

패널을 열고 사용 사례에 따라 새 녹화를 시작합니다. 예를 들어 이 데모 페이지의 페이지 로드를 측정해 보겠습니다.

새로운 성능 통계 패널

녹화가 완료되면 통계 창에 실적 통계가 표시됩니다. 각 통계 항목 (예: 렌더링 차단 요청, 레이아웃 전환)을 클릭하여 문제와 잠재적 해결 방법을 파악합니다.

성능 통계 패널 문서로 이동하여 단계별 튜토리얼을 통해 자세히 알아보세요.

이 기능은 웹 개발자 (특히 성능 전문가가 아닌 개발자)가 잠재적인 성능 문제를 파악하고 해결하는 데 도움이 되는 미리보기 기능입니다. Chrome팀은 최선을 다해 이 기능을 개발하고 있으며 추가 개선을 위한 의견을 기다리고 있습니다.

Chromium 문제: 1270700

밝은 테마와 어두운 테마를 에뮬레이션하는 새로운 바로가기

이제 스타일 창의 새로운 바로가기를 사용하여 밝은 테마와 어두운 테마를 더 빠르게 에뮬레이션할 수 있습니다 (CSS 미디어 기능 prefers-color-scheme).

이전에는 렌더링 탭에서 테마를 에뮬레이션하는 데 더 많은 단계가 필요했습니다.

밝은 테마와 어두운 테마를 에뮬레이션하는 새로운 바로가기

Chromium 문제: 1314299

네트워크 미리보기 탭의 보안이 개선되었습니다.

이제 DevTools에서 네트워크 패널의 미리보기 탭에 콘텐츠 보안 정책 (CSP)을 적용합니다.

예를 들어 첫 번째 스크린샷에는 혼합 콘텐츠가 포함된 페이지가 표시됩니다. 페이지는 보안 HTTPS 연결을 통해 로드되지만 스타일시트는 안전하지 않은 HTTP 연결을 통해 로드됩니다.

브라우저가 기본적으로 스타일시트 요청을 차단했습니다. 하지만 네트워크 패널의 미리보기 탭을 통해 페이지를 열면 이전에 스타일시트가 차단되지 않았으므로 배경이 빨간색으로 변했습니다. 예상대로 차단되었습니다 (두 번째 스크린샷).

네트워크 미리보기 탭에서 보안 개선

Chromium 문제: 833147

중단점에서의 새로고침 개선

이제 디버거가 중단점에서 새로고침할 때 스크립트 실행을 종료합니다.

예를 들어 이전에는 이 React 데모에서 ReactDOM 중단점에서 설정하고 새로고침할 때 스크립트가 무한 루프에 빠졌습니다. 무한 루프로 인해 소스 패널이 손상되었습니다.

JavaScript를 계속 실행하면 개발자에게 많은 문제가 발생하고 렌더러가 손상된 상태로 남을 수 있습니다. 이 변경사항은 디버깅 동작을 Firefox와 같은 다른 브라우저와 일치시킵니다.

중단점에서의 새로고침 개선

Chromium 문제: 1014415, 1004038, 1112863, 1134899

콘솔 업데이트

콘솔에서 스크립트 실행 오류 처리

이제 콘솔에서 스크립트 평가 중에 발생하는 오류는 window.onerror 핸들러를 트리거하고 window 객체에서 "error" 이벤트로 전달되는 적절한 오류 이벤트를 생성합니다.

콘솔에서 스크립트 실행 오류 처리

Chromium 문제: 1295750

Enter 키로 실시간 표현식 커밋

실시간 표현식을 입력한 후 Enter 아이콘을 클릭하여 커밋할 수 있습니다. 이전에는 Enter 키를 누르면 새 줄이 추가되었습니다. 이는 DevTools의 다른 부분과 일치하지 않습니다.

실시간 표현식 편집기에 새 줄을 추가하려면 대신 Shift + Enter를 사용하세요.

Enter 키로 실시간 표현식 커밋

Chromium 문제: 1260744

시작 시 사용자 흐름 녹화 취소

사용자 흐름 녹화를 시작하는 동안 녹화를 취소할 수 있습니다. 이전에는 녹음을 취소할 수 있는 옵션이 없었습니다.

시작 시 사용자 흐름 녹화 취소

Chromium 문제: 1257499

스타일 창에 상속된 강조 표시 가상 요소 표시

스타일 창에서 상속된 강조 표시 가상 요소 (예: ::selection, ::spelling-error, ::grammar-error, ::highlight)를 확인합니다. 이전에는 이러한 규칙이 표시되지 않았습니다.

사양에 언급된 대로 여러 스타일이 충돌하면 계단식 적용을 통해 적용할 스타일이 결정됩니다. 이 새로운 기능을 사용하면 규칙의 상속 및 우선순위를 파악할 수 있습니다.

스타일 창에 상속된 강조 표시 가상 요소 표시

Chromium 문제: 1024156

기타 하이라이트

이번 출시에서 주목할 만한 수정사항은 다음과 같습니다.

  • 이제 속성 창에 기본적으로 값이 있는 접근자 속성이 표시됩니다. 이전에 실수로 숨겨졌습니다. (1309087)
  • 이제 재정의된 @support 규칙이 스타일 창에 취소선으로 올바르게 표시됩니다. 이전에는 규칙이 취소선이 지워지지 않았습니다. (1298025)
  • CSS를 수정할 때 여러 개의 빈 줄이 발생하는 소스 패널의 CSS 형식 지정 로직이 수정되었습니다. (1309588)
  • 원형 객체의 확장 재귀 옵션을 콘솔에서 최대 100으로 제한하여 무한히 진행되지 않도록 합니다. (1272450)

[실험용] CSS 변경사항 복사

이 실험에서는 스타일 창에 CSS 변경사항이 녹색으로 강조표시됩니다. 변경된 규칙 위로 마우스를 가져간 다음 옆에 있는 새 복사 버튼을 클릭하여 복사할 수 있습니다.

그 외에도 규칙을 마우스 오른쪽 버튼으로 클릭하고 모든 CSS 변경사항 복사를 선택하여 선언 전체에서 모든 CSS 변경사항을 복사할 수 있습니다.

CSS 변경사항을 쉽게 추적하고 복사할 수 있도록 변경사항 탭에 새로운 복사 버튼이 추가되었습니다.

CSS 변경사항 복사

Chromium 문제: 1268754

[실험용] 브라우저 외부에서 색상 선택

이 실험을 사용 설정하면 색상 선택 도구로 브라우저 외부에서 색상을 선택할 수 있습니다. 이전에는 브라우저 내에서만 색상을 선택할 수 있었습니다.

스타일 창에서 색상 미리보기를 클릭하여 색상 선택 도구를 엽니다. 스포이트를 사용하여 어디서나 색상을 선택할 수 있습니다.

브라우저 외부에서 색상 선택

Chromium 문제: 1245191

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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