DevTools의 새로운 기능, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

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

명시적 및 암시적 앵커를 연결하기 전과 후

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

popovertarget을 팝오버 요소에 연결하기 전과 후

소스 패널 개선사항

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

향상된 '여기에서 일시중지 안함'

'Never Pause Here' 옵션을 사용하면 디버거가 동일한 줄에서 계속 일시중지되지 않도록 할 수 있습니다. 이렇게 하면 반복적으로 실행되는 관련 없는 중단점을 더 쉽게 처리할 수 있습니다. 이 버전에서는 이 기능이 개선되어 이제 다음 항목에 적용됩니다.

  • 기본 제공 함수의 예외 또는 프로미스 거부
  • DOM, 가져오기/XHR, CSP 위반 중단점 '취소'
  • Wasm 디스어셈블리

워크플로의 실제 사례 보기

Chromium 문제: 40924349

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

소스 > 이벤트 리스너 중단점 > 컨트롤 목록에 scroll-snap 관련 리스너인 scrollsnapchange 및 scrollsnapchanging가 추가됩니다. 이러한 이벤트는 스크롤 컨테이너를 새 요소에 맞추는 방식으로 스크롤할 때 실행됩니다.

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

Chromium 문제: 40286359

네트워크 패널 개선사항

이 버전에서는 네트워크 패널이 여러 측면에서 개선되었습니다.

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

Network 패널에 업데이트된 제한 사전 설정이 표시됩니다. 새로운 Fast 4G, Slow 4G로 이름이 바뀐 Fast 3G, 3G로 이름이 바뀐 Slow 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).
  • 메모리: 힙 스냅샷 요약에서 크기가 0인 불필요한 InternalNodes를 삭제했습니다 (340200025).
  • 네트워크: 방금 시작되었지만 아직 responseReceived 이벤트를 수신하지 않은 요청의 스트리밍 응답 콘텐츠 미리보기를 방해하는 버그를 수정했습니다 (338340752).
  • 실적:
    • 선택기 통계: %-of-Slow-Path-Non-Matches 열에 대한 설명 도움말이 추가되었습니다 (324282954).
    • 트랙 구성 모드: 트랙 구성 완료 버튼이 오른쪽 하단으로 이동했습니다 (345256274).
  • 콘솔: 뒤로-앞으로 캐시를 사용하여 탐색할 때 동일한 콘솔 메시지가 여러 개 표시되는 버그가 수정되었습니다 (40894153).
  • 설정: 모든 탭 옆에 도우미 아이콘이 추가되었습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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