이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능, Chrome 124

Sofia Emelianova

새 자동 완성 패널

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

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

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

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

자동완성 패널

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

WebRTC의 향상된 네트워크 제한

커스텀 네트워크 제한 프로필에 패킷 관련 매개변수가 새로 추가되었으므로 이제 DevTools에서 바로 WebRTC 애플리케이션을 제한할 수 있습니다. 이 기능은 서드 파티 소프트웨어를 사용할 필요 없이 실시간 통신 구현을 테스트하는 데 유용합니다.

새로운 매개변수는 패킷 손실 (백분율), 패킷 큐 길이 (패킷 수), check_box 패킷 재정렬 플래그입니다.

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

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

Chromium 문제: 41175925

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

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

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

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

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

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

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

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

Chromium 문제: 40166888

향상된 성능 패널

이 버전에서는 성능 패널이 개선되었습니다.

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

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

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

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

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

선택한 항목부터 시작된 이벤트 및 이름이 지정된 링크로 연결되는 이전과 이후 화면에는 '표시' 대신에 화살표가 표시되어 있습니다.

또한 모든 개시자의 요약 탭에 개시자 필드가 있으며 개시자 대상 및 시작자 필드에는 모두 공개 대신 이름이 지정된 링크가 있습니다.

Chromium 문제: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

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

주목할 만한 변경사항은 새로운 선택 설정인 check_box_outline_blank JS 샘플링 사용 설정입니다. 이 설정은 기본적으로 사용 중지되어 있습니다.

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

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

JS 샘플링이 없는 성능 추적 (왼쪽)과 JS 샘플링을 사용한 성능 트레이스 (오른쪽)

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

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

Chromium 문제: 772558.

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

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

특수 객체 그룹에 대한 설명 도움말을 표시하는 전후

Chromium 문제: 41490331

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

이 버전은 애플리케이션 > 저장소가 몇 가지 업데이트되었습니다.

공유 스토리지에 사용된 바이트

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

공유 저장공간에 사용되는 바이트 수가 표시된 전후

공유 저장소를 사용하면 개인 정보를 보호하는 읽기 액세스 권한으로 교차 사이트 저장소 쓰기에 무제한으로 액세스할 수 있습니다.

Chromium 문제: 324464353

웹 SQL이 완전히 지원 중단됨

Chrome에서 웹 SQL을 지원 중단하고 버전 119에서 지원 중단 체험판 토큰을 삭제했으므로 더 이상 웹 SQL을 사용할 수 없습니다.

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

Chromium 문제: 327254049

적용 범위 패널 개선

이 버전에서는 범위 패널이 다음과 같이 업데이트되었습니다.

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

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

특히, 특히 녹색이 아닌 색각 이상이 있는 경우 사용된 코드의 색상이 가시도를 개선하기 위해 녹색이 아닌 회색으로 표시됩니다.

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

Chromium 문제: 41494198, 329253687.

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

레이어 패널은 사용량이 적으므로 곧 지원 중단될 수 있습니다. 이제 패널 상단에 경고 배너가 표시됩니다.

레이어 패널 상단에 표시 중단 가능성을 알리는 경고 배너입니다.

담당 팀에서 패널 지원 중단을 최종 결정하기 전에 언제든지 의견과 우려사항을 공유해 주시기 바랍니다.

자바스크립트 프로파일러 지원 중단: 4단계, 최종

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

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

Chromium 문제: 40262073

기타 주요 사항

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

네트워크:
- 여러 줄 쿠키의 잘못된 파싱과 관련된 버그가 수정되었습니다 (325410304).
- Initiator 열의 호출 스택 미리보기를 수정했습니다. (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, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.