DevTools의 새로운 기능, Chrome 124

새 자동 완성 패널

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

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

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

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

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

WebRTC의 향상된 네트워크 제한

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

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

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

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

Chromium 문제: 41175925

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

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

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

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

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

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

Chromium 문제: 40166888

향상된 성능 패널

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

Flame Chart에서 함수 및 하위 요소 숨기기

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

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

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

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

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

Chromium 문제: 325604258, 325024819, 326055289

Lighthouse 11.6.0

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

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

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

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

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

Chromium 문제: 772558

Memory(메모리) > Heap snapshots(힙 스냅샷)의 특수 카테고리 도움말

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

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

Chrome DevTools팀에 문의하기

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

• crbug.com에서 의견 및 기능 요청을 제출합니다.
• DevTools에서 more_vert 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 알립니다.
• @ChromeDevTools에 트윗합니다.
• 'DevTools의 새로운 기능' YouTube 동영상 또는 'DevTools 팁' YouTube 동영상에 댓글을 남깁니다.

DevTools의 새로운 기능

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