DevTools의 새로운 기능, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

소스 패널 개선사항

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

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

'여기서 일시중지 안함' 옵션을 사용하면 디버거가 동일한 줄에서 계속 일시중지되지 않도록 할 수 있습니다. 이렇게 하면 반복적으로 실행되는 관련성이 없는 중단점을 더 쉽게 사용할 수 있습니다. 이 버전은 이 기능을 개선하며 현재 다음에서 작동합니다.

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

실제 워크플로 보기:

Chromium 문제: 40924349

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

소스 > 이벤트 리스너 중단점 > 컨트롤 목록에는 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 이벤트와 마찬가지로, 이제 Performance 패널이 Send WebSocket Message 및 Received WebSocket Message 이벤트를 캡처하고 성능 트레이스에 표시합니다. 예를 들면 다음과 같습니다.

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

Chromium 문제: 40286129

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

DevTools의 새로운 기능

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