DevTools의 새로운 기능, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

네트워크 패널 개선

이 버전에서는 Network 패널이 많이 개선되었습니다.

새로운 네트워크 필터

네트워크 패널에는 사용자 의견을 반영한 새로운 필터가 제공됩니다. 유형별 필터는 동일하게 유지됩니다. 즉, 깔끔한 다중 선택 막대에 일련의 배지가 표시됩니다.

UI를 깔끔하게 유지하기 위해 숨기기, 차단, 타사 관련 체크박스가 드롭다운 목록 아래로 이동합니다. 이 목록에는 드롭다운 아래에 선택된 필터의 수가 표시됩니다.

숨기기, 차단, 서드 파티 관련 필터를 드롭다운 아래로 이동하기 전과 후

이전 필터 디자인을 되돌리려면 설정 > 실험 > 네트워크 패널의 필터 표시줄 디자인 변경

새로워진 디자인에 대한 의견을 알려주세요.

Chromium 문제: 362672528

이제 HAR 내보내기에서 기본적으로 민감한 정보가 제외됩니다.

민감한 정보가 실수로 유출되는 가능성을 줄이기 위해 HAR 형식으로 내보낸 네트워크 로그에는 기본적으로 더 이상 Cookie, Set-Cookie, Authorization 헤더가 포함되지 않습니다.

민감한 정보가 포함된 HAR 형식으로 로그를 내보내려면 설정을 사용 설정합니다. 환경설정 > 네트워크 > 민감한 정보로 HAR을 생성하도록 허용 네트워크 패널에 내보내기 버튼이 화살표로 표시됩니다. 버튼을 길게 클릭하고 드롭다운 메뉴에서 HAR 내보내기(민감한 정보 포함)를 선택합니다.

민감한 정보가 포함된 내보내기 옵션과 포함되지 않은 내보내기 옵션을 HAR 내보내기에 추가하기 전과 후

Chromium 문제: 361717594

요소 패널 개선

이 버전에서는 요소 패널이 여러 가지로 개선되었습니다.

text-emphasis-* 속성의 자동 완성 값

이제 스타일 탭의 자동 완성 기능에서 다음 CSS 속성의 값을 제안합니다.

'text-emphasis-*' 속성에 자동 완성 옵션을 추가하기 전과 후

Chromium 문제: 361471205

배지로 표시된 스크롤 오버플로

이제 요소 패널에서 오버플로 콘텐츠가 포함되어 있고 overflow: scroll 또는 overflow: auto가 있는 요소를 새로운 '스크롤' 배지로 표시하므로 스크롤 오버플로를 쉽게 찾을 수 있습니다. 다른 배지와 마찬가지로 이 배지는 현재 DOM을 반영하며 크기 변경과 같은 이유로 콘텐츠의 오버플로가 중지되면 사라집니다.

스크롤을 표시하기 전후에 배지가 오버플로됩니다.

Chromium 문제: 40670442

중첩된 규칙 뒤의 맨 바른 선언이 '위로 이동'되지 않음

중첩된 규칙 뒤에 기본 선언이 오도록 허용하기 위한 CSS 실무 그룹의 결정에 따라 이제 스타일 탭이 '위로 이동'되지 않습니다. 이러한 선언이 사용됩니다

다음 코드 샘플에서 이제 중첩된 규칙 뒤의 기본 선언으로 인해 Chrome에서 예기치 않게 캐스케이드 시 스타일이 재정렬되지 않습니다.

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

중첩된 규칙 뒤에 맨 바른 선언을 허용하기 전과 후

Chromium 문제: 358119261

성능 패널 개선

이 버전에서는 성능 패널이 여러 가지로 개선되었습니다.

실시간 측정항목의 추천

이제 실시간 측정항목에서 개발 환경을 사용자 환경과 최대한 유사하게 구성하는 데 도움이 되는 측정항목별 권장사항을 제공할 수 있습니다.

추천을 받으려면 Chrome UX 보고서 (CrUX)에서 필드 데이터 가져오기를 설정하고, 각 측정항목 카드 (있는 경우)의 로컬 테스트 조건 고려 섹션과 환경 설정의 실제 사용자 환경 고려 섹션을 펼칩니다.

추천과 함께 섹션을 펼쳤습니다.

권장사항에 따라 사용자의 경험을 대략적으로 파악하세요.

이제 실적 녹화의 타임라인에서 탐색경로를 탐색할 수 있습니다. 탐색경로 간에 '이리저리 이동'하고, 하위 탐색경로를 덮어쓰고, 여러 하위 탐색경로를 삭제할 수 있습니다. 이전에는 상위 탐색경로를 선택하면 하위 탐색경로가 사라졌습니다.

메모리 패널 개선사항

이 버전에서는 메모리 패널에 여러 가지 개선사항이 적용되었습니다.

새로운 '분리된 요소' 프로필

메모리 패널에 새로운 프로필 유형인 분리된 요소가 추가되었습니다. JavaScript 참조에 의해 보관되는 객체를 표시합니다.

메모리 패널에 '분리된 요소' 프로필 유형을 추가하기 전과 후

Chromium 문제: 350519222

일반 JS 객체의 이름 지정 개선

힙 스냅샷에서 Object 카테고리를 정리하고 정돈하기 위해 이제 일반 JavaScript 객체는 다음과 같습니다.

  • 포함된 속성에 따라 이름이 지정됩니다(예: {firstProperty, secondProperty, ..., *nthProperty}).
  • DevTools에서 생성된 이러한 이름으로 검색할 수 있습니다.
  • 속성이 동일하면 함께 그룹화됩니다.

힙 스냅샷에서 객체 카테고리를 구성하기 전과 후

Chromium 문제: 350519222

동적 테마 설정 사용 중지

이제 Chrome에서 DevTools 색상과 맞춤 테마 색상 자동 일치를 사용 중지할 수 있습니다.

동적 테마 설정을 사용 중지하려면 Settings > Preferences > Appearance > Match Chrome color scheme를 선택 해제하고 DevTools를 새로고침합니다.

동적 테마 설정을 사용 중지하기 전과 후

Chromium 문제: 328472696

Chrome 실험: 프로세스 공유

일반적으로 동일한 웹사이트(예: Google Docs)에서 여러 탭을 열면 Chrome에서 각각에 대해 별도의 렌더러 프로세스를 만듭니다. 프로세스 공유 실험은 여러 탭에서 동일한 렌더러 프로세스를 공유하여 성능을 개선할 수 있도록 허용하여 이를 변경합니다.

'이 탭은 리소스를 다른 탭과 공유합니다...'라는 메시지가 표시되는 경우 정보 표시줄이 열려 있을 때 DevTools가 열려 있는 동안 프로세스 공유 실험이 사용 설정된 소규모 그룹에 참여하게 됩니다.

'이 탭은 다른 탭과 리소스를 공유합니다...' 정보 표시줄

프로세스 공유는 중단점 디버깅 및 성능 분석에 영향을 줄 수 있습니다. 자세한 내용은 Chrome 실험: 프로세스 공유를 참고하세요.

Lighthouse 12.2.1

이제 Lighthouse 패널에서 Lighthouse 12.2.1이 실행됩니다.

이 업데이트에서는 유의미한 파일 크기 절약에만 집중할 수 있도록 리소스 압축 추천에 관한 < 20 KB 무시 기준점이 도입되었습니다. 변경사항 전체 목록을 참고하세요.

DevTools에서 Lighthouse 패널을 사용하는 기본적인 방법을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.

Chromium 문제: 772558

기타 주요 정보

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

  • 요소: <ph type="x-smartling-placeholder">
      </ph>
    • 중첩된 CSS 수정 관련 여러 수정사항이 적용되었습니다. (41486635, 361477264, 328263458, 41487826)
    • 정의되었지만 값이 비어 있는 맞춤 속성 파싱이 정의되지 않음으로 수정되었습니다. (365578428)
  • 콘솔: cURL 명령어의 여러 줄 문자열에서 이스케이프 처리되지 않은 앰퍼샌드가 수정되었습니다(352651673).
  • 메모리: 서비스 워커가 있는 페이지의 기본 선택을 수정했습니다. 이제 기본 스레드가 선택됩니다(40669896).
  • 보안: 이제 출처의 보안 단계가 변경되면 강조 표시된 URL 스키마가 올바르게 업데이트됩니다 (359920086).

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

DevTools의 새로운 기능

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