DevTools의 새로운 기능, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

앵커 위치 기능을 더 쉽게 디버그할 수 있도록 이제 스타일 탭에서 명시적 앵커 식별자와 암시적 앵커를 노드에 연결합니다.

명시적 및 암시적 앵커 연결 전후

또한 이제 popovertarget 속성 값이 DOM의 popover 요소에 연결됩니다.

popovertarget을 popover 요소에 연결하기 전과 후

소스 패널 개선사항

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

'여기에서 일시중지 안함' 개선

'여기서 일시중지 안함' 옵션을 사용하면 디버거가 동일한 줄에서 계속 일시중지되지 않도록 할 수 있습니다. 이렇게 하면 반복적으로 실행되는 관련 없는 브레이크포인트로 더 쉽게 작업할 수 있습니다. 이 버전에서는 이 기능이 향상되었으며 이제 다음과 같은 경우에 사용할 수 있습니다.

  • 기본 제공 함수의 예외 또는 약속 거부
  • DOM, 가져오기/XHR, CSP 위반 중단점을 '취소'합니다.
  • Wasm 분해

워크플로 작동 방식을 알아보세요.

Chromium 문제: 40924349

새로운 스크롤 스냅 이벤트 리스너

소스 > 이벤트 리스너 브레이크포인트 > 컨트롤 목록에는 scroll-snap 관련 리스너인 scrollsnapchange 및 scrollsnapchanging가 두 개 있습니다. 이러한 이벤트는 스크롤 컨테이너가 새 요소에 맞춰지도록 스크롤하면 실행됩니다.

스크롤 스냅 관련 이벤트 리스너를 추가하기 전과 후

Chromium 문제: 40286359

네트워크 패널 개선사항

이 버전에서는 네트워크 패널에 몇 가지 개선사항이 적용되었습니다.

네트워크 제한 사전 설정 업데이트

네트워크 패널의 제한 사전 설정이 업데이트됩니다. 새로운 빠른 4G, 빠른 3G가 느린 4G로 이름이 바뀌고 느린 3G가 3G로 이름이 바뀝습니다. 이렇게 하면 Lighthouse의 사전 설정에 더 잘 맞습니다.

네트워크 제한 사전 설정 업데이트 전후

Chromium 문제: 342406608

HAR 형식의 맞춤 필드에 있는 서비스 워커 정보

이제 네트워크 로그를 HAR 형식으로 내보낼 때 타이밍을 비롯한 서비스 워커와 관련된 정보를 맞춤 필드 (앞에 밑줄이 표시됨)로 확인할 수 있습니다. 예를 들어 로그에 다음과 같은 새 필드가 표시될 수 있습니다.

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Chromium 문제: 342406608

실적 패널에서 WebSocket 이벤트 보내기 및 수신하기

이제 다른 WebSocket 이벤트와 마찬가지로 성능 패널이 WebSocket 메시지 보내기 및 WebSocket 메시지 받기 이벤트를 캡처하여 성능 트레이스에 표시합니다. 예를 들면 다음과 같습니다.

성능 트레이스에 캡처된 'WebSocket 메시지 수신' 이벤트

Chromium 문제: 40286129

기타 하이라이트

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

  • 접근성: 이제 스크린 리더가 위쪽 및 아래쪽 화살표 키를 사용하여 로그를 스크롤할 때 콘솔의 메시지 콘텐츠를 읽어줍니다 (344484979).
  • 출처:
    • 페이지: 이제 다른 이름으로 저장 메뉴 옵션이 Wasm 모듈 파일을 Base64 텍스트 대신 유효한 wasm 바이너리로 저장합니다 (40784130).
    • 콜 스택: 비동기 호출 프레임 설명에서 (async) 접미사를 삭제하고 강조 표시를 기울임꼴에서 굵은 글꼴로 변경했습니다 (343750870).
  • 메모리: 힙 스냅샷 요약 (340200025)에서 불필요한 크기가 0인 InternalNodes를 삭제했습니다.
  • 네트워크: 방금 시작되었지만 아직 responseReceived 이벤트를 수신하지 못한 요청의 스트리밍 응답 콘텐츠 미리보기가 방지되는 버그를 수정했습니다. (338340752)
  • 실적:
    • 선택기 통계: %-of-Slow-Path-Non-Matches 열에 설명 툴팁이 추가되었습니다 (324282954).
    • 트랙 구성 모드: 트랙 구성 완료 버튼이 오른쪽 하단으로 이동했습니다 (345256274).
  • 콘솔: 뒤로/앞으로 캐시를 사용하여 탐색할 때 동일한 콘솔 메시지가 여러 번 표시되는 버그를 수정했습니다. (40894153)
  • 설정: 모든 탭 옆에 도움말 아이콘이 추가되었습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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