DevTools의 새로운 기능, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

네트워크 패널 개선사항

이 버전에서는 네트워크 패널에 여러 가지 개선사항이 적용되었습니다.

새로운 네트워크 필터

네트워크 패널에 사용자 의견을 바탕으로 새롭게 설계된 새로운 필터가 추가되었습니다. 유형별 필터는 동일하게 유지됩니다. 깔끔한 다중 선택 표시줄에 배지 세트가 표시됩니다.

UI를 정리하기 위해 숨기기, 차단, 서드 파티 관련 체크박스가 드롭다운 목록 아래로 이동합니다. 목록에는 드롭다운 아래에 선택된 필터 수가 표시됩니다.

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

이전 필터 디자인을 복원하려면 Settings > Experiments > Redesign of the filter bar in the Network panel을 선택 해제합니다.

새롭게 디자인된 의견을 보내주세요.

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 색상을 맞춤 테마 색상과 자동으로 일치시키는 기능을 사용 중지할 수 있습니다.

동적 테마 설정을 사용 중지하려면 설정 > 환경설정 > 모양 > Chrome 색 구성표와 일치를 선택 해제하고 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

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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