DevTools의 새로운 기능, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

새 자동 완성 패널

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

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

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

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

자동 완성 패널

자세한 내용은 Google Forms 학습하기 및 자동 완성을 참고하세요.

WebRTC의 향상된 네트워크 제한

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

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

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

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

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

Chromium 문제: 41175925

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

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

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

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

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

요소 > 스타일에서 CSS 중첩 지원 개선

요소 > 스타일 탭에서 CSS 중첩 지원이 개선되었으며 이제 중첩된 스타일이 들여쓰기와 중괄호로 표시됩니다. CSS 중첩은 CSS 규칙을 함께 그룹화하여 장황함을 줄이고 구조를 더 만드는 방법입니다.

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

Chromium 문제: 40166888

향상된 성능 패널

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

플레임 차트에서 함수와 하위 항목 숨기기

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

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

숨겨진 하위 요소가 있는 함수에는 오른쪽에 드롭다운 버튼이 있습니다. 숨겨진 하위 요소의 수를 확인하려면 마우스를 가져가고, 다시 표시하려면 클릭하세요. Flame 차트의 초기 상태로 돌아가려면 함수를 마우스 오른쪽 버튼으로 클릭하고 추적 재설정을 선택합니다.

선택한 이니시에이터에서 시작된 이벤트로 향하는 화살표

이전에는 Main 트랙에서 이벤트를 선택하면 트랙에 시작자에서 선택한 이벤트로 향하는 화살표가 표시되었습니다. 이제 트랙에는 선택한 이벤트에서 시작된 이벤트로 향하는 화살표도 표시됩니다(있는 경우).

선택한 이벤트에서 시작된 이벤트로 향하는 화살표와 이름이 지정된 링크가 표시됩니다.

또한 이제 모든 이니시에이터의 요약 탭에 이니시에이터 필드가 표시되며 이니시에이터 및 시작자 필드에 표시 대신 이름이 지정된 링크가 표시됩니다.

Chromium 문제: 325604258, 325024819, 326055289

Lighthouse 11.6.0

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

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

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

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

JavaScript 샘플링이 없는 (왼쪽) 경우와 있는 (오른쪽) 경우의 성능 트레이스

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

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

Chromium 문제: 772558

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

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

특수 객체 그룹의 설명이 포함된 도움말을 보여주는 전후 이미지

Chromium 문제: 41490331

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

이 버전에서는 애플리케이션 > 저장소가 업데이트되었습니다.

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

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

공유 스토리지에 사용된 바이트 수를 보여주는 전후 이미지

Shared Storage를 사용하면 개인 정보 보호 읽기 액세스 권한으로 무제한 크로스 사이트 스토리지 쓰기 액세스 권한을 부여할 수 있습니다.

Chromium 문제: 324464353

Web SQL이 완전히 지원 중단됨

Chrome 버전 119에서 Web SQL이 지원 중단되었으며 이 버전에서 지원 중단 기능 트라이얼 토큰이 삭제되었으므로 더 이상 Web SQL을 사용할 수 없습니다.

이에 따라 DevTools에서는 애플리케이션 패널에서 Web SQL 섹션을 삭제했습니다.

Chromium 문제: 327254049

커버리지 패널 개선

이 버전에서는 커버리지 패널에 몇 가지 업데이트가 적용됩니다.

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

일치하는 자녀 통계를 올바르게 계산하기 전과 후

  • 사용된 코드의 색상이 이제 녹색이 아닌 회색으로 표시되어 특히 녹색 색각 이상이 있는 사용자의 가시성이 개선되었습니다.

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

Chromium 문제: 41494198, 329253687

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

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

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

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

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

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

CPU 성능을 프로파일링하려면 성능 패널을 사용하세요.

Chromium 문제: 40262073

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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