DevTools의 새로운 기능 (Chrome 102)

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

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

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

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

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

이는 웹 개발자 (특히 비성능 전문가)가 잠재적인 성능 문제를 식별하고 해결하는 데 도움이 되는 미리보기 기능입니다. Google팀에서는 이 기능을 제공하기 위해 최선을 다하고 있으며, 추가적인 개선을 위해 의견을 보내주시기 바랍니다.

Chromium 문제: 1270700

밝은 테마와 어두운 테마를 에뮬레이션하는 새로운 단축키

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

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

Chromium 문제: 1314299

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

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

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

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

Chromium 문제: 833147

중단점에서 새로고침 개선

이제 중단점에서 다시 로드하면 디버거가 스크립트 실행을 종료합니다.

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

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

Chromium 문제: 1014415, 1004038, 1112863, 1134899

콘솔 업데이트

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

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

Chromium 문제: 1295750

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

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

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

Chromium 문제: 1260744

시작 시 사용자 플로우 녹화 취소

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

Chromium 문제: 1257499

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

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

사양에서 언급했듯이 여러 스타일이 충돌하는 경우 계단식에 따라 최적의 스타일이 결정됩니다. 이 새로운 기능은 규칙의 상속 및 우선순위를 이해하는 데 도움이 됩니다.

Chromium 문제: 1024156

기타 주요 정보

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

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

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

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

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

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

Chromium 문제: 1268754

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

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

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

Chromium 문제: 1245191

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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