DevTools의 새로운 기능, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

새로운 자동 완성 패널

이 버전에서는 DevTools에 새로운 Autofill 패널이 추가되었습니다. Chrome 자동 완성을 이용하면 저장된 주소로 웹사이트의 양식을 자동으로 채울 수 있어 편리합니다. 새로운 자동 완성 패널을 사용하면 양식 필드, 예측된 자동 완성 값 및 저장된 데이터 간의 매핑을 검사할 수 있습니다.

테스트 데이터가 포함된 이 데모 페이지의 새로운 패널을 사용해 보세요.

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

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

자동 완성 패널

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

WebRTC의 향상된 네트워크 제한

패킷 관련 매개변수를 맞춤 네트워크 제한 프로필에 새롭게 추가함에 따라 이제 DevTools에서 바로 WebRTC 애플리케이션을 제한할 수 있습니다. 이 방법은 타사 소프트웨어를 사용할 필요 없이 실시간 통신 구현을 테스트하는 데 유용합니다.

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

커스텀 제한 프로필에 새 패킷 관련 옵션을 추가하기 전과 후입니다.

WebRTC 연결을 제한하려면 settings 설정 > 제한을 클릭하고 Network 패널에서 선택합니다.

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

Chromium 문제: 41175925

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

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

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

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

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

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

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

들여쓰기를 추가하고 중괄호 안에 중첩된 스타일을 둘러싸는 전후의 모습

Chromium 문제: 40166888

향상된 성능 패널

이 버전에서는 성능 패널에 몇 가지 개선사항이 포함되어 있습니다.

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

성능 > 플레임 차트에서 노이즈를 제거하려면 다음 안내를 따르세요. Main으로, 이제 관련 없는 함수와 그 하위 요소를 숨길 수 있습니다. Flame Chart에서 함수를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 옵션을 선택합니다.

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

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

선택한 시작자에서 시작한 이벤트로의 화살표

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

선택한 이벤트부터 시작된 이벤트 및 '표시' 대신 이름이 지정된 링크로 연결되는 화살표가 표시된 전후의 모습

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

Chromium 문제: 325604258, 325024819, 326055289

Lighthouse 11.6.0

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

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

수신 동의 JS 샘플링 설정을 추가하기 전과 후

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

JS 샘플링이 없는 경우 (왼쪽)와 사용한 경우 (오른쪽)의 성능 트레이스

more_vert 도구 메뉴 > Lighthouse 보고서가 생성된 후 제한되지 않은 트레이스 보기

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

Chromium 문제: 772558

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

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

특수 객체 그룹에 대한 도움말을 표시하는 전후의 모습

Chromium 문제: 41490331

애플리케이션 > 저장용량 업데이트

이 버전은 Application에 몇 가지 업데이트를 제공합니다. > 저장용량.

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

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

공유 스토리지에 사용되는 바이트 수를 표시하기 전과 후

공유 저장소를 사용하면 개인 정보가 보호되는 읽기 액세스와 함께 무제한, 교차 사이트 저장소 쓰기 액세스가 가능합니다.

Chromium 문제: 324464353

웹 SQL 완전히 지원 중단됨

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

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

Chromium 문제: 327254049

적용 범위 패널 개선

이 버전은 범위 패널에 몇 가지 업데이트를 제공합니다.

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

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

  • 사용된 코드의 색상이 이제 녹색 대신 회색으로 바뀌었습니다. 색각 이상이 있는 증상입니다.

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

Chromium 문제: 41494198, 329253687

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

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

레이어 패널 상단에 지원 중단 가능성을 알리는 경고 배너

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

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

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

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

Chromium 문제: 40262073

기타 주요 정보

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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