DevTools의 새로운 기능, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

네트워크 패널 개선사항

이 버전에서는 네트워크 패널이 여러 면에서 개선되었습니다.

새로운 네트워크 필터

네트워크 패널에 사용자 의견을 반영하여 새롭게 디자인된 필터가 추가됩니다. 유형별 필터는 깔끔한 다중 선택 표시줄의 배지 세트로 동일하게 유지됩니다.

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

동적 테마를 사용 중지하려면 설정 > 환경설정 > 모양 > 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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.