이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능, Chrome 127

Sofia Emelianova

Elements 패널에서 CSS 앵커 위치 검사

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

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

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

팝오버 타겟을 팝오버 요소에 연결하기 전과 후의 모습

Chromium 문제: 289900232, 330306231

소스 패널 개선

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

'여기에서 일시중지하지 않음' 기능 개선

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

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

실제 워크플로 보기:

Chromium 문제: 40924349

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

소스 > 이벤트 리스너 중단점 > 컨트롤 목록에는 scrollsnapchange 및 scrollsnapchanging라는 스크롤 맞추기 관련 리스너 두 개가 있습니다. 이러한 이벤트는 새 요소에 맞춰지는 방식으로 스크롤 컨테이너를 스크롤할 때 실행됩니다.

스크롤 스냅 관련 이벤트 리스너 추가 전후

Chromium 문제: 40286359

네트워크 패널 개선

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

네트워크 제한 사전 설정이 업데이트되었습니다.

네트워크 패널에 제한 사전 설정이 업데이트되었습니다. 새로운 빠른 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 텍스트 (40784130) 대신 유효한 wasm 바이너리로 저장합니다.
- 호출 스택: 비동기 호출 프레임 설명에서 (async) 접미사를 삭제하고 강조표시를 기울임꼴에서 굵게 표시 (343750870)했습니다.
메모리: 힙 스냅샷 요약에서 크기가 0인 불필요한 InternalNodes를 삭제했습니다 (340200025).
네트워크: 방금 시작했지만 아직 responseReceived 이벤트를 가져오지 않은 요청의 스트리밍 응답 콘텐츠 미리보기를 차단하는 버그가 수정되었습니다. (338340752)
성능:
- Selector Stats: %-of-Slow-Path-Non-Matches 열에 대한 설명 도움말이 추가되었습니다 (324282954).
- 트랙 구성 모드: 트랙 구성 완료 버튼이 오른쪽 하단으로 이동했습니다 (345256274).
Console: 뒤로-앞으로 캐시를 사용하여 탐색할 때 동일한 콘솔 메시지가 여러 개 표시되는 버그를 수정했습니다. (40894153)
설정: 모든 탭 옆에 도우미 아이콘이 추가되었습니다 (330213867).

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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