DevTools의 새로운 기능, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

새 자동 완성 패널

이 버전에서는 DevTools에 새로운 자동 완성 패널을 제공합니다. Chrome 자동 완성은 저장된 주소로 웹사이트의 양식을 자동으로 작성하는 편리한 방법을 제공합니다. 새 자동 완성 패널을 사용하면 양식 필드, 자동 완성 예측 값, 저장된 데이터 간의 매핑을 검사할 수 있습니다.

이 데모 페이지에서 테스트 데이터를 사용하여 새 패널을 사용해 보세요.

  1. 프로필 자동 완성에서 양식 작성 ... 버튼 중 하나를 클릭하고 제출을 클릭한 다음 주소 저장? 대화상자 창에서 저장을 클릭하고 양식이 있는 페이지로 돌아갑니다.
  2. DevTools를 열고 자동 완성 이벤트를 트리거합니다. 양식 필드를 선택하고 드롭다운 목록에서 주소를 선택합니다.

자동 완성 패널이 자동으로 열리고 감지된 양식 입력란, 자동 완성에서 추론한 필드, 저장된 값이 표시됩니다.

자동 완성 패널

자세한 내용은 양식 알아보기 및 자동 완성을 참고하세요.

WebRTC용 향상된 네트워크 제한

맞춤 네트워크 제한 프로필에 패킷 관련 매개변수가 새로 추가되어 이제 DevTools에서 바로 WebRTC 애플리케이션을 제한할 수 있습니다. 이는 서드 파티 소프트웨어를 사용하지 않고도 실시간 통신 구현을 테스트하는 데 유용합니다.

새 매개변수는 패킷 손실(%)과 패킷 대기열 길이 (패킷 수), 패킷 재정렬 플래그입니다.

맞춤 제한 프로필에 새 패킷 관련 옵션을 추가하기 전과 후

WebRTC 연결을 제한하려면 설정 > 제한의 맞춤 프로필에서 패킷 관련 매개변수를 지정하고 네트워크 패널에서 선택합니다.

이 데모 페이지에서 새 매개변수를 사용해 보세요. 먼저 페이지에서 카메라를 사용하도록 허용합니다. 그런 다음 네트워크 패널에서 구성한 맞춤 프로필을 선택하고 페이지로 돌아와 시작 및 호출을 클릭합니다.

Chromium 문제: 41175925

애니메이션 패널에서 스크롤 기반 애니메이션 지원

이제 애니메이션 패널에서 스크롤 기반 애니메이션을 검사할 수 있습니다.

이 데모 페이지에서 이 기능을 사용해 보세요. 애니메이션 패널을 열고 페이지를 새로고침하여 스크롤 기반 애니메이션을 캡처합니다.

마우스 아이콘으로 표시된 스크롤 기반 애니메이션 그룹입니다.

개요에 마우스 아이콘으로 표시된 애니메이션 그룹이 표시됩니다. 이제 검사할 수 있습니다. 그룹은 타임라인에 밀리초 대신 픽셀 값을 표시합니다.

Elements > Styles의 CSS 중첩 지원 개선

요소 > 스타일 탭에서 CSS 중첩 지원이 개선되어 이제 중첩된 스타일이 들여쓰기 및 중괄호로 표시됩니다. CSS 중첩은 CSS 규칙을 그룹화하고 더 간결하고 구조화된 방식으로 만드는 방법입니다.

들여쓰기를 추가하고 중괄호로 중첩된 스타일을 묶은 전후

Chromium 문제: 40166888

향상된 성능 패널

이 버전에서는 성능 패널에 몇 가지 개선사항이 적용되었습니다.

플레임 차트에서 함수 및 하위 함수 숨기기

이제 성능 > 기본에서 플레임 차트의 노이즈를 필터링하기 위해 관련 없는 함수와 하위 요소를 숨길 수 있습니다. Flame 차트에서 함수를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 옵션을 선택합니다.

함수와 하위 요소를 숨길 수 있는 컨텍스트 메뉴를 추가하기 전과 후

숨겨진 하위 요소가 있는 함수에는 오른쪽에 드롭다운 버튼이 있습니다. 아이콘 위로 마우스를 가져가면 숨겨진 자녀 수를 확인할 수 있으며 아이콘을 클릭하면 자녀가 다시 표시됩니다. Flame 그래프의 초기 상태로 돌아가려면 함수를 마우스 오른쪽 버튼으로 클릭하고 트레이스 재설정을 선택합니다.

선택한 시작 조치에서 시작된 이벤트로 이어지는 화살표

이전에는 기본 트랙에서 이벤트를 선택하면 트랙에 이니시에이터에서 선택한 이벤트로 이어지는 화살표가 표시되었습니다. 이제 트랙에 선택한 이벤트에서 시작된 이벤트(있는 경우)로 연결되는 화살표도 표시됩니다.

선택한 이벤트에서 시작된 이벤트로의 화살표와 '표시' 대신 이름이 지정된 링크를 보여주는 전후

또한 이제 모든 이니시에이터의 요약 탭에 Initiator for 필드가 있으며 Initiator for 및 Initiated by 필드 모두 Reveal 대신 이름이 지정된 링크를 갖습니다.

Chromium 문제: 325604258, 325024819, 326055289

Lighthouse 11.6.0

이제 Lighthouse 패널에서 Lighthouse 11.6.0이 실행됩니다. 변경사항 전체 목록을 참고하세요.

눈에 띄는 변경사항 중 하나는 새로운 선택사항인 JavaScript 샘플링 사용 설정 설정입니다. 이 설정은 기본적으로 사용 중지되어 있습니다.

JS 샘플링 선택 설정을 추가하기 전과 후

JS 샘플링을 사용 설정하면 성능 트레이스에 자세한 JavaScript 호출 스택이 추가되지만 보고서 생성 속도가 느려질 수 있습니다.

JS 샘플링 유무에 따른 성능 트레이스(왼쪽: 샘플링 없음, 오른쪽: 샘플링 있음)

트레이스는 Lighthouse 보고서가 생성된 후 도구 메뉴 > 제한되지 않은 트레이스 보기에서 확인할 수 있습니다.

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

Chromium 문제: 772558

메모리 > 힙 스냅샷의 특수 카테고리에 관한 도움말

메모리 패널의 힙 스냅샷에는 생성자를 기반으로 하지 않는 특수한 객체 그룹이 있습니다. 이제 이러한 객체 위로 마우스를 가져가면 메모리 패널에 간단한 설명과 문서의 더 긴 설명 링크가 포함된 도움말이 표시됩니다.

특수 객체 그룹에 대한 설명 툴팁을 보여주는 전후 이미지

Chromium 문제: 41490331

애플리케이션 > 스토리지 업데이트

이 버전에서는 애플리케이션 > 저장용량에 몇 가지 업데이트가 적용됩니다.

공유 저장소에 사용된 바이트 수

이제 애플리케이션 > 저장용량 > 공유 저장용량 섹션에 출처에서 사용한 바이트 수가 표시됩니다.

공유 저장용량에 사용되는 바이트 수를 보여주는 전후 이미지

공유 저장용량을 사용하면 개인 정보 보호 읽기 액세스 권한과 함께 사이트 간 무제한 스토리지 쓰기 액세스 권한을 가질 수 있습니다.

Chromium 문제: 324464353

웹 SQL이 완전히 지원 중단됨

Chrome은 버전 119에서 WebSQL을 지원 중단하고 이 버전에서 지원 중단 기능 트라이얼 토큰을 삭제했으므로 더 이상 WebSQL을 사용할 수 없습니다.

이에 따라 DevTools에서 Application 패널에서 Web SQL 섹션을 삭제했습니다.

Chromium 문제: 327254049

노출 범위 패널 개선

이 버전에서는 노출 범위 패널에 몇 가지 업데이트가 적용됩니다.

  • 이제 상태 표시줄에서 필터링된 URL의 사용 통계를 올바르게 계산합니다. 이전에는 필터와 일치하는 하위 요소의 사용 데이터를 합산하는 대신 상위 요소의 데이터를 합산했습니다.

일치하는 하위 요소 통계를 올바르게 계산하기 전과 후

  • 특히 녹색 색각 이상이 있는 사용자의 가시성을 개선하기 위해 사용된 코드의 색상이 녹색 대신 회색으로 변경되었습니다.

사용된 코드의 색상을 회색으로 변경하기 전과 후

Chromium 문제: 41494198, 329253687

레이어 패널이 지원 중단될 수 있음

사용 빈도가 낮아 레이어 패널이 곧 지원 중단될 수 있습니다. 이제 패널 상단에 경고 배너가 표시됩니다.

레이어 패널 상단에 잠재적인 지원 중단을 알리는 경고 배너

YouTube에서 패널 지원 중단을 최종 결정하기 전에 언제든지 의견과 우려사항을 공유해 주세요.

JavaScript 프로파일러 지원 중단: 4단계, 최종 단계

이 버전에서는 JS 프로파일러 패널이 완전히 지원 중단되었으며 더 이상 다시 사용 설정할 수 없습니다.

CPU 성능을 프로파일링하려면 성능 패널을 사용합니다.

Chromium 문제: 40262073

기타 하이라이트

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

  • 네트워크:
    • 여러 줄 쿠키가 잘못 파싱되는 버그를 수정했습니다. (325410304)
    • Initiator 열의 호출 스택 미리보기가 수정되었습니다 (327665602).
  • 성능 모니터: 추적 체크박스가 이제 나머지 UI와 동일합니다 (1467464).
  • 소스: XHTML 문서의 구문 강조 표시를 추가했습니다 (327940244).
  • 설정 > 기기: 기존 Galaxy Fold가 최신 Galaxy Z Fold 5 (40113439)로 대체되었습니다.
  • 성능: 이제 Ctrl/Cmd+F (1523279)를 사용하여 검색할 때 일치하는 모든 검색 결과가 강조 표시됩니다.
  • 개발자 리소스: 이제 C/C++ DevTools 지원 (DWARF) Chrome 확장 프로그램 (40746829)과 같은 언어 확장 프로그램을 통해 로드된 리소스도 표시됩니다.
  • 성능: 요약 탭에서 잘린 호출 스택과 잘못된 레이아웃이 수정되었습니다. (325314708)
  • 창: 이제 닫기 버튼에 포커스를 설정할 수 있으므로 키보드를 사용하여 패널을 닫을 수 있습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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