DevTools의 새로운 기능, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

또한 popovertarget 속성 값이 이제 DOM의 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).
  • 출처:
    • 페이지: 이제 다른 이름으로 저장 메뉴 옵션이 Base64 텍스트 대신 유효한 wasm 바이너리로 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의 새로운 기능 시리즈에서 다룬 모든 내용의 목록입니다.