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

DevTools의 새로운 기능 (Chrome 102)

Jecelyn Yeen

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

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

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

새로운 성능 통계 패널

기록이 완료되면 통계 창에서 성능 통계를 확인할 수 있습니다. 각 통계 항목 (예: 렌더링 차단 요청, 레이아웃 변경)을 클릭하여 문제 및 가능한 해결 방법을 파악하세요.

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

이 기능은 웹 개발자 (특히 성능이 낮은 전문가)가 잠재적인 성능 문제를 파악하고 해결할 수 있도록 도와주는 미리보기 기능입니다. Google팀에서는 이 기능을 개선하기 위해 적극적으로 노력하고 있으며, 향후 추가 개선을 위한 의견을 보내주시기 바랍니다.

Chromium 문제: 1270700

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

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

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

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

Chromium 문제: 1314299

네트워크 미리보기 탭의 보안 강화

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

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

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

네트워크 미리보기 탭의 보안 강화

Chromium 문제: 833147

중단점에서 새로고침 개선

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

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

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

중단점에서 새로고침 개선

Chromium 문제: 1014415, 1004038, 1112863, 1134899

콘솔 업데이트

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

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

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

Chromium 문제: 1295750

Enter 키를 사용하여 실시간 표현식 커밋

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

라이브 표현식 편집기에서 새 줄을 추가하려면 Shift + Enter를 대신 사용합니다.

Enter 키를 사용하여 실시간 표현식 커밋

Chromium 문제: 1260744

시작 시 사용자 플로우 기록 취소

사용자 플로우 녹화를 시작하는 동안 기록을 취소할 수 있습니다. 이전에는 녹화를 취소할 수 있는 옵션이 없었습니다.

시작 시 사용자 플로우 기록 취소

Chromium 문제: 1257499

Styles 창에 상속된 강조 표시 유사 요소 표시

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

사양에서 언급한 대로 여러 스타일이 충돌하면 cascade가 가장 적합한 스타일을 결정합니다. 이 새로운 기능은 규칙의 상속과 우선순위를 이해하는 데 도움이 됩니다.

참고: 이 기능을 사용 설정하려면 현재 --enable-blink-features=HighlightInheritance 플래그로 Chrome을 실행해야 합니다.

Styles 창에 상속된 강조 표시 유사 요소 표시

Chromium 문제: 1024156

기타 주요 사항

다음은 이번 버전에서 주목할 만한 수정사항입니다.

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

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

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

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

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

CSS 변경사항 복사

Chromium 문제: 1268754

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

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

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

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

Chromium 문제: 1245191

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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